redglow/game_logger
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: cleanup

Browse Source
This commit is contained in:
mattia
2025-07-08 22:17:17 +02:00
parent 02853db155
commit c340a3a8f4
5 changed files with 31 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/v1/Template/dashboard/Dashboard.tsx
View File

@@ -11,7 +11,6 @@ import SideMenu from "./components/SideMenu";
import AppTheme from "../shared-theme/AppTheme";
import {
chartsCustomizations,
dataGridCustomizations,
datePickersCustomizations,
treeViewCustomizations,
} from "./theme/customizations";
@@ -19,7 +18,6 @@ import { Outlet } from "react-router";
const xThemeComponents = {
...chartsCustomizations,
...dataGridCustomizations,
...datePickersCustomizations,
...treeViewCustomizations,
};

132
src/client/v1/Template/dashboard/theme/customizations/dataGrid.ts
View File

@@ -1,132 +0,0 @@
import { paperClasses } from '@mui/material/Paper';
import { alpha, Theme } from '@mui/material/styles';
import type { DataGridProComponents } from '@mui/x-data-grid-pro/themeAugmentation';
import { menuItemClasses } from '@mui/material/MenuItem';
import { listItemIconClasses } from '@mui/material/ListItemIcon';
import { iconButtonClasses } from '@mui/material/IconButton';
import { checkboxClasses } from '@mui/material/Checkbox';
import { listClasses } from '@mui/material/List';
import { gridClasses } from '@mui/x-data-grid';
import { tablePaginationClasses } from '@mui/material/TablePagination';
import { gray } from '../../../shared-theme/themePrimitives';
/* eslint-disable import/prefer-default-export */
export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridProComponents<Theme> = {
MuiDataGrid: {
styleOverrides: {
root: ({ theme }) => ({
'--DataGrid-overlayHeight': '300px',
overflow: 'clip',
borderColor: (theme.vars || theme).palette.divider,
backgroundColor: (theme.vars || theme).palette.background.default,
[`& .${gridClasses.columnHeader}`]: {
backgroundColor: (theme.vars || theme).palette.background.paper,
},
[`& .${gridClasses.footerContainer}`]: {
backgroundColor: (theme.vars || theme).palette.background.paper,
},
[`& .${checkboxClasses.root}`]: {
padding: theme.spacing(0.5),
'& > svg': {
fontSize: '1rem',
},
},
[`& .${tablePaginationClasses.root}`]: {
marginRight: theme.spacing(1),
'& .MuiIconButton-root': {
maxHeight: 32,
maxWidth: 32,
'& > svg': {
fontSize: '1rem',
},
},
},
}),
cell: ({ theme }) => ({ borderTopColor: (theme.vars || theme).palette.divider }),
menu: ({ theme }) => ({
borderRadius: theme.shape.borderRadius,
backgroundImage: 'none',
[`& .${paperClasses.root}`]: {
border: `1px solid ${(theme.vars || theme).palette.divider}`,
},
[`& .${menuItemClasses.root}`]: {
margin: '0 4px',
},
[`& .${listItemIconClasses.root}`]: {
marginRight: 0,
},
[`& .${listClasses.root}`]: {
paddingLeft: 0,
paddingRight: 0,
},
}),
row: ({ theme }) => ({
'&:last-of-type': { borderBottom: `1px solid ${(theme.vars || theme).palette.divider}` },
'&:hover': {
backgroundColor: (theme.vars || theme).palette.action.hover,
},
'&.Mui-selected': {
background: (theme.vars || theme).palette.action.selected,
'&:hover': {
backgroundColor: (theme.vars || theme).palette.action.hover,
},
},
}),
iconButtonContainer: ({ theme }) => ({
[`& .${iconButtonClasses.root}`]: {
border: 'none',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: alpha(theme.palette.action.selected, 0.3),
},
'&:active': {
backgroundColor: gray[200],
},
...theme.applyStyles('dark', {
color: gray[50],
'&:hover': {
backgroundColor: gray[800],
},
'&:active': {
backgroundColor: gray[900],
},
}),
},
}),
menuIconButton: ({ theme }) => ({
border: 'none',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: gray[100],
},
'&:active': {
backgroundColor: gray[200],
},
...theme.applyStyles('dark', {
color: gray[50],
'&:hover': {
backgroundColor: gray[800],
},
'&:active': {
backgroundColor: gray[900],
},
}),
}),
filterForm: ({ theme }) => ({
gap: theme.spacing(1),
alignItems: 'flex-end',
}),
columnsManagementHeader: ({ theme }) => ({
paddingRight: theme.spacing(3),
paddingLeft: theme.spacing(3),
}),
columnHeaderTitleContainer: {
flexGrow: 1,
justifyContent: 'space-between',
},
columnHeaderDraggableContainer: { paddingRight: 2 },
},
},
};

