Update theme: Inter font, flat AppBar, refined palette, 6px radius, polished component defaults

web/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Proposal System - Sea Haven Industries</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   </head>
   <body>
     <div id="root"></div>

web/src/theme.ts

@@ -3,135 +3,266 @@ import { createTheme } from '@mui/material/styles';
 export const theme = createTheme({
   palette: {
     primary: {
-      main: '#0c4f6f',
+      main: '#0B4F6C',
-      light: '#1fa8de',
+      light: '#1B789B',
-      dark: '#083a52',
+      dark: '#07384D',
+      contrastText: '#FFFFFF',
     },
     secondary: {
-      main: '#007bff',
+      main: '#2563EB',
-      light: '#4da3ff',
+      light: '#60A5FA',
-      dark: '#0056b3',
+      dark: '#1D4ED8',
+      contrastText: '#FFFFFF',
+    },
+    success: {
+      main: '#2E7D32',
+      light: '#E8F5E9',
+      dark: '#1B5E20',
+      contrastText: '#FFFFFF',
+    },
+    warning: {
+      main: '#EA580C',
+      light: '#FFF3E6',
+      dark: '#C2410C',
+      contrastText: '#FFFFFF',
+    },
+    error: {
+      main: '#DC2626',
+      light: '#FEE2E2',
+      dark: '#991B1B',
+      contrastText: '#FFFFFF',
+    },
+    info: {
+      main: '#0284C7',
+      light: '#E0F2FE',
+      dark: '#075985',
+      contrastText: '#FFFFFF',
     },
     background: {
-      default: '#f4f6f7',
+      default: '#F4F7FA',
-      paper: '#ffffff',
+      paper: '#FFFFFF',
     },
     text: {
-      primary: '#333333',
+      primary: '#1F2933',
-      secondary: '#666666',
+      secondary: '#5B6673',
+      disabled: '#9AA4AF',
     },
-    divider: '#d9dde0',
+    divider: '#DDE3E8',
   },
+
   typography: {
-    fontFamily: '"Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-    fontSize: 13,
+    fontSize: 14,
-    h4: { fontWeight: 600, fontSize: '28px' },
+    h4: {
-    h5: { fontWeight: 600, fontSize: '22px' },
+      fontWeight: 600,
-    h6: { fontWeight: 600, fontSize: '16px' },
+      fontSize: '24px',
-    body1: { fontSize: '14px' },
+      lineHeight: 1.25,
-    body2: { fontSize: '13px' },
+      letterSpacing: '-0.01em',
+    },
+    h5: {
+      fontWeight: 600,
+      fontSize: '22px',
+      lineHeight: 1.3,
+      letterSpacing: '-0.01em',
+    },
+    h6: {
+      fontWeight: 600,
+      fontSize: '16px',
+      lineHeight: 1.4,
+    },
+    subtitle1: {
+      fontWeight: 600,
+      fontSize: '14px',
+      lineHeight: 1.4,
+    },
+    body1: {
+      fontSize: '14px',
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: '13px',
+      lineHeight: 1.45,
+    },
+    caption: {
+      fontSize: '12px',
+      lineHeight: 1.35,
+      color: '#5B6673',
+    },
+    button: {
+      fontSize: '13px',
+      fontWeight: 600,
+      textTransform: 'none' as const,
+    },
   },
+
   shape: {
-    borderRadius: 4,
+    borderRadius: 6,
   },
+
   components: {
-    MuiButton: {
+    MuiCssBaseline: {
       styleOverrides: {
-        root: {
+        body: {
-          textTransform: 'none',
+          fontFeatureSettings: '"tnum"',
-          fontWeight: 600,
+          backgroundColor: '#F4F7FA',
-          borderRadius: 4,
         },
       },
     },
+
     MuiAppBar: {
       defaultProps: {
         elevation: 0,
       },
       styleOverrides: {
         root: {
-          background: 'linear-gradient(#0c4f6f, #083a52)',
+          backgroundColor: '#07384D',
-          borderBottom: '1px solid #062c3e',
+          boxShadow: 'none',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
         },
       },
     },
+
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '#FBFCFD',
+          borderRight: '1px solid #DDE3E8',
+        },
+      },
+    },
+
     MuiCard: {
       defaultProps: {
         elevation: 0,
       },
       styleOverrides: {
         root: {
-          border: '1px solid #ddd',
+          border: '1px solid #DDE3E8',
-          borderRadius: 4,
+          boxShadow: '0 1px 2px rgba(16, 24, 40, 0.06)',
-          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+          borderRadius: 6,
         },
       },
     },
+
     MuiPaper: {
       defaultProps: {
         elevation: 0,
       },
       styleOverrides: {
         root: {
-          borderRadius: 4,
+          backgroundImage: 'none',
+          borderRadius: 6,
         },
       },
     },
+
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 6,
+          boxShadow: 'none',
+          textTransform: 'none' as const,
+          fontWeight: 600,
+        },
+        contained: {
+          boxShadow: '0 1px 2px rgba(16, 24, 40, 0.12)',
+          '&:hover': {
+            boxShadow: '0 2px 4px rgba(16, 24, 40, 0.16)',
+          },
+        },
+        outlined: {
+          borderColor: '#B8C7D3',
+          '&:hover': {
+            borderColor: '#0B4F6C',
+            backgroundColor: '#E6F2F8',
+          },
+        },
+      },
+    },
+
+    MuiTextField: {
+      defaultProps: {
+        size: 'small' as const,
+      },
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 6,
+          },
+        },
+      },
+    },
+
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: 6,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#B8C7D3',
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#8EA4B5',
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#0B4F6C',
+            borderWidth: 1,
+          },
+        },
+      },
+    },
+
     MuiTableHead: {
       styleOverrides: {
         root: {
           '& .MuiTableCell-head': {
+            color: '#374151',
             fontWeight: 600,
-            backgroundColor: '#f9f9f9',
+            fontSize: 13,
-            borderBottom: '2px solid #ddd',
+            paddingTop: 12,
+            paddingBottom: 12,
+            borderBottom: '1px solid #DDE3E8',
+            backgroundColor: '#F8FAFC',
           },
         },
       },
     },
