Skip to content

Commit 579940e

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #3080 from sniok/custom-themes
frontend: Custom App themes
2 parents 8381a27 + 91b3fd1 commit 579940e

File tree

309 files changed

+6924
-6573
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

309 files changed

+6924
-6573
lines changed

‎frontend/.storybook/preview.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import themesConf from '../src/lib/themes';
21
import { ThemeProvider } from '@mui/material/styles';
32
import { initialize, mswLoader } from 'msw-storybook-addon';
43
import '../src/index.css';
54
import { Title, Subtitle, Description, Primary, Controls } from '@storybook/blocks';
65
import { baseMocks } from './baseMocks';
76
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
87
import App from '../src/App';
8+
import { darkTheme, lightTheme, useAppThemes } from '../src/components/App/themeSlice';
9+
import { createMuiTheme } from '../src/lib/themes';
910

1011
// App import will load the whole app dependency tree
1112
// And assigning it to a value will make sure it's not tree-shaken and removed
@@ -29,11 +30,11 @@ export const queryClient = new QueryClient({
2930
});
3031

3132
const withThemeProvider = (Story: any, context: any) => {
32-
const theme = themesConf[context.globals.backgrounds?.value === '#1f1f1f' ? 'dark' : 'light'];
33+
const theme = context.globals.backgrounds?.value === '#1f1f1f' ? darkTheme : lightTheme;
3334

3435
const ourThemeProvider = (
3536
<QueryClientProvider client={queryClient}>
36-
<ThemeProvider theme={theme}>
37+
<ThemeProvider theme={createMuiTheme(theme)}>
3738
<Story {...context} />
3839
</ThemeProvider>
3940
</QueryClientProvider>

‎frontend/src/App.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@ import './i18n/config';
22
import './components/App/icons';
33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
44
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
5-
import React from 'react';
5+
import React, { useMemo } from 'react';
66
import { I18nextProvider } from 'react-i18next';
77
import { Provider } from 'react-redux';
88
import AppContainer from './components/App/AppContainer';
9+
import { useCurrentAppTheme } from './components/App/themeSlice';
910
import ErrorBoundary from './components/common/ErrorBoundary';
1011
import ErrorComponent from './components/common/ErrorPage';
1112
import i18n from './i18n/config';
1213
import { useElectronI18n } from './i18n/electronI18n';
1314
import ThemeProviderNexti18n from './i18n/ThemeProviderNexti18n';
14-
import themes, { getThemeName, usePrefersColorScheme } from './lib/themes';
15+
import { createMuiTheme, getThemeName, usePrefersColorScheme } from './lib/themes';
1516
import { useTypedSelector } from './redux/reducers/reducers';
1617
import store from './redux/stores/store';
1718

@@ -24,9 +25,12 @@ function AppWithRedux(props: React.PropsWithChildren<{}>) {
2425
themeName = getThemeName();
2526
}
2627

28+
const currentAppTheme = useCurrentAppTheme();
29+
const muiTheme = useMemo(() => createMuiTheme(currentAppTheme), [themeName, currentAppTheme]);
30+
2731
return (
2832
<I18nextProvider i18n={i18n}>
29-
<ThemeProviderNexti18n theme={themes[themeName]}>{props.children}</ThemeProviderNexti18n>
33+
<ThemeProviderNexti18n theme={muiTheme}>{props.children}</ThemeProviderNexti18n>
3034
</I18nextProvider>
3135
);
3236
}

‎frontend/src/components/App/AppLogo.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Theme } from '@mui/material';
22
import { SxProps } from '@mui/system';
33
import React, { isValidElement, ReactElement } from 'react';
4-
import { getThemeName } from '../../lib/themes';
4+
import { getThemeName, useNavBarMode } from '../../lib/themes';
55
import { useTypedSelector } from '../../redux/reducers/reducers';
66
import LogoDark from '../../resources/icon-dark.svg?react';
77
import LogoLight from '../../resources/icon-light.svg?react';
@@ -14,7 +14,7 @@ export interface AppLogoProps {
1414
/** The size of the logo. 'small' for in mobile view, and 'large' for tablet and desktop sizes. By default the 'large' is used. */
1515
logoType?: 'small' | 'large';
1616
/** User selected theme. By default it checks which is is active. */
17-
themeName?: 'dark' | 'light';
17+
themeName?: string;
1818
/** A class to use on your SVG. */
1919
className?: string;
2020
/** SxProps to use on your SVG. */
@@ -48,6 +48,7 @@ export function AppLogo(props: AppLogoProps) {
4848
const arePluginsLoaded = useTypedSelector(state => state.plugins.loaded);
4949
const PluginAppLogoComponent = useTypedSelector(state => state.theme.logo);
5050
const PluginAppLogoComp = PluginAppLogoComponent as typeof React.Component;
51+
const mode = useNavBarMode();
5152

5253
// Till all plugins are not loaded show empty content for logo as we might have logo coming from a plugin
5354
if (!arePluginsLoaded) {
@@ -69,6 +70,6 @@ export function AppLogo(props: AppLogoProps) {
6970
)}
7071
</ErrorBoundary>
7172
) : (
72-
<OriginalAppLogo logoType={logoType} themeName={themeName} />
73+
<OriginalAppLogo logoType={logoType} themeName={mode} />
7374
);
7475
}

