betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

wip

improve-darkmode
Benjamin Arias 2022-11-18 16:08:51 +01:00
parent 196ccce0fe
commit f1e00062fb
7 changed files with 164 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
site/source/Provider.tsx
View File

@ -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 (
<DesignSystemThemeProvider>
<GlobalStyle />
<ErrorBoundary
showDialog
fallback={
<Container>
<Link href="/" aria-label={t("Retourner à la page d'accueil")}>
<img
src={logo}
alt="Logo mon-entreprise"
style={{
maxWidth: '200px',
width: '100%',
marginTop: '1rem',
}}
></img>
</Link>
<H1>Une erreur est survenue</H1>
<Intro>
L'équipe technique mon-entreprise a été automatiquement prévenue.
</Intro>
<Body>
Vous pouvez également nous contacter directement à l'adresse{' '}
<Link href="mailto:contact@mon-entreprise.beta.gouv.fr">
contact@mon-entreprise.beta.gouv.fr
</Link>{' '}
si vous souhaitez partager une remarque. Veuillez nous excuser
pour la gêne occasionnée.
</Body>
</Container>
}
>
{!import.meta.env.SSR &&
import.meta.env.MODE === 'production' &&
'serviceWorker' in navigator &&
!inIframe() && <ServiceWorker />}
<OverlayProvider>
<ReduxProvider store={store}>
<ThemeColorsProvider>
<DisableAnimationOnPrintProvider>
<SiteNameContext.Provider value={basename}>
<I18nextProvider i18n={i18next}>
<BrowserRouterProvider basename={basename}>
{children}
</BrowserRouterProvider>
</I18nextProvider>
</SiteNameContext.Provider>
</DisableAnimationOnPrintProvider>
</ThemeColorsProvider>
</ReduxProvider>
</OverlayProvider>
</ErrorBoundary>
</DesignSystemThemeProvider>
<DarkModeProvider>
<DesignSystemThemeProvider>
<GlobalStyle />
<ErrorBoundary
showDialog
fallback={
<Container>
<Link href="/" aria-label={t("Retourner à la page d'accueil")}>
<img
src={logo}
alt="Logo mon-entreprise"
style={{
maxWidth: '200px',
width: '100%',
marginTop: '1rem',
}}
></img>
</Link>
<H1>Une erreur est survenue</H1>
<Intro>
L'équipe technique mon-entreprise a été automatiquement
prévenue.
</Intro>
<Body>
Vous pouvez également nous contacter directement à l'adresse{' '}
<Link href="mailto:contact@mon-entreprise.beta.gouv.fr">
contact@mon-entreprise.beta.gouv.fr
</Link>{' '}
si vous souhaitez partager une remarque. Veuillez nous excuser
pour la gêne occasionnée.
</Body>
</Container>
}
>
{!import.meta.env.SSR &&
import.meta.env.MODE === 'production' &&
'serviceWorker' in navigator &&
!inIframe() && <ServiceWorker />}
<OverlayProvider>
<ReduxProvider store={store}>
<ThemeColorsProvider>
<DisableAnimationOnPrintProvider>
<SiteNameContext.Provider value={basename}>
<I18nextProvider i18n={i18next}>
<BrowserRouterProvider basename={basename}>
{children}
</BrowserRouterProvider>
</I18nextProvider>
</SiteNameContext.Provider>
</DisableAnimationOnPrintProvider>
</ThemeColorsProvider>
</ReduxProvider>
</OverlayProvider>
</ErrorBoundary>
</DesignSystemThemeProvider>
</DarkModeProvider>
)
}

18
site/source/design-system/layout/Container.tsx
View File

@ -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 (
<ThemeProvider theme={(theme) => ({ ...theme, darkMode })}>
<OuterOuterContainer>
<OuterContainer backgroundColor={backgroundColor}>
<InnerContainer>{children}</InnerContainer>
</OuterContainer>
</OuterOuterContainer>
</ThemeProvider>
<OuterOuterContainer>
<OuterContainer backgroundColor={backgroundColor}>
<InnerContainer>{children}</InnerContainer>
</OuterContainer>
</OuterOuterContainer>
)
}

