From 2d6307f6eaa0803aefabae9e9232506611365b66 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 13 Jun 2025 09:00:49 -0400
Subject: updated css and project to HTML5 standards.  fixed border rounding
 for images.

---
 .../components/src/components/Button/Button.scss   |  10 +-
 .../src/components/Button/Button.stories.tsx       | 149 +++++++++++----------
 .../src/components/Dropdown/Dropdown.scss          |   4 +-
 .../src/components/EditableText/EditableText.scss  |  10 +-
 .../src/components/FormInput/FormInput.scss        |   2 +-
 .../components/src/components/Overlay/Overlay.scss |   6 +-
 .../src/components/Toggle/Toggle.stories.tsx       |  54 ++++----
 .../components/src/global/globalCssVariables.scss  |   2 +-
 8 files changed, 121 insertions(+), 116 deletions(-)

(limited to 'packages/components/src')

diff --git a/packages/components/src/components/Button/Button.scss b/packages/components/src/components/Button/Button.scss
index c86db9fad..c87198ddf 100644
--- a/packages/components/src/components/Button/Button.scss
+++ b/packages/components/src/components/Button/Button.scss
@@ -20,8 +20,8 @@
     pointer-events: all;
 
     &.icon {
-        padding: 0;
-        gap: 0;
+        padding: 0px;
+        gap: 0px;
     }
 
     .button-content {
@@ -44,8 +44,8 @@
         width: 100%;
         height: 100%;
         z-index: 0;
-        left: 0;
-        top: 0;
+        left: 0px;
+        top: 0px;
         position: absolute;
         transition: 0.4s;
     }
@@ -111,7 +111,7 @@
 
     .label {
         position: absolute;
-        bottom: 0;
+        bottom: 0px;
         width: 100%;
         display: flex;
         justify-content: center;
diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx
index 3893d9ded..9e7e8cb05 100644
--- a/packages/components/src/components/Button/Button.stories.tsx
+++ b/packages/components/src/components/Button/Button.stories.tsx
@@ -1,94 +1,97 @@
-import { Meta, Story } from '@storybook/react'
-import React from 'react'
-import * as bi from 'react-icons/bi'
-import { Button, IButtonProps } from '..'
-import { Colors, Size } from '../../global/globalEnums'
-import { Type , getFormLabelSize } from '../../global'
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import * as bi from 'react-icons/bi';
+import { Button, IButtonProps } from '..';
+import { Type } from '../../global';
+import { Size } from '../../global/globalEnums';
 
 export default {
-  title: 'Dash/Button',
-  component: Button,
-  argTypes: {},
-} as Meta<typeof Button>
+    title: 'Dash/Button',
+    component: Button,
+    argTypes: {},
+} as Meta<typeof Button>;
 
-const Template: Story<IButtonProps> = (args) => <Button {...args} />
+const Template: Story<IButtonProps> = args => <Button {...args} />;
 
-export const Primary = Template.bind({})
+export const Primary = Template.bind({});
 Primary.args = {
-  onClick: () => {},
-  text: 'Primary',
-  type: Type.PRIM,
-  style: {
-    fontWeight: 600
-  },
-  tooltip: 'Primary button'
-}
+    onClick: () => {},
+    text: 'Primary',
+    type: Type.PRIM,
+    style: {
+        fontWeight: 600,
+    },
+    tooltip: 'Primary button',
+};
 
-export const Secondary = Template.bind({})
+export const Secondary = Template.bind({});
 Secondary.args = {
-  onClick: () => {},
-  text: 'Secondary',
-  type: Type.SEC,
-  tooltip: 'Secondary button'
-}
+    onClick: () => {},
+    text: 'Secondary',
+    type: Type.SEC,
+    tooltip: 'Secondary button',
+    color: 'green',
+    background: 'yellow',
+};
 
-export const Tertiary = Template.bind({})
+export const Tertiary = Template.bind({});
 Tertiary.args = {
-  onClick: () => {},
-  text: 'Tertiary',
-  type: Type.TERT,
-  size: Size.SMALL,
-}
+    onClick: () => {},
+    text: 'Tertiary',
+    type: Type.TERT,
+    size: Size.SMALL,
+    background: 'yellow',
+};
 