‎frontend/src/components/App/Home/SquareButton.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,12 @@ export default function SquareButton(props: SquareButtonProps) {
2525
return (
2626
<ButtonBase focusRipple {...otherProps}>
2727
<Card
28+
variant="outlined"
2829
sx={{
2930
width: 140,
3031
height: 140,
3132
paddingTop: '24px',
32-
backgroundColor: primary ? 'text.primary' : 'squareButton.background',
33+
backgroundColor: primary ? 'text.primary' : theme.palette.background.muted,
3334
}}
3435
>
3536
<CardContent sx={{ textAlign: 'center', paddingTop: 0 }}>

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.MoreThanThreeClusters.stories.storyshot

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -40,7 +40,7 @@
4040
type="button"
4141
>
4242
<div
43-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
43+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
4444
>
4545
<div
4646
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -67,7 +67,7 @@
6767
type="button"
6868
>
6969
<div
70-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
70+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
7171
>
7272
<div
7373
class="MuiCardContent-root css-d64700-MuiCardContent-root"

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.OneExistingCluster.stories.storyshot

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.OneRecentCluster.stories.storyshot

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -40,7 +40,7 @@
4040
type="button"
4141
>
4242
<div
43-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
43+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
4444
>
4545
<div
4646
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -67,7 +67,7 @@
6767
type="button"
6868
>
6969
<div
70-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
70+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
7171
>
7272
<div
7373
class="MuiCardContent-root css-d64700-MuiCardContent-root"

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.ThreeClusters.stories.storyshot

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -40,7 +40,7 @@
4040
type="button"
4141
>
4242
<div
43-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
43+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
4444
>
4545
<div
4646
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -67,7 +67,7 @@
6767
type="button"
6868
>
6969
<div
70-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
70+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
7171
>
7272
<div
7373
class="MuiCardContent-root css-d64700-MuiCardContent-root"

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.TwoExistingClusters.stories.storyshot

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -40,7 +40,7 @@
4040
type="button"
4141
>
4242
<div
43-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
43+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
4444
>
4545
<div
4646
class="MuiCardContent-root css-d64700-MuiCardContent-root"

‎frontend/src/components/App/Home/__snapshots__/RecentClusters.TwoRecentClusters.stories.storyshot

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
type="button"
1414
>
1515
<div
16-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
16+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
1717
>
1818
<div
1919
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -40,7 +40,7 @@
4040
type="button"
4141
>
4242
<div
43-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
43+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
4444
>
4545
<div
4646
class="MuiCardContent-root css-d64700-MuiCardContent-root"
@@ -67,7 +67,7 @@
6767
type="button"
6868
>
6969
<div
70-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1o0qjyj-MuiPaper-root-MuiCard-root"
70+
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root css-18nhd06-MuiPaper-root-MuiCard-root"
7171
>
7272
<div
7373
class="MuiCardContent-root css-d64700-MuiCardContent-root"

0 commit comments

Comments
 (0)