Skip to content

Commit dc8f4c3

Browse files
areisleareisle
committed
refactor: move theme to own file
1 parent ccd3af2 commit dc8f4c3

2 files changed

Lines changed: 96 additions & 86 deletions

File tree

‎src/App.tsx‎

Lines changed: 12 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
import createCache from '@emotion/cache';
2-
import { CacheProvider } from '@emotion/react';
3-
import { CssBaseline } from '@mui/material';
4-
import { createTheme, ThemeProvider } from '@mui/material/styles';
5-
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
61
import { SnackbarProvider } from 'notistack';
72
import React from 'react';
83
import { QueryClientProvider } from 'react-query';
@@ -11,94 +6,25 @@ import { BrowserRouter } from 'react-router-dom';
116
import { AuthProvider } from '@/components/Auth';
127
import api from '@/services/api';
138

9+
import ThemeProvider from './theme';
1410
import MainView from './views/MainView';
1511

16-
ModuleRegistry.registerModules([AllCommunityModule]);
17-
18-
const cache = createCache({
19-
key: 'css',
20-
prepend: true,
21-
});
22-
23-
const theme = createTheme({
24-
direction: 'ltr',
25-
components: {
26-
MuiButton: { defaultProps: { size: 'small' } },
27-
MuiChip: { defaultProps: { size: 'small' } },
28-
MuiFab: { defaultProps: { size: 'small' } },
29-
MuiFilledInput: { defaultProps: { margin: 'dense' } },
30-
MuiFormControl: { defaultProps: { margin: 'none' } },
31-
MuiFormHelperText: { defaultProps: { margin: 'dense' } },
32-
MuiIconButton: { defaultProps: { size: 'small' } },
33-
MuiInputLabel: { defaultProps: { margin: 'dense' } },
34-
MuiListItem: { defaultProps: { dense: true } },
35-
MuiOutlinedInput: { defaultProps: { margin: 'dense' } },
36-
MuiSvgIcon: { defaultProps: { fontSize: 'small' } },
37-
MuiTable: { defaultProps: { size: 'small' } },
38-
MuiTextField: { defaultProps: { variant: 'standard' } },
39-
MuiToggleButton: { defaultProps: { size: 'small' } },
40-
MuiToggleButtonGroup: { defaultProps: { size: 'small' } },
41-
MuiToolbar: { defaultProps: { variant: 'dense' } },
42-
},
43-
mixins: {},
44-
palette: {
45-
mode: 'light',
46-
primary: {
47-
main: '#1b2786',
48-
light: '#4682b4',
49-
dark: '#111955',
50-
contrastText: '#ffffff',
51-
},
52-
secondary: {
53-
main: '#54b198',
54-
light: '#a0ebd8',
55-
dark: '#1f6552',
56-
contrastText: '#ffffff',
57-
},
58-
error: {
59-
main: '#f44336',
60-
light: '#e57373',
61-
dark: '#d32f2f',
62-
contrastText: '#ffffff',
63-
},
64-
text: {
65-
primary: 'rgba(0, 0, 0, 0.7)',
66-
secondary: 'rgba(0, 0, 0, 0.54)',
67-
disabled: 'rgba(0, 0, 0, 0.38)',
68-
},
69-
},
70-
typography: {
71-
body1: { fontSize: '1rem' },
72-
body2: { fontSize: '0.875rem' },
73-
h1: { fontSize: '1.7rem' },
74-
h2: { fontSize: '1.5rem' },
75-
h3: { fontSize: '1.4rem' },
76-
h4: { fontSize: '1.25rem' },
77-
h5: { fontSize: '1.1rem' },
78-
h6: { fontSize: '0.875rem' },
79-
subtitle1: { fontSize: '0.875rem' },
80-
},
81-
});
82-
8312
/**
8413
* Entry point to application. Handles routing, app theme, and logged in state.
8514
*/
8615
function App() {
8716
return (
88-
<CacheProvider value={cache}>
89-
<CssBaseline />
90-
<ThemeProvider theme={theme}>
91-
<QueryClientProvider client={api.queryClient}>
92-
<SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
93-
<BrowserRouter basename={window._env_.PUBLIC_PATH}>
94-
<AuthProvider>
95-
<MainView />
96-
</AuthProvider>
97-
</BrowserRouter>
98-
</SnackbarProvider>
99-
</QueryClientProvider>
100-
</ThemeProvider>
101-
</CacheProvider>
17+
<ThemeProvider>
18+
<QueryClientProvider client={api.queryClient}>
19+
<SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
20+
<BrowserRouter basename={window._env_.PUBLIC_PATH}>
21+
<AuthProvider>
22+
<MainView />
23+
</AuthProvider>
24+
</BrowserRouter>
25+
</SnackbarProvider>
26+
</QueryClientProvider>
27+
</ThemeProvider>
10228
);
10329
}
10430

‎src/theme.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import createCache from '@emotion/cache';
2+
import { CacheProvider } from '@emotion/react';
3+
import { CssBaseline } from '@mui/material';
4+
import { createTheme, ThemeProvider } from '@mui/material/styles';
5+
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';
6+
import React, { ReactNode } from 'react';
7+
8+
ModuleRegistry.registerModules([AllCommunityModule]);
9+
10+
const cache = createCache({
11+
key: 'css',
12+
prepend: true,
13+
});
14+
15+
const theme = createTheme({
16+
direction: 'ltr',
17+
components: {
18+
MuiButton: { defaultProps: { size: 'small' } },
19+
MuiChip: { defaultProps: { size: 'small' } },
20+
MuiFab: { defaultProps: { size: 'small' } },
21+
MuiFilledInput: { defaultProps: { margin: 'dense' } },
22+
MuiFormControl: { defaultProps: { margin: 'none' } },
23+
MuiFormHelperText: { defaultProps: { margin: 'dense' } },
24+
MuiIconButton: { defaultProps: { size: 'small' } },
25+
MuiInputLabel: { defaultProps: { margin: 'dense' } },
26+
MuiListItem: { defaultProps: { dense: true } },
27+
MuiOutlinedInput: { defaultProps: { margin: 'dense' } },
28+
MuiSvgIcon: { defaultProps: { fontSize: 'small' } },
29+
MuiTable: { defaultProps: { size: 'small' } },
30+
MuiTextField: { defaultProps: { variant: 'standard' } },
31+
MuiToggleButton: { defaultProps: { size: 'small' } },
32+
MuiToggleButtonGroup: { defaultProps: { size: 'small' } },
33+
MuiToolbar: { defaultProps: { variant: 'dense' } },
34+
},
35+
mixins: {},
36+
palette: {
37+
mode: 'light',
38+
primary: {
39+
main: '#1b2786',
40+
light: '#4682b4',
41+
dark: '#111955',
42+
contrastText: '#ffffff',
43+
},
44+
secondary: {
45+
main: '#54b198',
46+
light: '#a0ebd8',
47+
dark: '#1f6552',
48+
contrastText: '#ffffff',
49+
},
50+
error: {
51+
main: '#f44336',
52+
light: '#e57373',
53+
dark: '#d32f2f',
54+
contrastText: '#ffffff',
55+
},
56+
text: {
57+
primary: 'rgba(0, 0, 0, 0.7)',
58+
secondary: 'rgba(0, 0, 0, 0.54)',
59+
disabled: 'rgba(0, 0, 0, 0.38)',
60+
},
61+
},
62+
typography: {
63+
body1: { fontSize: '1rem' },
64+
body2: { fontSize: '0.875rem' },
65+
h1: { fontSize: '1.7rem' },
66+
h2: { fontSize: '1.5rem' },
67+
h3: { fontSize: '1.4rem' },
68+
h4: { fontSize: '1.25rem' },
69+
h5: { fontSize: '1.1rem' },
70+
h6: { fontSize: '0.875rem' },
71+
subtitle1: { fontSize: '0.875rem' },
72+
},
73+
});
74+
75+
export default function GkbThemeProvider({ children }: { children: ReactNode }) {
76+
return (
77+
<CacheProvider value={cache}>
78+
<CssBaseline />
79+
<ThemeProvider theme={theme}>
80+
{children}
81+
</ThemeProvider>
82+
</CacheProvider>
83+
);
84+
}

0 commit comments

Comments
 (0)