🎨 la couleur principale est à nouveau modifiable

source/Provider.js

@@ -1,3 +1,4 @@
+import SetCSSColour from 'Components/utils/SetCssColour'
 import { defaultTracker, TrackerProvider } from 'Components/utils/withTracker'
 import createHistory from 'history/createBrowserHistory'
 import i18next from 'i18next'
@@ -81,6 +82,7 @@ export default class Layout extends PureComponent {
 		return (
 			<Provider store={this.store}>
 				<TrackerProvider value={tracker}>
+					<SetCSSColour />
 					<I18nextProvider i18n={i18next}>
 						<Router history={tracker.connectToHistory(this.history)}>
 							<>{this.props.children}</>

source/components/AnswerList.css

@@ -2,8 +2,8 @@
 	border-collapse: collapse;
 	width: 100%;
 }
-.answer-list tr:nth-child(2n) {
-	background-color: rgba(41, 117, 209, 0.06);
+.answer-list tr:nth-child(2n + 1) {
+	background: none !important;
 }
 
 .answer-list td {

source/components/AnswerList.js

@@ -2,8 +2,8 @@ import { resetSimulation } from 'Actions/actions'
 import Montant from 'Components/Montant'
 import Overlay from 'Components/Overlay'
 import RuleLink from 'Components/RuleLink'
-import withLanguage from 'Components/utils/withLanguage'
 import withColours from 'Components/utils/withColours'
+import withLanguage from 'Components/utils/withLanguage'
 import { compose } from 'ramda'
 import React from 'react'
 import emoji from 'react-easy-emoji'
@@ -35,9 +35,9 @@ const AnswerList = ({
 	answers,
 	onClose,
 	language,
+	colours,
 	changeAnswer,
-	resetSimulation,
-	colours
+	resetSimulation
 }) => (
 	<Overlay onClose={onClose} className="answer-list">
 		<h2>
@@ -52,7 +52,7 @@ const AnswerList = ({
 		<table>
 			<tbody>
 				{answers.map(answer => (
-					<tr key={answer.id}>
+					<tr key={answer.id} style={{ background: colours.lightestColour }}>
 						<td>
 							<RuleLink {...answer} />
 						</td>

source/components/Simu.css

@@ -4,6 +4,5 @@
 	max-width: 40em;
 }
 .change-answer-link {
-	font-size: 120%;
 	text-align: center;
 }

source/components/TargetSelection.css

@@ -1,11 +1,6 @@
 #targetsContainer {
 	border-radius: 0.6em;
 	box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
-	background: linear-gradient(
-		60deg,
-		rgba(39, 69, 195, 0.87) 0%,
-		rgba(41, 117, 209, 1) 100%
-	);
 }
 
 #targetSelection h1 {
@@ -104,8 +99,7 @@
 	padding: 0.2em 0.5em;
 	background: rgba(255, 255, 255, 0);
 	border-radius: 0.2em;
-	border: 2px solid white;
-	color: white;
+	border: 2px solid;
 	font-size: inherit;
 }
 

source/components/TargetSelection.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import InputSuggestions from 'Components/conversation/InputSuggestions'
+import withColours from 'Components/utils/withColours'
 import withLanguage from 'Components/utils/withLanguage'
 import { encodeRuleName, findRuleByDottedName } from 'Engine/rules'
 import { propEq } from 'ramda'
@@ -64,7 +65,12 @@ export default class TargetSelection extends Component {
 				<section
 					id="targetsContainer"
 					style={{
-						color: colours.textColour
+						color: colours.textColour,
+						background: `linear-gradient(
+							60deg,
+							${colours.darkColour} 0%,
+							${colours.colour} 100%
+						)`
 					}}>
 					{this.renderOutputList()}
 				</section>
@@ -167,16 +173,20 @@ let Header = ({
 	)
 }
 
-let CurrencyField = props => {
+let CurrencyField = withColours(props => {
 	return (
 		<CurrencyInput
+			style={{
+				color: props.colours.textColour,
+				borderColor: props.colours.textColour
+			}}
 			className="targetInput"
 			autoFocus
 			{...props.input}
 			{...props}
 		/>
 	)
-}
+})
 
 let TargetInputOrValue = withLanguage(
 	({

source/components/ui/Button/button.css

@@ -35,12 +35,12 @@
 	cursor: not-allowed;
 }
 .ui__.button {
-	border-color: rgb(41, 117, 209);
-	color: rgb(41, 117, 209);
+	border-color: var(--colour);
+	color: var(--colour);
 	background: linear-gradient(
 		50deg,
-		rgba(39, 69, 195, 0.87) 5%,
-		rgba(41, 117, 209, 1) 50%,
+		/* color(var(--colour) hue(+20)) 5% */ rgba(39, 69, 195, 0.87) 5%,
+		var(--colour) 50%,
 		rgba(255, 255, 255, 0.52) 55%
 	);
 	background-size: 260%;
@@ -66,8 +66,8 @@
 }
 .ui__.inverted-button:not(:disabled):hover {
 	background-color: rgba(255, 255, 255, 1);
-	color: rgb(41, 117, 209);
-	border-color: rgb(41, 117, 209);
+	color: var(--colour);
+	border-color: var(--colour);
 }
 
 .ui__.link-button {
@@ -78,14 +78,14 @@
 	font-family: inherit;
 	padding: 0;
 	margin: 0;
-	color: rgb(41, 117, 209);
+	color: var(--colour);
 }
 .ui__.link-button:not(:disabled):hover {
 	opacity: 0.8;
 }
 
 .ui__.button_next {
-	color: rgb(41, 117, 209);
+	color: var(--colour);
 }
 
 .ui__.skip-button {

source/components/ui/Typography.css

@@ -51,7 +51,7 @@ h6 {
 h1,
 h2,
 h3 {
-	color: rgb(41, 117, 209);
+	color: var(--colour);
 }
 
 button {
@@ -68,7 +68,7 @@ a {
 	font-size: inherit;
 	padding: none;
 	text-decoration: underline;
-	color: rgb(41, 117, 209);
+	color: var(--colour);
 }
 a:not(:disabled):not(.button, .inverted-button):hover {
 	opacity: 0.8;

source/components/ui/index.css

@@ -2,6 +2,10 @@
 @import './Typography.css';
 @import './reset.css';
 
+:root {
+	--colour: rgb(41, 117, 209);
+}
+
 body {
 	overflow-x: hidden;
 }

source/components/utils/SetCssColour.js

@@ -0,0 +1,20 @@
+import { Component } from 'react'
+import withColours from './withColours'
+
+class SetCSSColour extends Component {
+	updateCSSColour = () => {
+		document.body.style.setProperty('--colour', this.props.colours.colour)
+	}
+	constructor(props) {
+		super(props)
+		this.updateCSSColour()
+	}
+	componentDidUpdate() {
+		this.updateCSSColour()
+	}
+	render() {
+		return null
+	}
+}
+
+export default withColours(SetCSSColour)

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

@@ -13,7 +13,7 @@ export default class Couleur extends React.Component {
 	changeColour = ({ hex }) => this.props.changeColour(hex)
 	render() {
 		return (
-			<div>
+			<div className="ui__ container">
 				<p className="indication">
 					Visualisez sur cette page l’apparence du module pour différentes
 					couleurs principales.