mirror of
https://github.com/Sea-Haven-Industries/proposal-system.git
synced 2026-09-30 10:03:14 +00:00
Update theme: Inter font, flat AppBar, refined palette, 6px radius, polished component defaults
This commit is contained in:
Adam Moussa
parent
594d3395c6
commit
837aaa3db3
2 changed files with 206 additions and 60 deletions
|
|
@ -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>
|
||||
|
|
|
|||
263
web/src/theme.ts
263
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue