Fixing UI, UX, and bugs in the dashboard

frontend/src/components/v2/Button/Button.tsx

@@ -26,7 +26,8 @@ const buttonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
-        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
+        danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90'],
+        gray: ['bg-bunker-500', 'text-bunker-200']
       },
       variant: {
         solid: '',
@@ -85,6 +86,11 @@ const buttonVariants = cva(
         variant: 'plain',
         className: 'text-primary'
       },
+      {
+        colorSchema: 'gray',
+        variant: 'plain',
+        className: 'bg-transparent text-bunker-200'
+      },
       {
         colorSchema: 'secondary',
         variant: 'plain',
@@ -165,7 +171,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         >
           {leftIcon}
         </div>
-        <span className={twMerge('w-full transition-all', loadingToggleClass)}>{children}</span>
+        <span className={twMerge('transition-all', isFullWidth ? 'w-full' : 'w-min', loadingToggleClass)}>{children}</span>
         <div
           className={twMerge(
             'inline-flex shrink-0 cursor-pointer items-center justify-center transition-all',

frontend/src/components/v2/Card/Card.tsx

@@ -25,7 +25,7 @@ export type CardFooterProps = {
 };
 
 export const CardFooter = ({ children, className }: CardFooterProps) => (
-  <div className={twMerge('p-6 pt-0', className)}>{children}</div>
+  <div className={twMerge('p-4 pt-0', className)}>{children}</div>
 );
 
 export type CardBodyProps = {

frontend/src/components/v2/Drawer/Drawer.tsx

@@ -45,13 +45,13 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
         ref={forwardedRef}
         className={twMerge(drawerContentVariation({ direction, className }))}
       >
-        <Card isRounded={false} className="h-full w-full">
+        <Card isRounded={false} className="h-full w-full dark">
           {title && (
             <CardTitle subTitle={subTitle} className="px-4">
               {title}
             </CardTitle>
           )}
-          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4">
+          <CardBody className="flex-grow overflow-y-auto overflow-x-hidden px-4 dark:[color-scheme:dark]">
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}{' '}

frontend/src/components/v2/IconButton/IconButton.tsx

@@ -24,7 +24,7 @@ const iconButtonVariants = cva(
       colorSchema: {
         primary: ['bg-primary', 'text-black', 'border-primary hover:opacity-80'],
         secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-bunker-400'],
-        danger: ['bg-[#973939] hover:bg-red', 'text-white', 'border-red']
+        danger: ['bg-[#973939]', 'text-white', 'border-red']
       },
       variant: {
         solid: '',
@@ -41,7 +41,7 @@ const iconButtonVariants = cva(
         false: ''
       },
       size: {
-        xs: ['text-xs', 'py-1.5', 'px-2'],
+        xs: ['text-xs', 'rounded-sm', 'py-1.5', 'px-2'],
         sm: ['text-sm', 'py-3', 'px-3'],
         md: ['text-md', 'py-4', 'px-4'],
         lg: ['text-lg', 'py-6', 'px-6']
@@ -76,7 +76,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: 'primary',
         variant: 'plain',
-        className: 'text-primary'
+        className: 'hover:text-primary'
       },
       {
         colorSchema: 'secondary',
@@ -86,7 +86,7 @@ const iconButtonVariants = cva(
       {
         colorSchema: 'danger',
         variant: 'plain',
-        className: 'text-red'
+        className: 'hover:text-red'
       },
       {
         colorSchema: ['danger', 'primary', 'secondary'],

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export const Tooltip = ({
       sideOffset={5}
       {...props}
       className={twMerge(
-        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm shadow-md 
+        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm text-bunker-200 shadow-md 
 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
 data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
 data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade