Styled component update : rempace useContext(ThemeContext) par useTheme

pull/2799/head
Johan Girod 2023-09-11 11:09:02 +02:00
parent 6cc6a2ee23
commit 930b382c5a
7 changed files with 17 additions and 19 deletions

View File

@ -2,7 +2,7 @@ import { formatValue } from 'publicodes'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import { animated, config, useSpring } from 'react-spring'
import { styled, ThemeContext } from 'styled-components'
import { styled, useTheme } from 'styled-components'
import useDisplayOnIntersecting from '@/components/utils/useDisplayOnIntersecting'
import { Emoji } from '@/design-system/emoji'
@ -30,7 +30,7 @@ function ChartItemBar({
colors: {
bases: { primary },
},
} = useContext(ThemeContext)
} = useTheme()
const style = useSpring({
config: config.slow,
delay: 100,

View File

@ -3,10 +3,9 @@ import BarChartBranch from '@/components/BarChart'
import '@/components/Distribution.css'
import { DottedName } from 'modele-social'
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import Value, {
Condition,
@ -31,7 +30,7 @@ import { DistributionSection } from './SalaryExplanation'
export default function IndépendantExplanation() {
const { t } = useTranslation()
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
return (
<>

View File

@ -1,6 +1,6 @@
import { useContext, useRef } from 'react'
import { useRef } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import Distribution from '@/components/Distribution'
import PaySlip from '@/components/PaySlip'
@ -105,7 +105,7 @@ export default function SalaryExplanation() {
function RevenueRepartitionSection(props: { onSeePayslip: () => void }) {
const { t } = useTranslation()
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
const { currentSimulatorData } = useCurrentSimulatorData()
return (

View File

@ -2,7 +2,7 @@ import { BlobProvider } from '@react-pdf/renderer'
import { RuleNode, utils } from 'publicodes'
import { lazy, Suspense, useContext, useRef, useState } from 'react'
import SignaturePad from 'react-signature-pad-wrapper'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import { TrackingContext, TrackPage } from '@/components/ATInternetTracking'
import { Condition } from '@/components/EngineValue'
@ -37,7 +37,7 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
const engine = useContext(EngineContext)
const signatureRef = useRef<SignaturePadInstance>()
const tracker = useContext(TrackingContext)
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
if (missingValues.length) {
return (
<Message type="info" icon>

View File

@ -1,6 +1,5 @@
import { useContext } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import ChiffreAffairesActivitéMixte from '@/components/ChiffreAffairesActivitéMixte'
import { WhenAlreadyDefined } from '@/components/EngineValue'
@ -54,7 +53,7 @@ export default function AutoEntrepreneur() {
function Explanation() {
const { t } = useTranslation()
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
return (
<section>

View File

@ -1,8 +1,8 @@
import { DottedName } from 'modele-social'
import { useContext, useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import { Trans, useTranslation } from 'react-i18next'
import { useDispatch } from 'react-redux'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import { Condition } from '@/components/EngineValue'
import Notifications from '@/components/Notifications'
@ -107,7 +107,7 @@ const DividendesSimulationGoals = () => (
const DividendesExplanation = () => {
const { t } = useTranslation()
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
return (
<Condition expression="bénéficiaire . dividendes . bruts > 0">

View File

@ -1,5 +1,5 @@
import { formatValue } from 'publicodes'
import { ComponentProps, ReactElement, ReactNode, useContext } from 'react'
import { ComponentProps, ReactElement, ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import {
Area,
@ -16,7 +16,7 @@ import {
XAxis,
YAxis,
} from 'recharts'
import { ThemeContext } from 'styled-components'
import { useTheme } from 'styled-components'
import { StyledLegend } from '@/components/charts/PagesCharts'
import { Strong } from '@/design-system/typography'
@ -77,7 +77,7 @@ export default function VisitsChart({
}: VisitsChartProps) {
const { t } = useTranslation()
const [darkMode] = useDarkMode()
const { colors } = useContext(ThemeContext)
const { colors } = useTheme()
if (!data.length) {
return null
}