-export const Small = Template.bind({})
+export const Small = Template.bind({});
 Small.args = {
-  onClick: () => {},
-  text: 'Small',
-  type: Type.PRIM,
-  size: Size.SMALL,
-}
+    onClick: () => {},
+    text: 'Small',
+    type: Type.PRIM,
+    size: Size.SMALL,
+};
 
-export const Medium = Template.bind({})
+export const Medium = Template.bind({});
 Medium.args = {
-  onClick: () => {},
-  text: 'Medium',
-  type: Type.PRIM,
-  size: Size.MEDIUM,
-}
+    onClick: () => {},
+    text: 'Medium',
+    type: Type.PRIM,
+    size: Size.MEDIUM,
+};
 
-export const Large = Template.bind({})
+export const Large = Template.bind({});
 Large.args = {
-  onClick: () => {},
-  text: 'Large',
-  type: Type.PRIM,
-  size: Size.LARGE,
-}
+    onClick: () => {},
+    text: 'Large',
+    type: Type.PRIM,
+    size: Size.LARGE,
+};
 
-export const ButtonWithLeftIcon = Template.bind({})
+export const ButtonWithLeftIcon = Template.bind({});
 ButtonWithLeftIcon.args = {
-  onClick: () => {},
-  text: 'New',
-  icon: <bi.BiPlus />,
-  iconPosition: 'left',
-  type: Type.PRIM,
-}
+    onClick: () => {},
+    text: 'New',
+    icon: <bi.BiPlus />,
+    iconPosition: 'left',
+    type: Type.PRIM,
+};
 
-export const ButtonWithRightIcon = Template.bind({})
+export const ButtonWithRightIcon = Template.bind({});
 ButtonWithRightIcon.args = {
-  onClick: () => {},
-  text: 'More',
-  iconPosition: 'right',
-  icon: <bi.BiMobile />,
-  type: Type.PRIM,
-}
+    onClick: () => {},
+    text: 'More',
+    iconPosition: 'right',
+    icon: <bi.BiMobile />,
+    type: Type.PRIM,
+};
 
-export const Label = Template.bind({})
+export const Label = Template.bind({});
 Label.args = {
-  onClick: () => {},
-  text: 'Label',
-  type: Type.PRIM,
-  style: {
-    fontWeight: 600
-  },
-  tooltip: 'Label button'
-}
\ No newline at end of file
+    onClick: () => {},
+    text: 'Label',
+    type: Type.PRIM,
+    style: {
+        fontWeight: 600,
+    },
+    tooltip: 'Label button',
+};
diff --git a/packages/components/src/components/Dropdown/Dropdown.scss b/packages/components/src/components/Dropdown/Dropdown.scss
index f9ea2711a..516c229a5 100644
--- a/packages/components/src/components/Dropdown/Dropdown.scss
+++ b/packages/components/src/components/Dropdown/Dropdown.scss
@@ -129,8 +129,8 @@
     .dropdown-toggle-mini {
         .toggle-caret {
             position: absolute;
-            top: 0;
-            left: 0;
+            top: 0px;
+            left: 0px;
         }
     }
 }
diff --git a/packages/components/src/components/EditableText/EditableText.scss b/packages/components/src/components/EditableText/EditableText.scss
index 15965e97e..691b05590 100644
--- a/packages/components/src/components/EditableText/EditableText.scss
+++ b/packages/components/src/components/EditableText/EditableText.scss
@@ -16,18 +16,18 @@
         justify-content: center;
         align-items: center;
         height: 100%;
