From f1e00062fb99af7be5ba81c7a80e4e2aaa4adb17 Mon Sep 17 00:00:00 2001 From: Benjamin Arias Date: Fri, 18 Nov 2022 16:08:51 +0100 Subject: [PATCH] wip --- site/source/Provider.tsx | 110 +++++++++--------- .../source/design-system/layout/Container.tsx | 18 +-- site/source/design-system/root.tsx | 16 ++- site/source/design-system/theme.ts | 35 +++++- site/source/pages/Landing/Landing.tsx | 9 +- site/source/pages/Landing/SearchOrCreate.tsx | 95 ++++++++------- site/source/types/styled.d.ts | 6 + 7 files changed, 164 insertions(+), 125 deletions(-) diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx index 28150b980..f4a8567eb 100644 --- a/site/source/Provider.tsx +++ b/site/source/Provider.tsx @@ -22,6 +22,7 @@ import logo from '@/images/logo-monentreprise.svg' import { TrackingContext } from './ATInternetTracking' import { createTracker } from './ATInternetTracking/Tracker' import { ServiceWorker } from './ServiceWorker' +import { DarkModeProvider } from './contexts/DarkModeContext' import * as safeLocalStorage from './storage/safeLocalStorage' import { store } from './store' import { inIframe } from './utils' @@ -44,59 +45,62 @@ export default function Provider({ const { t } = useTranslation() return ( - - - - - Logo mon-entreprise - -

Une erreur est survenue

- - L'équipe technique mon-entreprise a été automatiquement prévenue. - - - Vous pouvez également nous contacter directement à l'adresse{' '} - - contact@mon-entreprise.beta.gouv.fr - {' '} - si vous souhaitez partager une remarque. Veuillez nous excuser - pour la gêne occasionnée. - - - } - > - {!import.meta.env.SSR && - import.meta.env.MODE === 'production' && - 'serviceWorker' in navigator && - !inIframe() && } - - - - - - - - {children} - - - - - - - - - + + + + + + Logo mon-entreprise + +

Une erreur est survenue

+ + L'équipe technique mon-entreprise a été automatiquement + prévenue. + + + Vous pouvez également nous contacter directement à l'adresse{' '} + + contact@mon-entreprise.beta.gouv.fr + {' '} + si vous souhaitez partager une remarque. Veuillez nous excuser + pour la gêne occasionnée. + + + } + > + {!import.meta.env.SSR && + import.meta.env.MODE === 'production' && + 'serviceWorker' in navigator && + !inIframe() && } + + + + + + + + {children} + + + + + + + + + + ) } diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx index aece70862..eed2637a3 100644 --- a/site/source/design-system/layout/Container.tsx +++ b/site/source/design-system/layout/Container.tsx @@ -1,7 +1,5 @@ import { ReactNode } from 'react' -import styled, { DefaultTheme, ThemeProvider } from 'styled-components' - -import { useDarkMode } from '@/hooks/useDarkMode' +import styled, { DefaultTheme } from 'styled-components' const InnerContainer = styled.div` margin-right: auto; @@ -57,16 +55,12 @@ export default function Container({ backgroundColor, children, }: ContainerProps) { - const [darkMode] = useDarkMode() - return ( - ({ ...theme, darkMode })}> - - - {children} - - - + + + {children} + + ) } diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx index 36260b79e..9d4745531 100644 --- a/site/source/design-system/root.tsx +++ b/site/source/design-system/root.tsx @@ -6,8 +6,7 @@ import styled, { css, } from 'styled-components' -import { DarkModeProvider } from '@/contexts/DarkModeContext' -import urssafTheme from '@/design-system/theme' +import urssafTheme, { getThemeColorsValues } from '@/design-system/theme' import { useDarkMode } from '@/hooks/useDarkMode' type SystemRootProps = { @@ -17,12 +16,17 @@ type SystemRootProps = { const SystemRoot = ({ children }: SystemRootProps) => { const userAgent = typeof navigator !== 'undefined' && navigator.userAgent + const [isDarkMode] = useDarkMode() + + const darkModeColorValues = getThemeColorsValues( + isDarkMode, + urssafTheme + ) as object + return ( - - - {children} - + + {children} ) diff --git a/site/source/design-system/theme.ts b/site/source/design-system/theme.ts index 7f905bdd9..6bcf3cc5f 100644 --- a/site/source/design-system/theme.ts +++ b/site/source/design-system/theme.ts @@ -183,6 +183,31 @@ const baseTheme = { }, } +const themeColorsDefaultValues = { + theme: { + textColorDefault: baseTheme.colors.bases.primary[800], + backgroundColorLight: baseTheme.colors.extended.grey[100], + backgroundColorDark: baseTheme.colors.bases.primary[800], + }, +} + +export const getThemeColorsValues = ( + isDarkMode: boolean, + theme: typeof baseTheme +) => { + if (isDarkMode) { + return { + mode: { + textColorDefault: theme.colors.bases.primary[100], + backgroundColorLight: theme.colors.bases.primary[800], + backgroundColorDark: baseTheme.colors.extended.grey[100], + }, + } + } + + return themeColorsDefaultValues +} + // We use the Grid from material-ui, we need to uniformise // breakpoints and spacing with the Urssaf design system export type SpacingKey = keyof typeof baseTheme.breakpointsWidth @@ -193,6 +218,14 @@ const breakpoints = Object.fromEntries( ]) ) as Record +const baseThemeWithThemeColors = { + ...baseTheme, + colors: { + ...baseTheme.colors, + ...themeColorsDefaultValues, + }, +} + const theme: DefaultTheme = { breakpoints: { values: { @@ -202,7 +235,7 @@ const theme: DefaultTheme = { }, spacing: Object.values(baseTheme.spacings), - ...baseTheme, + ...baseThemeWithThemeColors, } export default theme diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx index 649bf22fe..7ab06e9a6 100644 --- a/site/source/pages/Landing/Landing.tsx +++ b/site/source/pages/Landing/Landing.tsx @@ -51,10 +51,7 @@ export default function Landing() { - theme.colors.bases.primary[600]} - > + theme.colors.bases.primary[600]}> @@ -188,3 +185,7 @@ const HideOnMobile = styled(Grid)` display: block; } ` + +const SearchContainer = styled(Container)` + background: ${({ theme }) => theme.colors.theme.backgroundColorDark}; +` diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx index 41992f057..5702fc908 100644 --- a/site/source/pages/Landing/SearchOrCreate.tsx +++ b/site/source/pages/Landing/SearchOrCreate.tsx @@ -2,7 +2,6 @@ import { useCallback, useEffect } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' import { generatePath, useNavigate } from 'react-router-dom' -import { ThemeProvider } from 'styled-components' import { resetCompany } from '@/actions/companyActions' import { @@ -35,59 +34,57 @@ export default function SearchOrCreate() { const { t } = useTranslation() return ( - ({ ...theme, darkMode: true })}> - - - {companySIREN ? ( - <> -

Votre entreprise

- - - - - - - - ) : ( - <> -

- Rechercher votre entreprise{' '} -

- - - + + + {companySIREN ? ( + <> +

Votre entreprise

+ + + - - )} - + + + + ) : ( + <> +

+ Rechercher votre entreprise{' '} +

+ + + + + + )} - + ) } diff --git a/site/source/types/styled.d.ts b/site/source/types/styled.d.ts index 12434cce3..c5b296c23 100644 --- a/site/source/types/styled.d.ts +++ b/site/source/types/styled.d.ts @@ -57,6 +57,12 @@ declare module 'styled-components' { info: SmallPalette dark: Palette } + + theme: { + textColorDefault: string + backgroundColorLight: string + backgroundColorDark: string + } } spacings: {