diff --git a/site/source/Provider.tsx b/site/source/Provider.tsx index 996fb505c..747609189 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 { Message } from './design-system' import * as safeLocalStorage from './storage/safeLocalStorage' import { store } from './store' @@ -45,77 +46,79 @@ 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. - - - - -

Cause de l'erreur :

- - {errorData.error.name} : {errorData.error.message} - - + + + + ( +
+ + + 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. + + + + +

Cause de l'erreur :

+ + {errorData.error.name} : {errorData.error.message} + + + - - -
- )} - > - {!import.meta.env.SSR && - import.meta.env.MODE === 'production' && - 'serviceWorker' in navigator && - !inIframe() && } - - - - - - - - {children} - - - - - - - - - + +
+ )} + > + {!import.meta.env.SSR && + import.meta.env.MODE === 'production' && + 'serviceWorker' in navigator && + !inIframe() && } + + + + + + + + {children} + + + + + + + + + + ) } diff --git a/site/source/components/LegalNotice.tsx b/site/source/components/LegalNotice.tsx index 88b2d0f29..3f1810b21 100644 --- a/site/source/components/LegalNotice.tsx +++ b/site/source/components/LegalNotice.tsx @@ -2,13 +2,11 @@ import { Trans, useTranslation } from 'react-i18next' import { PopoverWithTrigger } from '@/design-system' import { H2 } from '@/design-system/typography/heading' -import { Link } from '@/design-system/typography/link' +import { Link, StyledLink } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' -import { useDarkMode } from '@/hooks/useDarkMode' export default function LegalNotice() { const { t } = useTranslation() - const [darkMode] = useDarkMode() return ( San Francisco, CA 94107
Site web :  - https://www.netlify.com - +

