Répare la page couleur sur embauche.beta.gouv.fr

source/Provider.js

@@ -1,4 +1,3 @@
-import SetCSSColour from 'Components/utils/SetCssColour'
 import { ThemeColoursProvider } from 'Components/utils/withColours'
 import { SitePathProvider } from 'Components/utils/withSitePaths'
 import { TrackerProvider } from 'Components/utils/withTracker'
@@ -69,7 +68,6 @@ export default class Provider extends PureComponent {
 				<ThemeColoursProvider colour={getIframeOption('couleur')}>
 					<TrackerProvider value={this.props.tracker}>
 						<SitePathProvider value={this.props.sitePaths}>
-							<SetCSSColour />
 							<I18nextProvider i18n={i18next}>
 								<Router history={this.history}>
 									<>{this.props.children}</>

source/components/utils/SetCssColour.js

@@ -1,5 +1,4 @@
 import { Component } from 'react'
-import withColours from './withColours'
 
 class SetCSSColour extends Component {
 	updateCSSColour = () => {
@@ -19,4 +18,4 @@ class SetCSSColour extends Component {
 	}
 }
 
-export default withColours(SetCSSColour)
+export default SetCSSColour

source/components/utils/withColours.js

@@ -1,9 +1,8 @@
 /* @flow */
 
 import convert from 'color-convert'
+import SetCssColour from 'Components/utils/SetCssColour'
 import React, { Component, createContext } from 'react'
-import type { ComponentType } from 'react'
-
 export type ThemeColours = {
 	colour: string,
 	textColour: string,
@@ -92,11 +91,20 @@ const ThemeColoursContext: React$Context<ThemeColours> = createContext(
 )
 
 type ProviderProps = {
-	colour: string
+	colour: string,
+	children: React$Node
 }
-export const ThemeColoursProvider = ({ colour, ...props }: ProviderProps) => (
-	<ThemeColoursContext.Provider value={generateTheme(colour)} {...props} />
-)
+
+export function ThemeColoursProvider({ colour, children }: ProviderProps) {
+	const colours = generateTheme(colour)
+	return (
+		<ThemeColoursContext.Provider value={colours}>
+			<SetCssColour colours={colours} />
+			{children}
+		</ThemeColoursContext.Provider>
+	)
+}
+
 export default function withThemeColours<Props: { colours: ThemeColours }>(
 	WrappedComponent: React$ComponentType<Props>
 ): React$ComponentType<$Diff<Props, { colours: ThemeColours }>> {

source/sites/embauche.gouv.fr/pages/ColorPicker.js

@@ -1,6 +1,13 @@
-import { SliderPicker } from 'react-color'
 import React from 'react'
+import { ChromePicker } from 'react-color'
 
-export default ({ couleur, changeColour }) => (
-	<SliderPicker color={couleur} onChangeComplete={changeColour} />
-)
+export default function ColorPicker({ colour, onChange }) {
+	return (
+		<div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
+			<ChromePicker
+				color={colour}
+				onChangeComplete={color => onChange(color.hex)}
+			/>
+		</div>
+	)
+}

source/sites/embauche.gouv.fr/pages/Couleur.js

@@ -1,9 +1,12 @@
-import React, { Suspense } from 'react'
-import Home from './Home'
+/* @flow */
 
+import withColours, { ThemeColoursProvider } from 'Components/utils/withColours'
+import React, { Suspense, useState } from 'react'
+import Home from './Home'
 let LazyColorPicker = React.lazy(() => import('./ColorPicker'))
 
-const Couleur = () => {
+const Couleur = ({ colours: { colour: defaultColour } }) => {
+	const [colour, setColour] = useState(defaultColour)
 	return (
 		<div className="ui__ container">
 			<p className="indication">
@@ -11,19 +14,17 @@ const Couleur = () => {
 				couleurs principales.
 			</p>
 			<Suspense fallback={<div>Chargement...</div>}>
-				<LazyColorPicker
-					color={this.props.couleur}
-					onChangeComplete={this.changeColour}
-				/>
+				<LazyColorPicker colour={colour} onChange={setColour} />
 			</Suspense>
 			<p className="indication">
 				La couleur sélectionnée, à déclarer comme attribut
-				&quot;data-couleur&quot; du script sur votre page est :{' '}
-				<b>{this.props.couleur}</b>
+				&quot;data-couleur&quot; du script sur votre page est : <b>{colour}</b>
 			</p>
-			<Home />
+			<ThemeColoursProvider colour={colour}>
+				<Home />
+			</ThemeColoursProvider>
 		</div>
 	)
 }
 
-export default Couleur
+export default withColours(Couleur)