feat: apply conditional mation styling

packages/web/src/components/CustomLogo/style.ee.ts

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 
 export const LogoImage = styled('img')(() => ({
   maxWidth: 200,
-  maxHeight: 50,
+  maxHeight: 22,
   width: '100%',
   height: 'auto',
 }));

packages/web/src/components/ThemeProvider/index.tsx

@@ -7,19 +7,20 @@ import * as React from 'react';
 
 import { IJSONObject } from '@automatisch/types';
 import useConfig from 'hooks/useConfig';
-import theme from 'styles/theme';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
+import { defaultTheme, mationTheme } from 'styles/theme';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
 };
 
-const customizeTheme = (defaultTheme: typeof theme, config: IJSONObject) => {
+const customizeTheme = (theme: typeof defaultTheme, config: IJSONObject) => {
   // `clone` is needed so that the new theme reference triggers re-render
-  const shallowDefaultTheme = clone(defaultTheme);
+  const shallowDefaultTheme = clone(theme);
 
   for (const key in config) {
     const value = config[key];
-    const exists = get(defaultTheme, key);
+    const exists = get(theme, key);
 
     if (exists) {
       set(shallowDefaultTheme, key, value);
@@ -33,18 +34,21 @@ const ThemeProvider = ({
   children,
   ...props
 }: ThemeProviderProps): React.ReactElement => {
-  const { config, loading } = useConfig();
+  const { isMation, loading: automatischInfoLoading } = useAutomatischInfo();
+  const { config, loading: configLoading } = useConfig();
 
   const customTheme = React.useMemo(() => {
-    if (!config) return theme;
+    const installationTheme = isMation ? mationTheme : defaultTheme;
 
-    const customTheme = customizeTheme(theme, config);
+    if (configLoading || automatischInfoLoading) return installationTheme;
+
+    const customTheme = customizeTheme(installationTheme, config || {});
 
     return customTheme;
-  }, [config]);
+  }, [configLoading, config, isMation, automatischInfoLoading]);
 
   // TODO: maybe a global loading state for the custom theme?
-  if (loading) return <></>;
+  if (automatischInfoLoading || configLoading) return <></>;
 
   return (
     <BaseThemeProvider theme={customTheme} {...props}>

packages/web/src/contexts/AutomatischInfo.tsx

@@ -5,11 +5,15 @@ import { GET_AUTOMATISCH_INFO } from 'graphql/queries/get-automatisch-info';
 
 export type AutomatischInfoContextParams = {
   isCloud: boolean;
+  isMation: boolean;
+  loading: boolean;
 };
 
 export const AutomatischInfoContext =
   React.createContext<AutomatischInfoContextParams>({
     isCloud: false,
+    isMation: false,
+    loading: true,
   });
 
 type AutomatischInfoProviderProps = {
@@ -23,13 +27,15 @@ export const AutomatischInfoProvider = (
   const { data, loading } = useQuery(GET_AUTOMATISCH_INFO);
 
   const isCloud = data?.getAutomatischInfo?.isCloud;
+  const isMation = data?.getAutomatischInfo?.isMation;
 
   const value = React.useMemo(() => {
     return {
       isCloud,
-      loading
+      isMation,
+      loading,
     };
-  }, [isCloud, loading]);
+  }, [isCloud, isMation, loading]);
 
   return (
     <AutomatischInfoContext.Provider value={value}>

packages/web/src/hooks/useAutomatischInfo.ts

@@ -3,6 +3,8 @@ import { AutomatischInfoContext } from 'contexts/AutomatischInfo';
 
 type UseAutomatischInfoReturn = {
   isCloud: boolean;
+  isMation: boolean;
+  loading: boolean;
 };
 
 export default function useAutomatischInfo(): UseAutomatischInfoReturn {
@@ -10,5 +12,7 @@ export default function useAutomatischInfo(): UseAutomatischInfoReturn {
 
   return {
     isCloud: automatischInfoContext.isCloud,
+    isMation: automatischInfoContext.isMation,
+    loading: automatischInfoContext.loading,
   };
 }

packages/web/src/styles/theme.ts

@@ -1,3 +1,5 @@
+import { deepmerge } from '@mui/utils';
+import type { Theme } from '@mui/material/styles';
 import { createTheme, alpha } from '@mui/material/styles';
 import { cardActionAreaClasses } from '@mui/material/CardActionArea';
 
@@ -6,7 +8,7 @@ export const primaryMainColor = '#0059F7';
 export const primaryLightColor = '#4286FF';
 export const primaryDarkColor = '#001F52';
 
-const extendedTheme = createTheme({
+export const defaultTheme = createTheme({
   palette: {
     primary: {
       main: primaryMainColor,
@@ -280,4 +282,24 @@ const extendedTheme = createTheme({
   },
 });
 
-export default extendedTheme;
+export const mationTheme = createTheme(deepmerge(defaultTheme, {
+  palette: {
+    primary: {
+      main: '#2962FF',
+      light: '#448AFF',
+      dark: '#2962FF',
+      contrastText: '#fff',
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: ({ theme }: { theme: Theme }) => ({
+          zIndex: theme.zIndex.drawer + 1,
+        }),
+      },
+    },
+  },
+}));
+
+export default defaultTheme;