feat: updated Button to v2 design

wip commit

src/views/components/common/Button/Button.module.scss

@@ -2,15 +2,18 @@
 @use 'src/views/styles/colors.module.scss';
 
 .button {
-    background-color: #000;
-    color: #fff;
-    padding: 10px;
+    padding: 0px 16px;
+    height: 40px;
     margin: 10px;
-    border-radius: 8px;
+    border-radius: 4px;
     border: none;
     cursor: pointer;
     transition: all 0.1s ease-in-out;
-    font-family: 'Inter';
+    font-family: 'Roboto';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 
     display: flex;
     align-items: center;
@@ -34,34 +37,19 @@
         }
     }
 
-    @each $color,
-        $value
-            in (
-                primary: colors.$burnt_orange,
-                secondary: colors.$charcoal,
-                tertiary: colors.$bluebonnet,
-                danger: colors.$speedway_brick,
-                warning: colors.$tangerine,
-                success: colors.$turtle_pond,
-                info: colors.$turquoise
-            )
-    {
-        &.#{$color} {
-            background-color: $value;
-            color: #fff;
+    &.filled {
+        background-color: var(--color-primary);
+        color: var(--color-secondary);
+    }
 
-            &:hover {
-                background-color: color.adjust($value, $lightness: 10%);
-            }
+    &.outline {
+        background-color: var(--color-secondary);
+        color: var(--color-primary);
+        border: 1px solid var(--color-primary);
+    }
 
-            &:focus-visible,
-            &:active {
-                background-color: color.adjust($value, $lightness: -10%);
-            }
-
-            &.disabled {
-                background-color: $value !important;
-            }
-        }
+    &.single {
+        background-color: var(--color-secondary);
+        color: var(--color-primary);
     }
 }

src/views/components/common/Button/Button.tsx

@@ -5,11 +5,16 @@ import styles from './Button.module.scss';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
+    type?: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    iconOnly?: boolean;
+    showSymbol?: boolean;
+    symbol?: React.ReactNode;
     disabled?: boolean;
     title?: string;
     testId?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
 
 /**
@@ -17,26 +22,37 @@ interface Props {
  * @returns
  */
 export function Button({
-    style,
     className,
+    style,
     type,
-    testId,
-    children,
+    onClick,
+    iconOnly,
+    showSymbol,
+    symbol,
     disabled,
     title,
-    onClick,
+    testId,
+    primaryColor,
+    secondaryColor,
+    children,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
         <button
-            style={style}
+            style={
+                {
+                    ...style,
+                    '--color-primary': primaryColor ?? '#333F48',
+                    '--color-secondary': secondaryColor ?? '#FFFFFF',
+                } as React.CSSProperties
+            }
             data-testid={testId}
-            className={classNames(styles.button, className, styles[type ?? 'primary'], {
+            className={classNames(styles.button, className, styles[type ?? 'filled'], {
                 [styles.disabled]: disabled,
             })}
             title={title}
             onClick={disabled ? undefined : onClick}
         >
-            {children}
+            {!iconOnly && children}
         </button>
     );
 }