@@ -67,14 +64,13 @@ export default function LegalNotice() {

- contact@mon-entreprise.beta.gouv.fr - + {' '} diff --git a/site/source/components/PaySlip.css b/site/source/components/PaySlip.css index d4fc951f6..3a8a88755 100644 --- a/site/source/components/PaySlip.css +++ b/site/source/components/PaySlip.css @@ -19,7 +19,6 @@ } .payslip__container h3 { border-bottom: 1px solid rgba(0, 0, 0, 0.85); - color: #1D458C; background-color: inherit; print-color-adjust: exact !important; margin: 0; @@ -43,7 +42,6 @@ .payslip__container h5 { margin: 0; - color: #1D458C; background-color: inherit; margin-bottom: 0.5rem; margin-top: 0.5rem; diff --git a/site/source/components/Simulation/Questions.tsx b/site/source/components/Simulation/Questions.tsx index 2f85b40bd..f1749b9a4 100644 --- a/site/source/components/Simulation/Questions.tsx +++ b/site/source/components/Simulation/Questions.tsx @@ -16,11 +16,12 @@ const QuestionsContainer = styled.div` border-radius: ${({ theme }) => `0 0 ${theme.box.borderRadius} ${theme.box.borderRadius}`}; background: ${({ theme }) => { - const colorPalette = theme.colors.bases.primary + const palettePrimary = theme.colors.bases.primary + const paletteGrey = theme.colors.extended.grey return theme.darkMode - ? `linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[700]} 100%);` - : `linear-gradient(60deg, ${colorPalette[200]} 0%, ${colorPalette[100]} 100%);` + ? `linear-gradient(60deg, ${paletteGrey[800]} 0%, ${paletteGrey[700]} 100%);` + : `linear-gradient(60deg, ${palettePrimary[200]} 0%, ${palettePrimary[100]} 100%);` }}; ` diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx index 812e8dd96..71af1b383 100644 --- a/site/source/components/Simulation/SimulationGoal.tsx +++ b/site/source/components/Simulation/SimulationGoal.tsx @@ -84,15 +84,12 @@ export function SimulationGoal({ {rule.rawNode.résumé && ( - {rule.rawNode.résumé} - + )} @@ -171,3 +168,7 @@ const StyledGoal = styled.div` padding: 0; } ` + +const StyledSmallBody = styled(SmallBody)` + margin-bottom: 0; +` diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx index ab1dcb99c..64fdcacc8 100644 --- a/site/source/components/Simulation/SimulationGoals.tsx +++ b/site/source/components/Simulation/SimulationGoals.tsx @@ -1,8 +1,9 @@ import React from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' -import styled, { ThemeProvider, css } from 'styled-components' +import styled, { css } from 'styled-components' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Grid } from '@/design-system/layout' import { Link } from '@/design-system/typography/link' import { firstStepCompletedSelector } from '@/selectors/simulationSelectors' @@ -46,12 +47,12 @@ export function SimulationGoals({ aria-labelledby="simulator-legend-label" aria-live="polite" > - ({ ...theme, darkMode: true })}> +
{legend}
{children} - + ) diff --git a/site/source/components/company/Details.tsx b/site/source/components/company/Details.tsx index 03c667812..1ac22a4da 100644 --- a/site/source/components/company/Details.tsx +++ b/site/source/components/company/Details.tsx @@ -29,10 +29,10 @@ export function CompanyDetails({ spacing={3} > -

+ {' '} -

+ Entreprise créée le{' '} @@ -64,3 +64,9 @@ export function CompanyDetails({ } const StyledCompanyContainer = styled(Message).attrs({ border: false })`` + +const StyledH4 = styled(H4)` + & span { + color: ${({ theme }) => theme.colors.bases.primary[700]}; + } +` diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx index 9410b2660..f75ef9051 100644 --- a/site/source/components/company/SearchField.tsx +++ b/site/source/components/company/SearchField.tsx @@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next' import styled from 'styled-components' import { FabriqueSocialEntreprise } from '@/api/fabrique-social' +import { ForceThemeProvider, ThemeType } from '@/contexts/DarkModeContext' import { Message } from '@/design-system' import { Card } from '@/design-system/card' import { SearchField } from '@/design-system/field' @@ -24,6 +25,7 @@ export function CompanySearchField(props: { onValue?: () => void onClear?: () => void onSubmit?: (search: FabriqueSocialEntreprise | null) => void + forceTheme?: ThemeType }) { const { t } = useTranslation() const refResults = useRef(null) @@ -62,14 +64,17 @@ export function CompanySearchField(props: { return ( - + + + + {state.value && !searchPending && ( diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx index b55030147..0148b92ee 100644 --- a/site/source/components/conversation/AnswerList.tsx +++ b/site/source/components/conversation/AnswerList.tsx @@ -305,7 +305,7 @@ const StyledAnswerList = styled(Grid)` theme.darkMode ? theme.colors.extended.dark[500] : theme.colors.bases.primary[100]}; - color: inherit; + color: ${({ theme }) => theme.colors.bases.primary[800]}; color-adjust: exact !important; outline: solid ${({ theme }) => diff --git a/site/source/components/layout/Footer/Footer.tsx b/site/source/components/layout/Footer/Footer.tsx index fbe478ab6..e386c46c4 100644 --- a/site/source/components/layout/Footer/Footer.tsx +++ b/site/source/components/layout/Footer/Footer.tsx @@ -1,10 +1,11 @@ import { Helmet } from 'react-helmet-async' import { Trans, useTranslation } from 'react-i18next' import { useLocation } from 'react-router-dom' -import styled, { ThemeProvider } from 'styled-components' +import styled from 'styled-components' import FeedbackButton from '@/components/Feedback' import LegalNotice from '@/components/LegalNotice' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Button } from '@/design-system/buttons' import { Emoji } from '@/design-system/emoji' import { FooterContainer } from '@/design-system/footer' @@ -84,7 +85,7 @@ export default function Footer() { theme.colors.bases.primary[700]}> - ({ ...theme, darkMode: true })}> + - + diff --git a/site/source/components/layout/Footer/Privacy.tsx b/site/source/components/layout/Footer/Privacy.tsx index 798b5aafa..2059d2f83 100644 --- a/site/source/components/layout/Footer/Privacy.tsx +++ b/site/source/components/layout/Footer/Privacy.tsx @@ -9,7 +9,13 @@ import { Body, SmallBody } from '@/design-system/typography/paragraphs' import { TrackPage, TrackingContext } from '../../../ATInternetTracking' import * as safeLocalStorage from '../../../storage/safeLocalStorage' -export default function Privacy({ label }: { label?: string }) { +export default function Privacy({ + label, + noUnderline = true, +}: { + label?: string + noUnderline?: boolean +}) { const tracker = useContext(TrackingContext) const [valueChanged, setValueChanged] = useState(false) const { t } = useTranslation() @@ -31,7 +37,7 @@ export default function Privacy({ label }: { label?: string }) { return ( ( - + {label ?? Gestion des données personnelles} )} diff --git a/site/source/components/ui/AnimatedTargetValue.tsx b/site/source/components/ui/AnimatedTargetValue.tsx index d20cc7763..8888386ab 100644 --- a/site/source/components/ui/AnimatedTargetValue.tsx +++ b/site/source/components/ui/AnimatedTargetValue.tsx @@ -1,5 +1,5 @@ import { formatValue } from 'publicodes' -import React, { useRef } from 'react' +import { useRef } from 'react' import { useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' import styled, { keyframes } from 'styled-components' diff --git a/site/source/contexts/DarkModeContext.tsx b/site/source/contexts/DarkModeContext.tsx index c1a7c9a9e..27ef90812 100644 --- a/site/source/contexts/DarkModeContext.tsx +++ b/site/source/contexts/DarkModeContext.tsx @@ -1,4 +1,5 @@ -import { ReactNode, createContext, useEffect, useState } from 'react' +import { ReactNode, createContext, useState } from 'react' +import { ThemeProvider } from 'styled-components' import { useIsEmbedded } from '@/components/utils/useIsEmbedded' import { getItem, setItem } from '@/storage/safeLocalStorage' @@ -37,34 +38,33 @@ export const DarkModeProvider = ({ children }: { children: ReactNode }) => { console.log(darkMode ? 'Nuit' : 'Jour') } - useEffect(() => { - if (!window.matchMedia) { - return - } - const onDarkModeChange = (e: MediaQueryListEvent) => { - setDarkMode(e.matches) - } - const matchDarkMode = window.matchMedia('(prefers-color-scheme: dark)') - - // safari 13 doesn't have addEventListener - matchDarkMode.addEventListener - ? matchDarkMode.addEventListener('change', onDarkModeChange) - : matchDarkMode.addListener(onDarkModeChange) - - return () => { - // safari 13 doesn't have removeEventListener - matchDarkMode.removeEventListener - ? matchDarkMode.removeEventListener('change', onDarkModeChange) - : matchDarkMode.removeListener(onDarkModeChange) - } - }) const finalDarkMode = !useIsEmbedded() && darkMode return ( - {/* ({ ...theme, darkMode: finalDarkMode })}> */} {children} - {/* */} ) } + +export type ThemeType = 'light' | 'dark' + +export const ForceThemeProvider = ({ + children, + forceTheme, +}: { + children: ReactNode + forceTheme?: ThemeType +}) => { + return ( + ({ + ...theme, + darkMode: + forceTheme === undefined ? theme.darkMode : forceTheme === 'dark', + })} + > + {children} + + ) +} diff --git a/site/source/design-system/InfoBulle/index.tsx b/site/source/design-system/InfoBulle/index.tsx index eaf91b285..51b35e04f 100644 --- a/site/source/design-system/InfoBulle/index.tsx +++ b/site/source/design-system/InfoBulle/index.tsx @@ -33,7 +33,7 @@ const InfoBulleText = styled.span` border-radius: 3px; font-family: 'Roboto'; background-color: white; - color: inherit; + color: ${({ theme }) => theme.colors.extended.grey[800]}; transition: opacity 0.2s, transform 0.2s; opacity: 0; box-shadow: 0px 2px 4px -1px rgba(41, 117, 209, 0.2), diff --git a/site/source/design-system/card/Article.tsx b/site/source/design-system/card/Article.tsx index c89458328..24f520b38 100644 --- a/site/source/design-system/card/Article.tsx +++ b/site/source/design-system/card/Article.tsx @@ -47,7 +47,7 @@ export function Article({ {titleProps.children} {icon} - {children} + {children} theme.spacings.xxs}; ` +const Content = styled(Body)` + background-color: transparent; +` + const StyledBody = styled(Body)` &, & * { diff --git a/site/source/design-system/chip/index.tsx b/site/source/design-system/chip/index.tsx index d175a87d0..6c7cc91a0 100644 --- a/site/source/design-system/chip/index.tsx +++ b/site/source/design-system/chip/index.tsx @@ -1,7 +1,8 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import styled, { ThemeProvider, css } from 'styled-components' +import styled, { css } from 'styled-components' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Palette, SmallPalette } from '@/types/styled' import { Emoji } from '../emoji' @@ -25,7 +26,7 @@ export function Chip({ const { t } = useTranslation() return ( - ({ ...theme, darkMode: false })}> + {icon && ( @@ -44,7 +45,7 @@ export function Chip({ )} {children} - + ) } const StyledIconWrapper = styled.span<{ diff --git a/site/source/design-system/field/NumberField.tsx b/site/source/design-system/field/NumberField.tsx index 5cea63002..c44c6eee0 100644 --- a/site/source/design-system/field/NumberField.tsx +++ b/site/source/design-system/field/NumberField.tsx @@ -146,8 +146,11 @@ const StyledNumberFieldContainer = styled(StyledContainer)` ` const StyledUnit = styled(StyledSuffix)` - color: ${({ theme }) => theme.colors.extended.grey[600]}; - background-color: inherit; + color: ${({ theme }) => + theme.darkMode + ? theme.colors.extended.grey[200] + : theme.colors.extended.grey[600]}; + background-color: transparent; padding-left: 0 !important; white-space: nowrap; ` diff --git a/site/source/design-system/field/Radio/Radio.tsx b/site/source/design-system/field/Radio/Radio.tsx index 5386c384b..436c300a1 100644 --- a/site/source/design-system/field/Radio/Radio.tsx +++ b/site/source/design-system/field/Radio/Radio.tsx @@ -118,7 +118,10 @@ export const VisibleRadio = styled.span` } :hover ${OutsideCircle} { - border-color: ${({ theme }) => theme.colors.bases.primary[700]}; + border-color: ${({ theme }) => + theme.darkMode + ? theme.colors.bases.primary[500] + : theme.colors.bases.primary[700]}; } ` diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx index 073047731..2f4b69dea 100644 --- a/site/source/design-system/field/SearchField.tsx +++ b/site/source/design-system/field/SearchField.tsx @@ -11,6 +11,7 @@ import styled, { css } from 'styled-components' import { SearchIcon } from '@/design-system/icons' import { Loader } from '@/design-system/icons/Loader' +import { FocusStyle } from '../global-style' import { StyledContainer, StyledDescription, @@ -32,6 +33,9 @@ const SearchInput = styled(StyledInput)` const SearchInputContainer = styled(StyledInputContainer)` padding-left: 0.5rem; + :focus-within { + ${FocusStyle} + } ` const IconContainer = styled.div<{ hasLabel?: boolean }>` @@ -102,7 +106,7 @@ export default function SearchField( const StyledClearButton = styled.button` position: absolute; right: 0; - background: none; + background: transparent; border: none; font-size: 2rem; line-height: 2rem; @@ -112,6 +116,5 @@ const StyledClearButton = styled.button` darkMode && css` color: white !important; - background-color: inherit; `} ` diff --git a/site/source/design-system/field/Select/index.tsx b/site/source/design-system/field/Select/index.tsx index 26ee779ef..5c3b9cbd0 100644 --- a/site/source/design-system/field/Select/index.tsx +++ b/site/source/design-system/field/Select/index.tsx @@ -36,7 +36,7 @@ export const Label = styled.label` css` @media not print { color: ${theme.colors.extended.grey[100]} !important; - background-color: inherit; + background-color: transparent; } `} ` @@ -71,7 +71,7 @@ const Button = styled.button` css` @media not print { color: ${theme.colors.extended.grey[100]} !important; - background-color: inherit; + background-color: transparent; } `} ` diff --git a/site/source/design-system/field/TextAreaField.tsx b/site/source/design-system/field/TextAreaField.tsx index 2eff99b72..1d66a9970 100644 --- a/site/source/design-system/field/TextAreaField.tsx +++ b/site/source/design-system/field/TextAreaField.tsx @@ -78,14 +78,14 @@ export const StyledTextArea = styled.textarea` `} color: ${({ theme }) => theme.colors.extended.grey[theme.darkMode ? 200 : 600]}; - background-color: inherit; + background-color: transparent; } ${({ theme }) => theme.darkMode && css` @media not print { color: ${theme.colors.extended.grey[100]} !important; - background-color: inherit; + background-color: transparent; } `} ` @@ -107,7 +107,7 @@ export const StyledLabel = styled.label` css` @media not print { color: ${theme.colors.extended.grey[100]} !important; - background-color: inherit; + background-color: transparent; } `} ` @@ -121,7 +121,7 @@ export const StyledDescription = styled(ExtraSmallBody)` export const StyledErrorMessage = styled(StyledDescription)` color: ${({ theme }) => theme.colors.extended.error[400]} !important; - background-color: inherit; + background-color: transparent; ` export const StyledSuffix = styled.span` diff --git a/site/source/design-system/field/TextField.tsx b/site/source/design-system/field/TextField.tsx index 8fbf7e757..36166ffb9 100644 --- a/site/source/design-system/field/TextField.tsx +++ b/site/source/design-system/field/TextField.tsx @@ -133,7 +133,8 @@ export const StyledInputContainer = styled.div<{ }>` border-radius: ${({ theme }) => theme.box.borderRadius}; border: ${({ theme }) => - `${theme.box.borderWidth} solid ${ + `${theme.box.borderWidth} solid + ${ theme.darkMode ? theme.colors.extended.grey[100] : theme.colors.extended.grey[700] @@ -213,6 +214,10 @@ export const StyledInputContainer = styled.div<{ : css`calc(${hasLabel ? LABEL_HEIGHT : '0rem'} + ${ theme.spacings.xs }) ${theme.spacings.sm} ${theme.spacings.xs}`}; + color: ${({ theme }) => + theme.darkMode + ? theme.colors.extended.grey[100] + : theme.colors.extended.grey[800]}; } ${({ small }) => diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts index ef326763c..7880b0c5e 100644 --- a/site/source/design-system/global-style.ts +++ b/site/source/design-system/global-style.ts @@ -224,4 +224,29 @@ figure { a:focus { ${FocusStyle} } + +// Corrige l'affichage du menu mobile de la documentation +#mobile-menu-portal-id { + & nav { + background: ${({ theme }) => theme.darkMode && theme.colors.extended.dark[800]}; + } + & svg { + fill: ${({ theme }) => theme.darkMode && theme.colors.extended.grey[100]}; + } + + li.active .content { + background-color: ${({ theme }) => + theme.darkMode && theme.colors.extended.dark[600]}; + } +} +#rules-nav-open-nav-button button { + color: ${({ theme }) => theme.darkMode && theme.colors.extended.grey[100]}; + border-color: ${({ theme }) => + theme.darkMode && theme.colors.extended.grey[100]}; + &:hover { + color: ${({ theme }) => theme.darkMode && theme.colors.extended.grey[800]}; + border-color: ${({ theme }) => + theme.darkMode && theme.colors.extended.grey[800]}; + } +} ` diff --git a/site/source/design-system/layout/Container.tsx b/site/source/design-system/layout/Container.tsx index 76982dde4..5f99deab4 100644 --- a/site/source/design-system/layout/Container.tsx +++ b/site/source/design-system/layout/Container.tsx @@ -1,7 +1,7 @@ import { ReactNode } from 'react' -import styled, { DefaultTheme, ThemeProvider } from 'styled-components' +import styled, { DefaultTheme } from 'styled-components' -import { useDarkMode } from '@/hooks/useDarkMode' +import { ForceThemeProvider, ThemeType } from '@/contexts/DarkModeContext' const InnerContainer = styled.div` margin-right: auto; @@ -44,43 +44,36 @@ const InnerContainer = styled.div` ` type OuterContainerProps = { - backgroundColor?: (theme: DefaultTheme) => string + $backgroundColor?: (theme: DefaultTheme) => string } type ContainerProps = { children: ReactNode - darkMode?: boolean + forceTheme?: ThemeType backgroundColor?: (theme: DefaultTheme) => string } export default function Container({ backgroundColor, - darkMode, + forceTheme, children, }: ContainerProps) { - const [defaultDarkMode] = useDarkMode() - return ( - ({ - ...theme, - darkMode: darkMode ?? defaultDarkMode ?? theme?.darkMode, - })} - > + - + {children} - + ) } const OuterContainer = styled.div` flex: 1; min-width: 100vw; - background-color: ${({ theme, backgroundColor }) => - backgroundColor ? backgroundColor(theme) : theme.colors}; + background-color: ${({ theme, $backgroundColor }) => + $backgroundColor ? $backgroundColor(theme) : theme.colors}; @media print { min-width: initial; } diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx index 1fbb635c5..64937f906 100644 --- a/site/source/design-system/message/index.tsx +++ b/site/source/design-system/message/index.tsx @@ -1,7 +1,8 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import styled, { DefaultTheme, ThemeProvider, css } from 'styled-components' +import styled, { DefaultTheme, css } from 'styled-components' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Palette, SmallPalette } from '@/types/styled' import { Emoji } from '../emoji' @@ -40,7 +41,7 @@ export function Message({ } return ( - ({ ...theme, darkMode: false })}> + {children} - + ) } const StyledIconWrapper = styled.div<{ @@ -112,6 +113,15 @@ const StyledMessage = styled.div` > * { margin: -${mini ? theme.spacings.xs : 0} 0; } + & p, + & span, + & li { + color: ${({ theme }) => theme.colors.extended.grey[800]}; + } + & a, + & button { + color: ${(colorSpace as Palette)[700] ?? colorSpace[600]}; + } ` }} ` diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index de401245a..7e68213ae 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/site/source/design-system/popover/Popover.tsx @@ -12,7 +12,9 @@ import FocusTrap from 'focus-trap-react' import React, { RefObject, useEffect, useRef, useState } from 'react' import styled, { ThemeProvider, css, keyframes } from 'styled-components' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Grid } from '@/design-system/layout' +import { useDarkMode } from '@/hooks/useDarkMode' import { getIframeOffset, wrapperDebounceEvents } from '@/utils' import { Container } from '../layout' @@ -74,75 +76,73 @@ export default function Popover( } return ( - ({ ...theme, darkMode: false })}> - - - + + + + - - - - {props.isDismissable && ( - - {/* TODO : replace with Link when in design system */} - - Fermer - - - - - - + + + {props.isDismissable && ( + + {/* TODO : replace with Link when in design system */} + + Fermer + + + + + + + )} + {/* tabIndex -1 is for text selection in popover, see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668 */} + + {title && ( +

+ {title} +

)} - {/* tabIndex -1 is for text selection in popover, see https://github.com/adobe/react-spectrum/issues/1604#issuecomment-781574668 */} - - {title && ( -

- {title} -

- )} - {children} - - - - + {children} + + + - - - - + + + + ) } @@ -164,8 +164,7 @@ const Underlay = styled.div` left: 0; overflow: auto; z-index: 200; // to be in front of the menu of the Publicodes doc - background: ${({ theme }) => - theme.darkMode ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)'}; + background: rgba(0, 0, 0, 0.5); animation: ${appear} 0.2s; display: flex; ${({ $offsetTop }) => @@ -185,8 +184,7 @@ const PopoverContainer = styled.div<{ $offsetTop: number | null }>` theme.darkMode ? theme.colors.extended.dark[600] : theme.colors.extended.grey[100]}; - box-shadow: ${({ theme }) => - theme.darkMode ? theme.elevationsDarkMode[4] : theme.elevations[4]}; + box-shadow: ${({ theme }) => theme.elevations[4]}; display: flex; margin-bottom: 1rem; flex-direction: column; @@ -210,7 +208,11 @@ const PopoverContainer = styled.div<{ $offsetTop: number | null }>` export const CloseButtonContainer = styled.div` border-bottom: 1px solid ${({ theme }) => theme.colors.extended.grey[300]}; - + ${({ theme }) => + theme.darkMode && + css` + color: ${theme.colors.extended.grey[100]}; + `} display: flex; align-items: center; height: ${({ theme }) => theme.spacings.xxl}; @@ -225,19 +227,20 @@ export const CloseButton = styled.button` color: ${({ theme }) => theme.darkMode - ? theme.colors.bases.primary[400] + ? theme.colors.bases.primary[100] : theme.colors.bases.primary[700]}; font-family: ${({ theme }) => theme.fonts.main}; font-weight: 700; font-size: ${({ theme }) => theme.baseFontSize}; line-height: 24px; padding: ${({ theme }) => theme.spacings.sm}; - path { - fill: ${({ theme }) => theme.colors.bases.primary[700]}; - } svg { width: ${({ theme }) => theme.spacings.lg}; height: ${({ theme }) => theme.spacings.lg}; + fill: ${({ theme }) => + theme.darkMode + ? theme.colors.extended.grey[100] + : theme.colors.bases.primary[700]}; } :hover { text-decoration: underline; diff --git a/site/source/design-system/root.tsx b/site/source/design-system/root.tsx index 98d14911f..592652ca6 100644 --- a/site/source/design-system/root.tsx +++ b/site/source/design-system/root.tsx @@ -6,7 +6,6 @@ import styled, { css, } from 'styled-components' -import { DarkModeProvider } from '@/contexts/DarkModeContext' import urssafTheme from '@/design-system/theme' import { useDarkMode } from '@/hooks/useDarkMode' @@ -16,13 +15,12 @@ type SystemRootProps = { const SystemRoot = ({ children }: SystemRootProps) => { const userAgent = typeof navigator !== 'undefined' && navigator.userAgent + const [darkMode] = useDarkMode() return ( - - - {children} - + + {children} ) diff --git a/site/source/design-system/typography/index.ts b/site/source/design-system/typography/index.ts index 00696c9ab..fdd0751f0 100644 --- a/site/source/design-system/typography/index.ts +++ b/site/source/design-system/typography/index.ts @@ -12,7 +12,8 @@ export const U = styled.u` text-decoration: underline; ` export const Code = styled.code` - background-color: #eee; + background-color: ${({ theme }) => + theme.darkMode ? theme.colors.extended.grey[600] : '#eee'}; color: inherit; padding: 0.25rem; border-radius: 0.25rem; diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx index 212cf490f..712398833 100644 --- a/site/source/design-system/typography/link.tsx +++ b/site/source/design-system/typography/link.tsx @@ -14,7 +14,7 @@ export const StyledLinkHover = css` text-decoration: underline; color: ${({ theme }) => theme.darkMode - ? theme.colors.bases.primary[100] + ? theme.colors.bases.primary[300] : theme.colors.bases.primary[800]}; ` diff --git a/site/source/design-system/typography/paragraphs.tsx b/site/source/design-system/typography/paragraphs.tsx index 3fa20cd0f..44f8456bb 100644 --- a/site/source/design-system/typography/paragraphs.tsx +++ b/site/source/design-system/typography/paragraphs.tsx @@ -4,7 +4,7 @@ export const baseParagraphStyle = css` font-family: ${({ theme }) => theme.fonts.main}; font-weight: normal; color: ${({ theme }) => theme.colors.extended.grey[800]}; - background-color: inherit; + background-color: transparent; @media not print { ${({ theme }) => diff --git a/site/source/pages/Iframes/IframeFooter.tsx b/site/source/pages/Iframes/IframeFooter.tsx index 6d9582c03..a0233167a 100644 --- a/site/source/pages/Iframes/IframeFooter.tsx +++ b/site/source/pages/Iframes/IframeFooter.tsx @@ -12,7 +12,7 @@ export default function IframeFooter() { > - + diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx index ee4ef33e8..506bf370c 100644 --- a/site/source/pages/Landing/Landing.tsx +++ b/site/source/pages/Landing/Landing.tsx @@ -60,7 +60,7 @@ export default function Landing() { theme.colors.bases.primary[600]} > diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx index c5207a3b0..44547cce3 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 { @@ -12,6 +11,7 @@ import { import { CompanyDetails } from '@/components/company/Details' import { CompanySearchField } from '@/components/company/SearchField' import { useEngine } from '@/components/utils/EngineContext' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import AnswerGroup from '@/design-system/answer-group' import { Button } from '@/design-system/buttons' import { Emoji } from '@/design-system/emoji' @@ -36,7 +36,7 @@ export default function SearchOrCreate() { const { t } = useTranslation() return ( - ({ ...theme, darkMode: true })}> + {companySIREN ? ( @@ -79,7 +79,10 @@ export default function SearchOrCreate() {

