Move modern to the top

4 files changed, 87 insertions, 0 deletions

diff --git a/src/common/theme/components.js b/src/common/theme/components.js
new file mode 100644
index 00000000..56a2ac75
--- /dev/null
+++ b/src/common/theme/components.js
@@ -0,0 +1,40 @@
+export default {
+  MuiUseMediaQuery: {
+    defaultProps: {
+      noSsr: true,
+    },
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        backgroundColor: theme.palette.background.default,
+      }),
+    },
+  },
+  MuiButton: {
+    styleOverrides: {
+      sizeMedium: {
+        height: '40px',
+      },
+    },
+  },
+  MuiFormControl: {
+    defaultProps: {
+      size: 'small',
+    },
+  },
+  MuiSnackbar: {
+    defaultProps: {
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'center',
+      },
+    },
+  },
+  MuiTooltip: {
+    defaultProps: {
+      enterDelay: 500,
+      enterNextDelay: 500,
+    },
+  },
+};
diff --git a/src/common/theme/dimensions.js b/src/common/theme/dimensions.js
new file mode 100644
index 00000000..4930803a
--- /dev/null
+++ b/src/common/theme/dimensions.js
@@ -0,0 +1,14 @@
+export default {
+  sidebarWidth: '28%',
+  sidebarWidthTablet: '52px',
+  drawerWidthDesktop: '360px',
+  drawerWidthTablet: '320px',
+  drawerHeightPhone: '250px',
+  filterFormWidth: '160px',
+  eventsDrawerWidth: '320px',
+  bottomBarHeight: 56,
+  popupMapOffset: 300,
+  popupMaxWidth: 288,
+  popupImageHeight: 144,
+  cardContentMaxHeight: '40vh',
+};
diff --git a/src/common/theme/index.js b/src/common/theme/index.js
new file mode 100644
index 00000000..e8ce698b
--- /dev/null
+++ b/src/common/theme/index.js
@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { createTheme } from '@mui/material/styles';
+import palette from './palette';
+import dimensions from './dimensions';
+import components from './components';
+
+export default (server, darkMode) => useMemo(() => createTheme({
+  palette: palette(server, darkMode),
+  dimensions,
+  components,
+}), [server, darkMode]);
diff --git a/src/common/theme/palette.js b/src/common/theme/palette.js
new file mode 100644
index 00000000..f32ed93e
--- /dev/null
+++ b/src/common/theme/palette.js
@@ -0,0 +1,22 @@
+import { grey, green, indigo } from '@mui/material/colors';
+
+const validatedColor = (color) => (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color) ? color : null);
+
+export default (server, darkMode) => ({
+  mode: darkMode ? 'dark' : 'light',
+  background: {
+    default: darkMode ? grey[900] : grey[50],
+  },
+  primary: {
+    main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
+  },
+  secondary: {
+    main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
+  },
+  neutral: {
+    main: grey[500],
+  },
+  geometry: {
+    main: '#3bb2d0',
+  },
+});