Merge branch 'pr/68' into hackathon

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

@@ -1,67 +0,0 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
-.button {
-    background-color: #000;
-    color: #fff;
-    padding: 10px;
-    margin: 10px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-    font-family: 'Inter';
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-        background-color: #fff;
-        color: #000;
-    }
-
-    &:active {
-        transform: scale(0.96);
-    }
-
-    &.disabled {
-        cursor: not-allowed !important;
-        opacity: 0.5 !important;
-
-        &:active {
-            transform: unset;
-        }
-    }
-
-    @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;
-
-            &:hover {
-                background-color: color.adjust($value, $lightness: 10%);
-            }
-
-            &:focus-visible,
-            &:active {
-                background-color: color.adjust($value, $lightness: -10%);
-            }
-
-            &.disabled {
-                background-color: $value !important;
-            }
-        }
-    }
-}

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

@@ -1,15 +1,18 @@
 import clsx from 'clsx';
 import React from 'react';
-import styles from './Button.module.scss';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
+import type IconComponent from '~icons/material-symbols';
+import Text from '../Text/Text';
 
 interface Props {
     className?: string;
     style?: React.CSSProperties;
+    variant: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    icon?: typeof IconComponent;
     disabled?: boolean;
     title?: string;
-    testId?: string;
+    color: ThemeColor;
 }
 
 /**
@@ -17,26 +20,57 @@ interface Props {
  * @returns
  */
 export function Button({
-    style,
     className,
-    type,
-    testId,
-    children,
+    style,
+    variant,
+    onClick,
+    icon,
     disabled,
     title,
-    onClick,
+    color,
+    children,
 }: React.PropsWithChildren<Props>): JSX.Element {
+    const Icon = icon;
+    const isIconOnly = !children && !!icon;
+    const colorHex = getThemeColorHexByName(color);
+    const colorRgb = getThemeColorRgbByName(color).join(' ');
+
     return (
         <button
-            style={style}
-            data-testid={testId}
-            className={clsx(styles.button, className, styles[type ?? 'primary'], {
-                [styles.disabled]: disabled,
-            })}
+            style={
+                {
+                    ...style,
+                    '--color': colorHex,
+                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
+                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
+                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
+                } as React.CSSProperties
+            }
+            className={clsx(
+                'btn',
+                {
+                    'disabled:(cursor-not-allowed opacity-50)': disabled,
+                    'color-white bg-[var(--color)] border-[var(--color)] hover:enabled:btn-shadow':
+                        variant === 'filled',
+                    'color-[var(--color)] bg-white border-current hover:enabled:btn-shade border border-solid':
+                        variant === 'outline',
+                    'color-[var(--color)] bg-white border-white hover:enabled:btn-shade': variant === 'single', // settings is the only "single"
+                    'px-2 py-1.25': isIconOnly && variant !== 'outline',
+                    'px-1.75 py-1.25': isIconOnly && variant === 'outline',
+                    'px-3.75': variant === 'outline' && !isIconOnly,
+                },
+                className
+            )}
             title={title}
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {children}
+            {icon && <Icon className='size-6' />}
+            {!isIconOnly && (
+                <Text variant='h4' className='translate-y-0.08'>
+                    {children}
+                </Text>
+            )}
         </button>
     );
 }

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

@@ -1,7 +1,7 @@
 @import 'src/views/styles/base.module.scss';
 
 .extensionRoot {
-    font-family: 'Inter' !important;
+    @apply font-sans;
     color: #303030;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;