diff --git a/example-integration.html b/example-integration.html index 4b3bf66bc..00ad33577 100644 --- a/example-integration.html +++ b/example-integration.html @@ -24,7 +24,7 @@

Ce simulateur calcule vos cotisations sociales pour vous permettre de jongler entre les différents types de salaire en France.

- +
diff --git a/maison2.svg b/maison2.svg index c7b15e79d..62f5ab228 100644 --- a/maison2.svg +++ b/maison2.svg @@ -210,7 +210,7 @@ id="textPath36434" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:68.75px;font-family:'Liberation Serif';-inkscape-font-specification:'Liberation Serif';fill:#e2e1e1;fill-opacity:1"> </> > > > ({ explained: state.explainedVariable }), + state => ({ + explained: state.explainedVariable, + themeColours: state.themeColours + }), dispatch => ({ stopExplaining: () => dispatch({ type: EXPLAIN_VARIABLE }) }) @@ -20,7 +22,7 @@ export default class Aide extends Component { return marked(`### ${term} \n\n${explanation}`) } render() { - let { explained, stopExplaining } = this.props + let { explained, stopExplaining, themeColours } = this.props if (!explained) return
@@ -33,7 +35,11 @@ export default class Aide extends Component { return (
- +

({ + themeColours: state.themeColours +}))(({ themeColours, children }) => ( + +)) diff --git a/source/components/ProgressTip.css b/source/components/ProgressTip.css index fbafc2c80..7b6244401 100644 --- a/source/components/ProgressTip.css +++ b/source/components/ProgressTip.css @@ -1,4 +1,3 @@ - #sim .tip { font-style: italic; margin-bottom: 1em; @@ -10,7 +9,8 @@ #sim .tip progress { margin-left: 1em; background: white; - border: 1px solid #2975D1; + border-width: 1px; + border-style: solid; } progress::-webkit-progress-bar { @@ -18,5 +18,4 @@ progress::-webkit-progress-bar { } progress::-webkit-progress-value { - background: #2975D1; } diff --git a/source/components/ProgressTip.js b/source/components/ProgressTip.js index b1154cda0..e64b8bf65 100644 --- a/source/components/ProgressTip.js +++ b/source/components/ProgressTip.js @@ -7,7 +7,8 @@ import './ProgressTip.css' @connect(state => ({ done: state.done, foldedSteps: state.foldedSteps, - nextSteps: state.nextSteps + nextSteps: state.nextSteps, + textColourOnWhite: state.themeColours.textColourOnWhite })) export default class ProgressTip extends Component { state = { @@ -20,7 +21,7 @@ export default class ProgressTip extends Component { }) } render() { - let { done, nextSteps, foldedSteps } = this.props, + let { done, nextSteps, foldedSteps, textColourOnWhite } = this.props, nbQuestions = nextSteps.length if (!done) return null return ( @@ -34,9 +35,10 @@ export default class ProgressTip extends Component { {nbQuestions === 1 ? 'Une dernière question !' : `Il reste moins de ${nbQuestions} questions`} -

)} @@ -44,3 +46,13 @@ export default class ProgressTip extends Component { ) } } + +let ProgressBar = ({ foldedSteps, nbQuestions, colour }) => ( + +) diff --git a/source/components/Results.css b/source/components/Results.css index 8aa859360..a3ff326cf 100644 --- a/source/components/Results.css +++ b/source/components/Results.css @@ -1,4 +1,3 @@ - #resultsZone { min-height: 49%; display: flex; @@ -18,16 +17,15 @@ #results { width: 100%; - padding: .4em 1.4em; + padding: 0.4em 1.4em; } #resultsContent { position: relative; margin: 0 auto; - padding: .3em 0 1em; + padding: 0.3em 0 1em; min-height: 4em; width: 100%; max-width: 45em; - background: #2975D1; color: white; box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.25); display: flex; @@ -54,10 +52,8 @@ align-items: center; flex-wrap: wrap; margin: 0 auto; - } - #results li { margin: 0 1.2em; display: inline-block; diff --git a/source/components/Results.js b/source/components/Results.js index a01010399..af6423b46 100644 --- a/source/components/Results.js +++ b/source/components/Results.js @@ -15,37 +15,32 @@ import ProgressTip from 'Components/ProgressTip' conversationStarted: !isEmpty(state.form), conversationFirstAnswer: path(['form', 'conversation', 'values'])(state), situationGate: state.situationGate, - done: state.done + done: state.done, + themeColours: state.themeColours })) export default class Results extends Component { render() { - let { - analysis, - targetName, - conversationStarted, - conversationFirstAnswer, - location, - done - } = this.props + let { analysis, conversationStarted, done, themeColours } = this.props if (!analysis) return null let { targets } = analysis - let onRulePage = contains('/regle/')(location.pathname) + let textStyle = { color: themeColours.textColour } + return (
-
- -