remove @discretize/globals dependency

build/main.jsx

@@ -1,4 +1,3 @@
-import { globals } from '@discretize/globals';
 import '@discretize/gw2-ui-new/dist/default_style.css';
 import '@discretize/gw2-ui-new/dist/index.css';
 import '@discretize/react-discretize-components/dist/index.css';
@@ -7,6 +6,7 @@ import { CssBaseline, ThemeProvider } from '@mui/material';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+import { globals } from '../src/utils/globals';
 import IndexPage from '../src/pages/build/index';
 import store from '../src/state/store';
 import muiTheme from '../src/utils/placeholder-unused-theme';

package.json

@@ -49,7 +49,6 @@
     "[email protected]": "^0.29.0"
   },
   "dependencies": {
-    "@discretize/globals": "^0.0.4",
     "@discretize/gw2-ui-new": "^0.1.7",
     "@discretize/object-compression": "^1.0.3",
     "@discretize/react-discretize-components": "^3.0.3",

src/pages/build/index.jsx

@@ -1,8 +1,8 @@
-import { Layout } from '@discretize/globals';
 import { APILanguageProvider } from '@discretize/gw2-ui-new';
 import { Box, Chip, Typography } from '@mui/material';
 import { Trans, useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { Layout } from '../../utils/globals';
 import BuildPage from '../../components/BuildPage';
 import BackgroundImage from '../../components/baseComponents/BackgroundImage';
 import ErrorBoundary from '../../components/baseComponents/ErrorBoundary';

src/pages/index/main.jsx

@@ -1,4 +1,3 @@
-import { globals } from '@discretize/globals';
 import '@discretize/gw2-ui-new/dist/default_style.css';
 import '@discretize/gw2-ui-new/dist/index.css';
 import '@discretize/react-discretize-components/dist/index.css';
@@ -8,6 +7,7 @@ import { CssBaseline, ThemeProvider } from '@mui/material';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
+import { globals } from '../../utils/globals';
 import 'typeface-fira-mono';
 import 'typeface-muli';
 import 'typeface-raleway';

src/utils/globals/index.ts

@@ -0,0 +1,4 @@
+import globals from './styles/globals';
+import Layout from './styles/Layout';
+
+export { globals, Layout };

src/utils/globals/styles/Layout.jsx

@@ -0,0 +1,23 @@
+import { Box, Container, useMediaQuery, useTheme } from '@mui/material';
+
+const Layout = ({ children, ContainerProps, disableContainer = false }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
+  return (
+    (!disableContainer && !isMobile && (
+      <Container maxWidth="lg" {...ContainerProps}>
+        <Box
+          sx={{
+            padding: 2,
+            backgroundColor: 'background.default',
+            boxShadow: 5,
+          }}
+        >
+          {children}
+        </Box>
+      </Container>
+    )) || <Box sx={{ p: 2 }}>{children}</Box>
+  );
+};
+
+export default Layout;

src/utils/globals/styles/globals.js

@@ -0,0 +1,83 @@
+import theme from './muiTheme';
+
+export default {
+  body: {
+    cursor: `url('/images/cursors/default.png'), default`,
+  },
+  'a, button, input, .MuiMenuItem-root, .MuiInput-root, .MuiSelect-root, .MuiFormControlLabel-label, .MuiButtonBase-root, .noUi-handle, .MuiSlider-root, .MuiChip-root, .MuiSvgIcon-root, .MuiAutocomplete-option':
+    {
+      cursor: `url('/images/cursors/green.png'), pointer !important`,
+    },
+
+  '::selection': {
+    backgroundColor: theme.palette.primary.dark,
+    color: theme.palette.common.white,
+  },
+
+  'code, pre, samp': {
+    fontFamily: 'Fira Mono',
+    lineHeight: 1,
+    fontSize: '0.875rem',
+  },
+
+  'code, samp': {
+    color: theme.palette.common.white,
+    backgroundColor: theme.palette.background.embossed,
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: theme.shadows[1],
+  },
+
+  pre: {
+    margin: `0 ${theme.spacing(2)} ${theme.spacing(2)}`,
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      marginRight: theme.spacing(3),
+    },
+    whiteSpace: 'pre',
+    '& > code': {
+      padding: theme.spacing(2),
+      display: 'block',
+      width: '100%',
+      boxShadow: theme.shadows[2],
+      wordWrap: 'normal',
+      wordBreak: 'normal',
+      whiteSpace: 'pre',
+      overflowX: 'auto',
+    },
+  },
+
+  blockquote: {
+    borderLeft: `2px solid ${theme.palette.primary.main}`,
+    padding: theme.spacing(2),
+    margin: `${theme.spacing(2)} ${theme.spacing(2)}`,
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(3),
+      marginRight: theme.spacing(3),
+    },
+  },
+
+  '::-webkit-scrollbar': {
+    width: theme.spacing(1),
+    height: theme.spacing(1),
+  },
+  '::-webkit-scrollbar-track': {
+    background: '#1e2124',
+  },
+  '::-webkit-scrollbar-thumb': {
+    background: '#484b51',
+    borderRadius: theme.shape.borderRadius,
+  },
+  '::-webkit-scrollbar-thumb:hover': {
+    background: '#b1b1b5',
+  },
+  '::-webkit-scrollbar-corner': {
+    background: '#1e2124',
+  },
+
+  '#nprogress .bar': {
+    zIndex: 1501,
+    height: 3,
+  },
+};

