feat(ui): update button variants following figma (#482)

* feat(ui): update button variants following figma

* feat(ui): separate size prop to allow for regular and small sized button variants

* update type to no longer include minimal-small

* update uno css config to use new spacing system

* add variants and sizes to file upload; update button and file upload stories

* add mini button variant and update small button

* specify width on icon-only regular variant

* update plus buttons to be mini sizes

* remove redundant classnames

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/views/components/common/Button.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    variant: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'minimal';
+    size?: 'regular' | 'small' | 'mini';
     onClick?: () => void;
     icon?: Icon;
     iconProps?: IconProps;
@@ -24,7 +25,8 @@ interface Props {
 export function Button({
     className,
     style,
-    variant,
+    variant = 'filled',
+    size = 'regular',
     onClick,
     icon,
     iconProps,
@@ -52,11 +54,15 @@ export function Button({
                 {
                     'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
-                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': 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,
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border stroke-width-[1px]':
+                        variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'minimal',
+                    'h-10 gap-spacing-3 px-spacing-5': size === 'regular' && !isIconOnly,
+                    'h-10 w-10 p-spacing-2': size === 'regular' && isIconOnly,
+                    'h-[35px] gap-spacing-3 px-spacing-3': size === 'small' && !isIconOnly,
+                    'h-[35px] w-[35px] p-spacing-2': size === 'small' && isIconOnly,
+                    'h-6 p-spacing-2': size === 'mini' && !isIconOnly,
+                    'h-6 w-6 p-0': size === 'mini' && isIconOnly,
                 },
                 className
             )}
@@ -66,7 +72,10 @@ export function Button({
         >
             {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
-                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
+                <Text
+                    variant={size === 'regular' ? 'h4' : 'small'}
+                    className='inline-flex translate-y-0.08 items-center gap-2'
+                >
                     {children}
                 </Text>
             )}

src/views/components/common/FileUpload.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    variant: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'minimal';
+    size?: 'regular' | 'small' | 'mini';
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     icon?: Icon;
     iconProps?: IconProps;
@@ -25,7 +26,8 @@ interface Props {
 export default function FileUpload({
     className,
     style,
-    variant,
+    variant = 'filled',
+    size = 'regular',
     onChange,
     icon,
     iconProps,
@@ -53,11 +55,15 @@ export default function FileUpload({
                 {
                     'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
-                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
-                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': 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,
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border stroke-width-[1px]':
+                        variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'minimal',
+                    'h-10 gap-spacing-3 px-spacing-5': size === 'regular' && !isIconOnly,
+                    'h-10 w-10 p-spacing-2': size === 'regular' && isIconOnly,
+                    'h-[35px] gap-spacing-3 px-spacing-3': size === 'small' && !isIconOnly,
+                    'h-[35px] w-[35px] p-spacing-2': size === 'small' && isIconOnly,
+                    'h-6 p-spacing-2': size === 'mini' && !isIconOnly,
+                    'h-6 w-6 p-0': size === 'mini' && isIconOnly,
                 },
                 className
             )}
@@ -65,7 +71,10 @@ export default function FileUpload({
         >
             {Icon && <Icon {...iconProps} className={clsx('h-6 w-6', iconProps?.className)} />}
             {!isIconOnly && (
-                <Text variant='h4' className='inline-flex translate-y-0.08 items-center gap-2'>
+                <Text
+                    variant={size === 'regular' ? 'h4' : 'small'}
+                    className='inline-flex translate-y-0.08 items-center gap-2'
+                >
                     {children}
                 </Text>
             )}

src/views/components/common/MigrationDialog.tsx

@@ -53,7 +53,7 @@ function MigrationButtons({ close }: { close: () => void }): JSX.Element {
                 </Text>
             )}
             <Button
-                variant='single'
+                variant='minimal'
                 color='ut-black'
                 onClick={() => {
                     close();

src/views/components/common/ScheduleListItem.tsx

@@ -73,7 +73,7 @@ export default function ScheduleListItem({ schedule, dragHandleProps, onClick }:
             // eslint-disable-next-line react/no-unstable-nested-components
             buttons: close => (
                 <>
-                    <Button variant='single' color='ut-black' onClick={close}>
+                    <Button variant='minimal' color='ut-black' onClick={close}>
                         Cancel
                     </Button>
                     <Button