fix(button): add Roboto font family to button component (#36)

- Added font family and color settings in theme configuration - Ensured consistent typography across light and dark themes - Applied transition for smooth style changes
cognovi-ai · Jan 21, 2025 · a01a4a5 · a01a4a5
1 parent 22fc877
commit a01a4a5
Showing 1 changed file with 74 additions and 0 deletions.
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -79,6 +79,22 @@ const commonSettings = {
       textTransform: 'uppercase' as const,
     },
   },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          width: '100%',
+          height: '100%',
+          borderRadius: '5px',
+          borderWidth: '0.77px',
+          borderStyle: 'solid',
+          transition: 'all 0.2s ease-in-out',
+          fontFamily: 'Roboto',
+          fontSize: '16px',
+        },
+      },
+    },
+  },
 };
 
 export const lightTheme = createTheme({
@@ -93,6 +109,35 @@ export const lightTheme = createTheme({
       secondary: '#282828',
     },
   },
+  components: {
+    ...commonSettings.components,
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          ...commonSettings.components.MuiButton.styleOverrides.root,
+          backgroundColor: '#FFFFFF',
+          borderColor: '#282828',
+          color: '#282828',
+          '&:hover': {
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
+            borderColor: '#282828',
+            borderWidth: '0.77px',
+            borderStyle: 'solid',
+          },
+          '&.MuiButton-contained:hover': {
+            backgroundColor: '#d3d3d3',
+            borderWidth: '0.77px',
+            borderStyle: 'solid',
+          },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+            backgroundColor: '#FFFFFF',
+            borderColor: 'rgba(40, 40, 40, 0.3)',
+          },
+        },
+      },
+    },
+  },
 });
 
 export const darkTheme = createTheme({
@@ -111,4 +156,33 @@ export const darkTheme = createTheme({
     },
     divider: '#282828',
   },
+  components: {
+    ...commonSettings.components,
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          ...commonSettings.components.MuiButton.styleOverrides.root,
+          backgroundColor: '#282828',
+          borderColor: '#FFFFFF',
+          color: '#FFFFFF',
+          '&:hover': {
+            backgroundColor: 'rgba(40, 40, 40, 0.9)',
+            borderColor: '#FFFFFF',
+            borderWidth: '0.77px',
+            borderStyle: 'solid',
+          },
+          '&.MuiButton-contained:hover': {
+            backgroundColor: '#1a1a1a',
+            borderWidth: '0.77px',
+            borderStyle: 'solid',
+          },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+            backgroundColor: '#282828',
+            borderColor: 'rgba(255, 255, 255, 0.3)',
+          },
+        },
+      },
+    },
+  },
 });