🎨 Mise à jour des couleurs sur une partie de l'appli

Il faudrait idéalement utiliser une librairie d'inline CSS pour utiliser
themeColours partout. Pas urgent tant que pas d'embed personnalisés

source/components/Simulateur.css

@@ -99,7 +99,7 @@
 }
 #foldedSteps .header button {
 	font-size: 80%;
-	color: #4A89DC;
+	color: #2975D1;
 	border: none;
 }
 #foldedSteps .header button i {

source/components/Simulateur.js

@@ -62,7 +62,7 @@ export default class extends Component {
 
 		let
 			{started} = this.state,
-			{foldedSteps, extraSteps, unfoldedSteps, situation, situationGate} = this.props,
+			{foldedSteps, extraSteps, unfoldedSteps, situation, situationGate, themeColours} = this.props,
 			sim = path =>
 				R.path(R.unless(R.is(Array), R.of)(path))(this.rule.simulateur || {}),
 			reinitalise = () => {
@@ -97,7 +97,8 @@ export default class extends Component {
 					</div>
 				}
 				{ (started || !sim(['introduction', 'notes'])) &&
-						<Conversation initialValues={ R.pathOr({},['simulateur','par défaut'], sim) } {...{foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate}}/>
+						<Conversation initialValues={ R.pathOr({},['simulateur','par défaut'], sim) }
+							{...{foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate, textColourOnWhite: themeColours.textColourOnWhite}}/>
 				}
 
 			</div>

source/components/conversation/Conversation.js

@@ -11,7 +11,7 @@ import Scroll from 'react-scroll'
 })
 export default class Conversation extends Component {
 	render() {
-		let {foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate} = this.props
+		let {foldedSteps, unfoldedSteps, extraSteps, reinitalise, situation, situationGate, textColourOnWhite} = this.props
 
 		Scroll.animateScroll.scrollToBottom()
 		return (
@@ -21,7 +21,7 @@ export default class Conversation extends Component {
 						<div id="foldedSteps">
 							<div className="header" >
 								<h3>Vos réponses</h3>
-								<button onClick={reinitalise}>
+								<button onClick={reinitalise} style={{color: textColourOnWhite}}>
 									<i className="fa fa-trash" aria-hidden="true"></i>
 									Tout effacer
 								</button>

source/components/conversation/Input.js

@@ -53,13 +53,13 @@ export default class Input extends Component {
 					</button>
 				</span>
 
-				{this.renderSuggestions()}
+				{this.renderSuggestions(themeColours)}
 
 				{inputError && <span className="step-input-error">{error}</span>}
 			</span>
 		)
 	}
-	renderSuggestions(){
+	renderSuggestions(themeColours){
 		let {setFormValue, submit, suggestions} = this.props.stepProps
 		if (!suggestions) return null
 		return (
@@ -69,7 +69,8 @@ export default class Input extends Component {
 				<li key={value}
 					onClick={e => setFormValue('' + value) && submit() && e.preventDefault()}
 					onMouseOver={() => setFormValue('' + value) && this.setState({suggestedInput: true})}
-					onMouseOut={() => setFormValue('') && this.setState({suggestedInput: false})}>
+					onMouseOut={() => setFormValue('') && this.setState({suggestedInput: false})}
+					style={{color: themeColours.colour}}>
 					<a href="#" title="cliquer pour valider">{text}</a>
 				</li>
 			)}

source/components/conversation/conversation.css

@@ -305,13 +305,10 @@ fieldset > .ignore {
 	margin-left: .6em;
 }
 .step .inputSuggestions a {
-	color: #4A89DC;
 	padding: .1em .6em;
 	font-weight: 600;
 }
 .step .inputSuggestions a:hover {
-	background: #4A89DC;
-	color: white;
 	text-decoration: none;
 }
 

source/components/themeColours.js

@@ -7,7 +7,7 @@ export default forcedThemeColour => {
 			return script && script.getAttribute('couleur')
 		},
 		// Use the default theme colour if the host page hasn't made a choice
-		defaultColour = '#4A89DC',
+		defaultColour = '#2975D1',
 		colour = forcedThemeColour || scriptColour() || defaultColour,
 		textColour = findContrastedTextColour(colour, true), // the 'simple' version feels better...
 		inverseTextColour = textColour === '#ffffff' ? '#000' : '#fff',