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/DefaultLogo/index.tsx b/packages/web/src/components/DefaultLogo/index.tsx
new file mode 100644
index 00000000..8c989fc3
--- /dev/null
+++ b/packages/web/src/components/DefaultLogo/index.tsx
@@ -0,0 +1,22 @@
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import MationLogo from 'components/MationLogo';
+import useAutomatischInfo from 'hooks/useAutomatischInfo';
+
+const DefaultLogo = () => {
+ const { isMation, loading } = useAutomatischInfo();
+
+ if (loading) return ;
+
+ if (isMation) return ;
+
+ return (
+
+
+
+ );
+};
+
+export default DefaultLogo;
diff --git a/packages/web/src/components/Logo/index.tsx b/packages/web/src/components/Logo/index.tsx
index a6c36259..441fb5ee 100644
--- a/packages/web/src/components/Logo/index.tsx
+++ b/packages/web/src/components/Logo/index.tsx
@@ -1,8 +1,7 @@
-import Typography from '@mui/material/Typography';
import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
import CustomLogo from 'components/CustomLogo/index.ee';
+import DefaultLogo from 'components/DefaultLogo';
import useConfig from 'hooks/useConfig';
const Logo = () => {
@@ -13,11 +12,7 @@ const Logo = () => {
if (logoSvgData) return ;
- return (
-
-
-
- );
+ return ;
};
export default Logo;
diff --git a/packages/web/src/components/MationLogo/assets/mation-logo.svg b/packages/web/src/components/MationLogo/assets/mation-logo.svg
new file mode 100644
index 00000000..37b70a51
--- /dev/null
+++ b/packages/web/src/components/MationLogo/assets/mation-logo.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/web/src/components/MationLogo/index.tsx b/packages/web/src/components/MationLogo/index.tsx
new file mode 100644
index 00000000..c83b91a6
--- /dev/null
+++ b/packages/web/src/components/MationLogo/index.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ReactComponent as MationLogoSvg } from './assets/mation-logo.svg';
+
+const MationLogo = () => {
+ return ;
+};
+
+export default MationLogo;
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;