+
     MuiTableCell: {
       styleOverrides: {
         root: {
-          fontSize: '14px',
+          color: '#1F2933',
-          padding: '12px',
+          fontSize: '13px',
-          borderBottom: '1px solid #eee',
+          padding: '11px 12px',
+          borderBottom: '1px solid #E8EDF2',
         },
       },
     },
+
     MuiTableRow: {
       styleOverrides: {
         root: {
           '&:hover': {
-            backgroundColor: '#f9f9f9',
+            backgroundColor: '#F3F8FB',
-          },
-        },
-      },
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          '& .MuiOutlinedInput-root': {
-            borderRadius: 4,
           },
         },
       },
     },
+
     MuiChip: {
       styleOverrides: {
         root: {
-          borderRadius: 4,
+          height: 24,
+          borderRadius: 5,
+          fontSize: 12,
           fontWeight: 600,
-          fontSize: '12px',
+        },
-        },
+        sizeSmall: {
-      },
+          height: 22,
-    },
+          fontSize: 12,
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          borderRight: '1px solid #d9dde0',
-          backgroundColor: '#fbfbfb',
         },
       },
     },
+
     MuiListItemButton: {
       styleOverrides: {
         root: {
@@ -139,26 +270,38 @@ export const theme = createTheme({
           marginLeft: 8,
           marginRight: 8,
           marginBottom: 4,
+          color: '#374151',
           '&.Mui-selected': {
-            backgroundColor: '#e6f1f7',
+            backgroundColor: '#E6F2F8',
-            borderLeft: '3px solid #0b80b5',
+            borderLeft: '3px solid #0B80B5',
+            color: '#1F2933',
             '&:hover': {
-              backgroundColor: '#dbedf5',
+              backgroundColor: '#DCECF5',
             },
           },
           '&:hover': {
-            backgroundColor: '#eef2f4',
+            backgroundColor: '#F1F5F9',
           },
         },
       },
     },
+
     MuiListItemIcon: {
       styleOverrides: {
         root: {
-          color: '#8c949a',
+          color: '#8A949E',
           minWidth: 36,
         },
       },
     },
+
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          fontSize: 12,
+          backgroundColor: '#1F2933',
+        },
+      },
+    },
   },
 });