WIP

alchemy-fr · Dec 14, 2023 · 5a3c73c · 5a3c73c
1 parent bff5abd
commit 5a3c73c
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 48 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -73,8 +73,11 @@ jobs:
     uses: ./.github/workflows/build.yaml
     with:
       image: dashboard
-      context: ./dashboard
+      context: ./dashboard/client
+      withLibs: true
     secrets: inherit
+    needs:
+      - build_nodejs-base
 
   build_databox_api:
     name: 'Build Databox API'

diff --git a/dashboard/client/src/Root.tsx b/dashboard/client/src/Root.tsx
@@ -1,4 +1,4 @@
-import {Alert, Chip, Container, Grid, Typography} from '@mui/material';
+import {Alert, Chip, Container, Grid, Typography, useMediaQuery, useTheme} from '@mui/material';
 import Service from './Service';
 import ClientApp from './ClientApp.tsx';
 import config from './config.ts';
@@ -22,11 +22,14 @@ export default function Root({}: Props) {
         STACK_VERSION,
     } = config.env;
 
-    console.log('config.env', config.env);
+    console.debug('config.env', config.env);
+
+    const theme = useTheme();
+    const isLarge = useMediaQuery(theme.breakpoints.up('sm'));
 
     return (
         <Container>
-            <Typography
+            {isLarge && <Typography
                 variant={'h1'}
                 sx={{
                     '.MuiChip-root': {
@@ -40,9 +43,9 @@ export default function Root({}: Props) {
                     icon={<SellIcon/>}
                     label={STACK_VERSION}
                 />
-            </Typography>
+            </Typography>}
 
-            {DEV_MODE && <Alert
+            {isLarge && DEV_MODE && <Alert
                 sx={{
                     mt: 2,
                 }}

diff --git a/dashboard/client/src/Service.tsx b/dashboard/client/src/Service.tsx
@@ -40,13 +40,21 @@ export default function Service({
         <Grid item xs={6} sm={4} md={3}>
             <Card
                 sx={{
-                    minHeight: 280,
+                    minHeight: {
+                        xs: 180,
+                        sm: 200,
+                        md: 300,
+                    },
                 }}
             >
                 <AnchorLink href={mainUrl}>
                     <CardMedia
                         sx={theme => ({
-                            height: 140,
+                            height: {
+                                xs: 60,
+                                sm: 80,
+                                md: 140,
+                            },
                             backgroundSize: 'contain',
                             backgroundColor: theme.palette.background.default,
                         })}
@@ -56,12 +64,20 @@ export default function Service({
                 </AnchorLink>
                 <CardContent>
                     <AnchorLink href={mainUrl}>
-                        <Typography gutterBottom variant="h5" component="div">
+                        <Typography gutterBottom variant="h2">
                             {title}
                         </Typography>
                     </AnchorLink>
                     {description && (
-                        <Typography variant="body2" color="text.secondary">
+                        <Typography
+                            variant="body2"
+                            sx={{
+                                display: {
+                                    xs: 'none',
+                                    md: 'block',
+                                }
+                            }}
+                        >
                             {description}
                         </Typography>
                     )}

diff --git a/dashboard/client/src/index.tsx b/dashboard/client/src/index.tsx
@@ -1,46 +1,17 @@
 import ReactDOM from 'react-dom/client';
 import Root from './Root.tsx';
 import React from 'react';
-import {CssBaseline, GlobalStyles, ThemeOptions} from '@mui/material';
+import {CssBaseline, GlobalStyles, responsiveFontSizes} from '@mui/material';
 import {ThemeEditorProvider} from '@alchemy/theme-editor';
-
-const theme: ThemeOptions = {
-    typography: {
-        fontFamily: "'Montserrat', sans-serif",
-        h1: {
-            fontSize: 42,
-            fontWeight: 600,
-        },
-        h2: {
-            fontSize: 19,
-            fontWeight: 600,
-        },
-        h5: {
-            fontSize: 19,
-        },
-    },
-    palette: {
-        primary: {
-            main: '#003249',
-            contrastText: '#e7eaea',
-        },
-        secondary: {
-            main: '#007EA7',
-        },
-        common: {
-            white: '#e7eaea',
-        },
-        background: {
-            default: '#85dbff',
-        },
-    },
-};
-
-const scrollbarWidth = 3;
+import {scrollbarWidth, theme} from "./theme.ts";
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-        <ThemeEditorProvider defaultTheme={theme}>
+        <ThemeEditorProvider
+            defaultTheme={theme}
+            transformTheme={(theme) => responsiveFontSizes(theme, {
+            })}
+        >
             <CssBaseline />
             <GlobalStyles
                 styles={theme => ({

diff --git a/dashboard/client/src/theme.ts b/dashboard/client/src/theme.ts
@@ -0,0 +1,32 @@
+import {ThemeOptions} from "@mui/material";
+
+export const theme: ThemeOptions = {
+    typography: {
+        fontFamily: "'Montserrat', sans-serif",
+        h1: {
+            fontSize: '3rem',
+            fontWeight: 600,
+        },
+        h2: {
+            fontWeight: 600,
+            fontSize: '1.2rem',
+        },
+    },
+    palette: {
+        primary: {
+            main: '#003249',
+            contrastText: '#e7eaea',
+        },
+        secondary: {
+            main: '#007EA7',
+        },
+        common: {
+            white: '#e7eaea',
+        },
+        background: {
+            default: '#85dbff',
+        },
+    },
+};
+
+export const scrollbarWidth = 3;
diff --git a/lib/js/theme-editor/src/ThemeEditorProvider.tsx b/lib/js/theme-editor/src/ThemeEditorProvider.tsx
@@ -1,15 +1,17 @@
 import React, {PropsWithChildren} from 'react';
 import ThemeEditorContext from "./ThemeEditorContext";
-import {createTheme, ThemeOptions, ThemeProvider} from "@mui/material";
+import {createTheme, Theme, ThemeOptions, ThemeProvider} from "@mui/material";
 import {TThemeEditorContext} from "./types";
 import {mergeDeep} from "./merge";
 
 type Props = PropsWithChildren<{
     defaultTheme: ThemeOptions;
+    transformTheme?: (theme: Theme) => Theme;
 }>;
 
 export default function ThemeEditorProvider({
     defaultTheme,
+    transformTheme,
     children
 }: Props) {
     const [themeOptions, setThemeOptions] = React.useState<ThemeOptions>({});
@@ -20,7 +22,7 @@ export default function ThemeEditorProvider({
         );
 
         return {
-            theme,
+            theme : transformTheme ? transformTheme(theme) : theme,
             themeOptions,
             setThemeOptions: (options) => setThemeOptions(options),
         }