feat: Button styling

implerhq · Oct 14, 2024 · a3ebea7 · a3ebea7
1 parent a14154d
commit a3ebea7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/apps/web/components/imports/forms/CreateImportForm.tsx b/apps/web/components/imports/forms/CreateImportForm.tsx
@@ -1,8 +1,8 @@
 import { Controller, useForm } from 'react-hook-form';
 import { useFocusTrap } from '@mantine/hooks';
 import { Stack, TextInput as Input, FocusTrap, Text, Group, useMantineTheme } from '@mantine/core';
-import { Button } from '@ui/button';
 
+import { Button } from '@ui/button';
 import { INTEGRATE_IMPORT } from '@config';
 import { IntegrationEnum } from '@impler/shared';
 
@@ -47,6 +47,7 @@ export function CreateImportForm({ onSubmit }: CreateImportFormProps) {
                     key={key}
                     radius="xl"
                     leftIcon={<Icon />}
+                    color={field.value === key ? 'blue' : 'grey'}
                     variant={field.value === key ? 'filled' : 'outline'}
                     onClick={() => field.onChange(key)}
                   >

diff --git a/apps/web/config/theme.config.ts b/apps/web/config/theme.config.ts
@@ -12,6 +12,7 @@ export const colors = {
   yellow: '#F7B801',
   grey: '#B9BEBD',
   darkGrey: '#454545',
+  lightGrey: '#333333',
 
   BGPrimaryDark: '#111111',
   BGPrimaryLight: '#F3F3F3',

diff --git a/apps/web/design-system/button/Button.styles.ts b/apps/web/design-system/button/Button.styles.ts
@@ -9,6 +9,7 @@ const colorsCodes: Record<ButtonColors, string> = {
   green: colors.green,
   invariant: colors.black,
   yellow: colors.yellow,
+  grey: colors.StrokeLight,
 };
 
 const getRootFilledStyles = (theme: MantineTheme, color: ButtonColors = 'blue', fullWidth?: boolean) => ({
@@ -101,6 +102,14 @@ const getRootOutlineStyles = (
       color: colors.white,
       border: `1px solid ${colors.yellow}`,
     }),
+    ...(color === 'grey' && {
+      backgroundColor: colors.lightGrey,
+      color: colors.white,
+      border: `1px solid ${colors.lightGrey}`,
+      '> svg': {
+        color: theme.colorScheme === 'dark' ? colors.black : colors.white,
+      },
+    }),
     color: theme.colorScheme === 'dark' && color === 'invariant' ? colors.black : colors.white,
   },
 });

diff --git a/apps/web/design-system/button/Button.tsx b/apps/web/design-system/button/Button.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import useStyles from './Button.styles';
 import { Button as MantineButton, MantineSize, ButtonProps as MantineButtonProps } from '@mantine/core';
 
-export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow';
+export type ButtonColors = 'blue' | 'invariant' | 'red' | 'green' | 'yellow' | 'grey';
 export type ButtonVariants = 'filled' | 'outline';
 
 interface ButtonProps extends MantineButtonProps {