16
site/source/design-system/root.tsx
View File

@ -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 (
<StyleSheetManager disableCSSOMInjection={isbot(userAgent)}>
<ThemeProvider theme={urssafTheme}>
<DarkModeProvider>
<Background>{children}</Background>
</DarkModeProvider>
<ThemeProvider theme={{ ...urssafTheme, ...darkModeColorValues }}>
<Background>{children}</Background>
</ThemeProvider>
</StyleSheetManager>
)

35
site/source/design-system/theme.ts
View File

@ -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<SpacingKey, number>
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

9
site/source/pages/Landing/Landing.tsx
View File

@ -51,10 +51,7 @@ export default function Landing() {
</Intro>
</PageHeader>
</Container>
<Container
darkMode
backgroundColor={(theme) => theme.colors.bases.primary[600]}
>
<Container backgroundColor={(theme) => theme.colors.bases.primary[600]}>
<SearchOrCreate />
<Spacing xl />
</Container>
@ -188,3 +185,7 @@ const HideOnMobile = styled(Grid)`
display: block;
}
`
const SearchContainer = styled(Container)`
background: ${({ theme }) => theme.colors.theme.backgroundColorDark};
`

95
site/source/pages/Landing/SearchOrCreate.tsx
View File

@ -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 (
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: true })}>
<Grid container spacing={3}>
<Grid item xl={8} lg={10} md={12}>
{companySIREN ? (
<>
<H3 as="h2">Votre entreprise</H3>
<CompanyDetails />
<Spacing md />
<AnswerGroup>
<Button
role="link"
to={generatePath(absoluteSitePaths.gérer.entreprise, {
entreprise: companySIREN as string,
})}
>
Voir ma situation
</Button>
<Button light onPress={() => dispatch(resetCompany())}>
Réinitialiser
</Button>
</AnswerGroup>
</>
) : (
<>
<H3 as="h2">
<Trans>Rechercher votre entreprise</Trans>{' '}
</H3>
<CompanySearchField onSubmit={handleCompanySubmit} />
<Spacing md />
<Grid container spacing={3}>
<Grid item xl={8} lg={10} md={12}>
{companySIREN ? (
<>
<H3 as="h2">Votre entreprise</H3>
<CompanyDetails />
<Spacing md />
<AnswerGroup>
<Button
size="XL"
role="link"
to={
statutChoisi
? absoluteSitePaths.créer[statutChoisi]
: absoluteSitePaths.créer.index
}
aria-label={t(
'landing.choice.create.aria-label',
"Je n'ai pas encore d'entreprise, accéder au guide de création d'entreprise."
)}
to={generatePath(absoluteSitePaths.gérer.entreprise, {
entreprise: companySIREN as string,
})}
>
<Emoji emoji="💡" />{' '}
<Trans i18nKey="landing.choice.create.title">
Je n'ai pas encore d'entreprise
</Trans>
Voir ma situation
</Button>
</>
)}
</Grid>
<Button light onPress={() => dispatch(resetCompany())}>
Réinitialiser
</Button>
</AnswerGroup>
</>
) : (
<>
<H3 as="h2">
<Trans>Rechercher votre entreprise</Trans>{' '}
</H3>
<CompanySearchField onSubmit={handleCompanySubmit} />
<Spacing md />
<Button
size="XL"
role="link"
to={
statutChoisi
? absoluteSitePaths.créer[statutChoisi]
: absoluteSitePaths.créer.index
}
aria-label={t(
'landing.choice.create.aria-label',
"Je n'ai pas encore d'entreprise, accéder au guide de création d'entreprise."
)}
>
<Emoji emoji="💡" />{' '}
<Trans i18nKey="landing.choice.create.title">
Je n'ai pas encore d'entreprise
</Trans>
</Button>
</>
)}
</Grid>
</ThemeProvider>
</Grid>
)
}

6
site/source/types/styled.d.ts vendored
View File

@ -57,6 +57,12 @@ declare module 'styled-components' {
info: SmallPalette
dark: Palette
}
theme: {
textColorDefault: string
backgroundColorLight: string
backgroundColorDark: string
}
}
spacings: {