3
src/client/v1/Template/dashboard/theme/customizations/datePickers.ts
View File

@@ -1,12 +1,11 @@
import { alpha, Theme } from '@mui/material/styles';
import type { PickersProComponents } from '@mui/x-date-pickers-pro/themeAugmentation';
import type { PickerComponents } from '@mui/x-date-pickers/themeAugmentation';
import { menuItemClasses } from '@mui/material/MenuItem';
import { pickersDayClasses, yearCalendarClasses } from '@mui/x-date-pickers';
import { gray, brand } from '../../../shared-theme/themePrimitives';
/* eslint-disable import/prefer-default-export */
export const datePickersCustomizations: PickersProComponents<Theme> & PickerComponents<Theme> = {
export const datePickersCustomizations: PickerComponents<Theme> = {
MuiPickerPopper: {
styleOverrides: {
paper: ({ theme }) => ({

1
src/client/v1/Template/dashboard/theme/customizations/index.ts
View File

@@ -1,4 +1,3 @@
export { chartsCustomizations } from './charts';
export { dataGridCustomizations } from './dataGrid';
export { datePickersCustomizations } from './datePickers';
export { treeViewCustomizations } from './treeView';

69
src/client/v1/Template/shared-theme/AppTheme.tsx
View File

@@ -1,50 +1,41 @@
import * as React from "react";
import { ThemeProvider, createTheme } from '@mui/material/styles';
import type { ThemeOptions } from '@mui/material/styles';
import { inputsCustomizations } from './customizations/inputs';
import { dataDisplayCustomizations } from './customizations/dataDisplay';
import { feedbackCustomizations } from './customizations/feedback';
import { navigationCustomizations } from './customizations/navigation';
import { surfacesCustomizations } from './customizations/surfaces';
import { colorSchemes, typography, shadows, shape } from './themePrimitives';
import { ThemeProvider, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from "@mui/material/styles";
import { inputsCustomizations } from "./customizations/inputs";
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
import { feedbackCustomizations } from "./customizations/feedback";
import { navigationCustomizations } from "./customizations/navigation";
import { surfacesCustomizations } from "./customizations/surfaces";
import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
interface AppThemeProps {
children: React.ReactNode;
/**
* This is for the docs site. You can ignore it or remove it.
*/
disableCustomTheme?: boolean;
themeComponents?: ThemeOptions['components'];
themeComponents?: ThemeOptions["components"];
}
export default function AppTheme(props: AppThemeProps) {
const { children, disableCustomTheme, themeComponents } = props;
const { children, themeComponents } = props;
const theme = React.useMemo(() => {
return disableCustomTheme
? {}
: createTheme({
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
cssVariables: {
colorSchemeSelector: 'data-mui-color-scheme',
cssVarPrefix: 'template',
},
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
typography,
shadows,
shape,
components: {
...inputsCustomizations,
...dataDisplayCustomizations,
...feedbackCustomizations,
...navigationCustomizations,
...surfacesCustomizations,
...themeComponents,
},
});
}, [disableCustomTheme, themeComponents]);
if (disableCustomTheme) {
return <React.Fragment>{children}</React.Fragment>;
}
return createTheme({
// For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
cssVariables: {
colorSchemeSelector: "data-mui-color-scheme",
cssVarPrefix: "template",
},
colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
typography, // See https://mui.com/material-ui/customization/typography/
shadows, // See ???
shape, // See ???
components: {
...inputsCustomizations,
...dataDisplayCustomizations,
...feedbackCustomizations,
...navigationCustomizations,
...surfacesCustomizations,
...themeComponents,
},
});
}, [themeComponents]);
return (
<ThemeProvider theme={theme} disableTransitionOnChange>
{children}