From 78ba18b176b56df3eeb90e0299e3fb25f36390c3 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Thu, 14 Dec 2023 14:28:07 +0000 Subject: [PATCH] feat: apply conditional mation styling --- .../web/src/components/CustomLogo/style.ee.ts | 2 +- .../src/components/ThemeProvider/index.tsx | 22 +++++++++------- packages/web/src/contexts/AutomatischInfo.tsx | 10 +++++-- packages/web/src/hooks/useAutomatischInfo.ts | 4 +++ packages/web/src/styles/theme.ts | 26 +++++++++++++++++-- 5 files changed, 50 insertions(+), 14 deletions(-) diff --git a/packages/web/src/components/CustomLogo/style.ee.ts b/packages/web/src/components/CustomLogo/style.ee.ts index a7e8fadf..51f6e131 100644 --- a/packages/web/src/components/CustomLogo/style.ee.ts +++ b/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', })); diff --git a/packages/web/src/components/ThemeProvider/index.tsx b/packages/web/src/components/ThemeProvider/index.tsx index daa5c584..d130e83f 100644 --- a/packages/web/src/components/ThemeProvider/index.tsx +++ b/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 ( diff --git a/packages/web/src/contexts/AutomatischInfo.tsx b/packages/web/src/contexts/AutomatischInfo.tsx index d6647635..7269bdf3 100644 --- a/packages/web/src/contexts/AutomatischInfo.tsx +++ b/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({ 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 ( diff --git a/packages/web/src/hooks/useAutomatischInfo.ts b/packages/web/src/hooks/useAutomatischInfo.ts index 8c33f38b..483f98ac 100644 --- a/packages/web/src/hooks/useAutomatischInfo.ts +++ b/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, }; } diff --git a/packages/web/src/styles/theme.ts b/packages/web/src/styles/theme.ts index d272b29e..a82c4397 100644 --- a/packages/web/src/styles/theme.ts +++ b/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;