chore(deps): Remove @discretize/globals dependency (#849)

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;