src/utils/globals/styles/muiTheme.jsx

@@ -0,0 +1,241 @@
+import { Paper } from '@mui/material';
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#00cccc',
+      light: '#64ffff',
+      dark: '#009a9b',
+    },
+    secondary: {
+      main: '#ff6e40',
+      light: '#FF8B66',
+      dark: '#B24D2C',
+    },
+    embossed: '#2a2c31',
+
+    background: {
+      default: '#2f3136',
+      paper: '#26292e',
+    },
+    text: {
+      primary: '#ddd',
+      secondary: '#b1b1b5',
+    },
+    divider: '#1e2124',
+    star: '#FFDF00',
+  },
+  typography: {
+    fontFamily: 'Muli',
+    fontSize: 16,
+    h1: {
+      fontFamily: 'Raleway',
+    },
+    h2: {
+      fontFamily: 'Raleway',
+    },
+    h3: {
+      fontFamily: 'Raleway',
+    },
+    h4: {
+      fontFamily: 'Raleway',
+    },
+    h5: {
+      fontFamily: 'Raleway',
+    },
+    h6: {
+      fontFamily: 'Raleway',
+    },
+  },
+});
+export default createTheme(theme, {
+  components: {
+    MuiSvgIcon: {
+      styleOverrides: {
+        root: {
+          marginBottom: '-2px !important',
+        },
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          marginBottom: theme.spacing(2),
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          [theme.breakpoints.down('md')]: {
+            display: 'block',
+            width: 'auto',
+          },
+        },
+      },
+    },
+    MuiTableBody: {
+      styleOverrides: {
+        root: {
+          [theme.breakpoints.down('md')]: {
+            display: 'block',
+            width: 'auto',
+          },
+          '&> tr:last-child': {
+            '&> th, td': {
+              borderBottom: 'none',
+            },
+          },
+        },
+      },
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          [theme.breakpoints.down('md')]: {
+            paddingTop: theme.spacing(1),
+            paddingBottom: theme.spacing(1),
+            display: 'block',
+            width: 'auto',
+            height: 'auto',
+            '&:not(:last-child)': {
+              borderBottom: `1px solid ${theme.palette.divider}`,
+            },
+          },
+        },
+        head: {
+          [theme.breakpoints.down('md')]: {
+            height: 'auto',
+            borderBottom: `1px solid ${theme.palette.divider}`,
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${theme.palette.divider}`,
+          [theme.breakpoints.down('md')]: {
+            display: 'block',
+            width: 'auto',
+            borderBottom: 'none',
+            padding: '4px 24px 4px 24px',
+          },
+          'th&': {
+            fontWeight: 700,
+          },
+          '& > *:last-child': {
+            marginBottom: 0,
+          },
+        },
+        head: {
+          fontSize: '0.8571428571428571rem',
+          color: theme.palette.text.secondary,
+          lineHeight: 'inherit',
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        contained: {
+          fontWeight: 600,
+          transition: theme.transitions.create(
+            ['background-color', 'box-shadow', 'border', 'color'],
+            {
+              duration: theme.transitions.duration.short,
+            },
+          ),
+          '&:hover': {
+            color: 'white !important',
+          },
+        },
+      },
+    },
+    MuiButtonBase: { defaultProps: { disableRipple: true } },
+    MuiGridList: {
+      styleOverrides: {
+        root: {
+          overflowY: 'initial',
+        },
+      },
+    },
+    MuiGridListTile: {
+      styleOverrides: {
+        tile: {
+          overflow: 'initial',
+        },
+      },
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          '& > hr': {
+            marginBottom: 0,
+          },
+        },
+      },
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          paddingTop: '11px',
+          paddingBottom: '11px',
+          '& > *:first-child': {
+            paddingLeft: 0,
+          },
+        },
+        dense: {
+          paddingTop: '8px',
+          paddingBottom: '8px',
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          marginTop: 0,
+          marginBottom: 0,
+          padding: '0 16px',
+        },
+      },
+    },
+    MuiAccordion: {
+      styleOverrides: {
+        root: { background: theme.palette.background.paper },
+      },
+    },
+    MuiMenu: {
+      defaultProps: {
+        elevation: 0,
+      },
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0,
+      },
+      styleOverrides: {
+        root: {
+          boxShadow: theme.shadows[1],
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          marginBottom: theme.spacing(2),
+        },
+      },
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        PaperComponent: ({ children }) => (
+          <Paper elevation={3} sx={{ background: theme.palette.background.paper }}>
+            {children}
+          </Paper>
+        ),
+      },
+    },
+  },
+});