-        right: 0;
-        top: 0;
+        right: 0px;
+        top: 0px;
     }
 
     .editableText-background {
         width: 100%;
         height: 100%;
-        z-index: -1;
+        z-index: -1px;
         position: absolute;
         transition: 0.4s;
-        top: 0;
-        left: 0;
+        top: 0px;
+        left: 0px;
     }
 
     &.primary {
diff --git a/packages/components/src/components/FormInput/FormInput.scss b/packages/components/src/components/FormInput/FormInput.scss
index 2554cbd01..187827724 100644
--- a/packages/components/src/components/FormInput/FormInput.scss
+++ b/packages/components/src/components/FormInput/FormInput.scss
@@ -58,7 +58,7 @@
 
     .formInput-label {
         position: absolute;
-        top: 0;
+        top: 0px;
         transform: translate(0px, 8px);
         display: block;
         transition: 0.2s;
diff --git a/packages/components/src/components/Overlay/Overlay.scss b/packages/components/src/components/Overlay/Overlay.scss
index 5ba4f802c..2c3d9530d 100644
--- a/packages/components/src/components/Overlay/Overlay.scss
+++ b/packages/components/src/components/Overlay/Overlay.scss
@@ -1,9 +1,9 @@
 .overlay-container {
     width: 100vw;
     height: 100vh;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     background: pink;
     position: absolute;
     pointer-events: none;
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/components/Toggle/Toggle.stories.tsx b/packages/components/src/components/Toggle/Toggle.stories.tsx
index 28ab2e712..6adf63424 100644
--- a/packages/components/src/components/Toggle/Toggle.stories.tsx
+++ b/packages/components/src/components/Toggle/Toggle.stories.tsx
@@ -1,35 +1,37 @@
-import { Meta, Story } from '@storybook/react'
-import React from 'react'
-import * as bi from 'react-icons/bi'
-import { IToggleProps, Toggle, ToggleType } from './Toggle'
-import { Type , getFormLabelSize } from '../../global'
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import * as bi from 'react-icons/bi';
+import { Type } from '../../global';
+import { IToggleProps, Toggle, ToggleType } from './Toggle';
 
 export default {
-  title: 'Dash/Toggle',
-  component: Toggle,
-  argTypes: {},
-} as Meta<typeof Toggle>
+    title: 'Dash/Toggle',
+    component: Toggle,
+    argTypes: {},
+} as Meta<typeof Toggle>;
 
-const Template: Story<IToggleProps> = (args) => <Toggle {...args} />
+const Template: Story<IToggleProps> = args => <Toggle {...args} />;
 
-export const Button = Template.bind({})
+export const Button = Template.bind({});
 Button.args = {
-  // text: 'Button',
-  type: Type.TERT,
-  icon: <bi.BiAbacus/>,
-  toggleType: ToggleType.BUTTON,
-  tooltip: 'Test tooltip'
-}
+    // text: 'Button',
+    type: Type.PRIM,
+    icon: <bi.BiAbacus />,
+    toggleType: ToggleType.BUTTON,
+    tooltip: 'Test tooltip',
+    color: 'green',
+    background: 'yellow',
+};
 
-export const Checkbox = Template.bind({})
+export const Checkbox = Template.bind({});
 Checkbox.args = {
-  type: Type.SEC,
-  toggleType: ToggleType.CHECKBOX
-}
+    type: Type.SEC,
+    toggleType: ToggleType.CHECKBOX,
+};
 
-export const Switch = Template.bind({})
+export const Switch = Template.bind({});
 Switch.args = {
-  text: 'Button',
-  type: Type.SEC,
-  toggleType: ToggleType.SWITCH
-}
\ No newline at end of file
+    text: 'Button',
+    type: Type.SEC,
+    toggleType: ToggleType.SWITCH,
+};
diff --git a/packages/components/src/global/globalCssVariables.scss b/packages/components/src/global/globalCssVariables.scss
index ebc44106d..99fe7fb11 100644
--- a/packages/components/src/global/globalCssVariables.scss
+++ b/packages/components/src/global/globalCssVariables.scss
@@ -59,7 +59,7 @@ $small-text: 9px;
 // $sans-serif: "Roboto Slab", sans-serif;
 
 // misc values
-$search-thumnail-size: 130;
+$search-thumnail-size: 130px;
 $topbar-height: 50px;
 $antimodemenu-height: 36px;
 
-- 
cgit v1.2.3-70-g09d2