Rechercher votre entreprise{' '}

- + diff --git a/site/source/pages/gerer/demande-mobilité/FieldsPDF.tsx b/site/source/pages/gerer/demande-mobilité/FieldsPDF.tsx index b5d1ea141..5bec06ec0 100644 --- a/site/source/pages/gerer/demande-mobilité/FieldsPDF.tsx +++ b/site/source/pages/gerer/demande-mobilité/FieldsPDF.tsx @@ -15,7 +15,7 @@ export default function FieldsPDF({ fields }: FieldsPDFProps) { return ( <> {fields.map( - ({ rawNode: { type, question, note, API }, title, dottedName }) => ( + ({ rawNode: { type, question, note }, title, dottedName }) => ( {type === 'groupe' ? ( <> diff --git a/site/source/pages/gerer/index.tsx b/site/source/pages/gerer/index.tsx index 732cd2334..f59d65898 100644 --- a/site/source/pages/gerer/index.tsx +++ b/site/source/pages/gerer/index.tsx @@ -35,6 +35,7 @@ import { useEngine } from '@/components/utils/EngineContext' import { ScrollToTop } from '@/components/utils/Scroll' import { Markdown } from '@/components/utils/markdown' import useSimulationConfig from '@/components/utils/useSimulationConfig' +import { ForceThemeProvider } from '@/contexts/DarkModeContext' import { Message, Popover } from '@/design-system' import { Button } from '@/design-system/buttons' import { Container, Grid, Spacing } from '@/design-system/layout' @@ -270,14 +271,13 @@ function Home() { - theme.colors.bases.primary[600]} - darkMode - > + theme.colors.bases.primary[600]}> -

Simulateurs pour votre entreprise

+ +

Simulateurs pour votre entreprise

+