refactor: restructure settings

refactor: migrate react components

apps/client/src/common/components/buttons/BaseButtonStyles.module.scss

@@ -1,6 +1,7 @@
 .subtle {
   background: $gray-1050;
   color: $blue-400;
+  line-height: 1em;
 
   &:hover:not(:disabled):not(:active) {
     background: $gray-1000;
@@ -116,4 +117,24 @@
   &:disabled {
     opacity: $opacity-disabled;
   }
-}
+}
+
+
+.ghosted-destructive {
+  background: transparent;
+  color: $red-500;
+
+  &:hover:not(:disabled):not(:active) {
+    background: $gray-1000;
+    color: $red-500;
+  }
+
+  &:active:not(:disabled) {
+    background: $gray-1100;
+    border-color: $gray-1250;
+  }
+
+  &:disabled {
+    opacity: $opacity-disabled;
+  }
+}

apps/client/src/common/components/buttons/Button.tsx

@@ -6,7 +6,15 @@ import { cx } from '../../utils/styleUtils';
 import style from './Button.module.scss';
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
   size?: 'small' | 'medium' | 'large' | 'xlarge';
   fluid?: boolean;
   loading?: boolean;

apps/client/src/common/components/buttons/IconButton.tsx

@@ -5,7 +5,15 @@ import { cx } from '../../utils/styleUtils';
 import style from './IconButton.module.scss';
 
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
+  variant?:
+    | 'primary'
+    | 'subtle'
+    | 'subtle-white'
+    | 'destructive'
+    | 'subtle-destructive'
+    | 'ghosted'
+    | 'ghosted-white'
+    | 'ghosted-destructive';
   size?: 'small' | 'medium' | 'large' | 'xlarge';
 }