From 837aaa3db3337b9fc55c48faff8515ca2ed90238 Mon Sep 17 00:00:00 2001 From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com> Date: Fri, 22 May 2026 18:07:28 -0400 Subject: [PATCH] Update theme: Inter font, flat AppBar, refined palette, 6px radius, polished component defaults --- web/index.html | 3 + web/src/theme.ts | 263 ++++++++++++++++++++++++++++++++++++----------- 2 files changed, 206 insertions(+), 60 deletions(-) diff --git a/web/index.html b/web/index.html index 7b7a1a9..62fb501 100644 --- a/web/index.html +++ b/web/index.html @@ -4,6 +4,9 @@ Proposal System - Sea Haven Industries + + +
diff --git a/web/src/theme.ts b/web/src/theme.ts index 5ac98ba..7b28512 100644 --- a/web/src/theme.ts +++ b/web/src/theme.ts @@ -3,135 +3,266 @@ import { createTheme } from '@mui/material/styles'; export const theme = createTheme({ palette: { primary: { - main: '#0c4f6f', - light: '#1fa8de', - dark: '#083a52', + main: '#0B4F6C', + light: '#1B789B', + dark: '#07384D', + contrastText: '#FFFFFF', }, secondary: { - main: '#007bff', - light: '#4da3ff', - dark: '#0056b3', + main: '#2563EB', + light: '#60A5FA', + 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', - paper: '#ffffff', + default: '#F4F7FA', + paper: '#FFFFFF', }, text: { - primary: '#333333', - secondary: '#666666', + primary: '#1F2933', + secondary: '#5B6673', + disabled: '#9AA4AF', }, - divider: '#d9dde0', + divider: '#DDE3E8', }, + typography: { - fontFamily: '"Nunito", "Segoe UI", Roboto, Helvetica, Arial, sans-serif', - fontSize: 13, - h4: { fontWeight: 600, fontSize: '28px' }, - h5: { fontWeight: 600, fontSize: '22px' }, - h6: { fontWeight: 600, fontSize: '16px' }, - body1: { fontSize: '14px' }, - body2: { fontSize: '13px' }, + fontFamily: '"Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif', + fontSize: 14, + h4: { + fontWeight: 600, + fontSize: '24px', + lineHeight: 1.25, + 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: { - textTransform: 'none', - fontWeight: 600, - borderRadius: 4, + body: { + fontFeatureSettings: '"tnum"', + backgroundColor: '#F4F7FA', }, }, }, + MuiAppBar: { defaultProps: { elevation: 0, }, styleOverrides: { root: { - background: 'linear-gradient(#0c4f6f, #083a52)', - borderBottom: '1px solid #062c3e', + backgroundColor: '#07384D', + 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', - borderRadius: 4, - boxShadow: '0 1px 3px rgba(0,0,0,0.1)', + border: '1px solid #DDE3E8', + boxShadow: '0 1px 2px rgba(16, 24, 40, 0.06)', + 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', - borderBottom: '2px solid #ddd', + fontSize: 13, + paddingTop: 12, + paddingBottom: 12, + borderBottom: '1px solid #DDE3E8', + backgroundColor: '#F8FAFC', }, }, }, }, + MuiTableCell: { styleOverrides: { root: { - fontSize: '14px', - padding: '12px', - borderBottom: '1px solid #eee', + color: '#1F2933', + fontSize: '13px', + padding: '11px 12px', + borderBottom: '1px solid #E8EDF2', }, }, }, + MuiTableRow: { styleOverrides: { root: { '&:hover': { - backgroundColor: '#f9f9f9', - }, - }, - }, - }, - MuiTextField: { - styleOverrides: { - root: { - '& .MuiOutlinedInput-root': { - borderRadius: 4, + backgroundColor: '#F3F8FB', }, }, }, }, + MuiChip: { styleOverrides: { root: { - borderRadius: 4, + height: 24, + borderRadius: 5, + fontSize: 12, fontWeight: 600, - fontSize: '12px', - }, - }, - }, - MuiDrawer: { - styleOverrides: { - paper: { - borderRight: '1px solid #d9dde0', - backgroundColor: '#fbfbfb', + }, + sizeSmall: { + height: 22, + fontSize: 12, }, }, }, + MuiListItemButton: { styleOverrides: { root: { @@ -139,26 +270,38 @@ export const theme = createTheme({ marginLeft: 8, marginRight: 8, marginBottom: 4, + color: '#374151', '&.Mui-selected': { - backgroundColor: '#e6f1f7', - borderLeft: '3px solid #0b80b5', + backgroundColor: '#E6F2F8', + 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', + }, + }, + }, }, });