diff --git a/source/components/GoToExplanations.js b/source/components/GoToExplanations.js index a6e86f7b9..5559fd36d 100644 --- a/source/components/GoToExplanations.js +++ b/source/components/GoToExplanations.js @@ -1,6 +1,7 @@ import React, { Component } from 'react' import { Trans, translate } from 'react-i18next' import { Element, scroller } from 'react-scroll' +import './conversation/conversation.css' import { SimpleButton } from './ui/Button' import withColours from './withColours' diff --git a/source/components/Overlay.js b/source/components/Overlay.js index 5fafed402..c11f263b8 100644 --- a/source/components/Overlay.js +++ b/source/components/Overlay.js @@ -1,6 +1,7 @@ import FocusTrap from 'focus-trap-react' import React, { Component } from 'react' import './Overlay.css' +import { SimpleButton } from './ui/Button' export default class Overlay extends Component { render() { @@ -20,13 +21,12 @@ export default class Overlay extends Component { e.stopPropagation() }}> {children} - + diff --git a/source/components/ProgressTip.js b/source/components/ProgressTip.js index adc7b7a26..0e77f4740 100644 --- a/source/components/ProgressTip.js +++ b/source/components/ProgressTip.js @@ -1,29 +1,21 @@ import React, { Component } from 'react' -import { Trans, translate } from 'react-i18next' +import { Trans } from 'react-i18next' import { connect } from 'react-redux' -import { withRouter } from 'react-router' -import './ProgressTip.css' import { nextStepsSelector } from 'Selectors/analyseSelectors' -import withColours from './withColours' +import './ProgressTip.css' -@withRouter -@translate() -@withColours @connect(state => ({ nextSteps: nextStepsSelector(state) })) export default class ProgressTip extends Component { render() { - let { - nextSteps, - colours: { textColourOnWhite } - } = this.props, + let { nextSteps } = this.props, nbQuestions = nextSteps.length if (nbQuestions === 0) return null return (
-

+

{nbQuestions === 1 ? ( dernière question ! ) : ( diff --git a/source/components/ResultView/Distribution.js b/source/components/ResultView/Distribution.js index 260e2725b..0dee3494e 100644 --- a/source/components/ResultView/Distribution.js +++ b/source/components/ResultView/Distribution.js @@ -39,7 +39,7 @@ type State = { branchesInViewport: Array } -const ANIMATION_SPRING = config.stiff +const ANIMATION_SPRING = config.gentle class Distribution extends Component { elementRef = null state = { diff --git a/source/components/ResultView/PaySlip.css b/source/components/ResultView/PaySlip.css index b9ee15a4e..d6f9df52a 100644 --- a/source/components/ResultView/PaySlip.css +++ b/source/components/ResultView/PaySlip.css @@ -6,7 +6,6 @@ .payslip__salaryTitle { grid-column-end: span 2; } - .payslip__cotisationsSection { display: grid; grid-template-columns: auto 8.2em 8.2em; @@ -49,7 +48,8 @@ font-weight: normal; } -.montant { +.payslip__salarySection .montant, +.payslip__cotisationsSection .montant { display: flex; align-items: flex-end; justify-content: flex-end; diff --git a/source/components/ResultView/PaySlip.js b/source/components/ResultView/PaySlip.js index 4261b73d5..6dac60b86 100644 --- a/source/components/ResultView/PaySlip.js +++ b/source/components/ResultView/PaySlip.js @@ -1,7 +1,7 @@ /* @flow */ import type { FicheDePaie } from './types' import { compose } from 'ramda' -import React, {Fragment} from 'react' +import React, { Fragment } from 'react' import { Trans } from 'react-i18next' import { connect } from 'react-redux' import withColours from '../withColours' @@ -10,7 +10,6 @@ import './PaySlip.css' import RuleLink from './RuleLink' import { ficheDePaieSelector } from './selectors' - type ConnectedPropTypes = FicheDePaie & { colours: { lightestColour: string } } @@ -34,7 +33,7 @@ const PaySlip = ({ Nombre d'heures travaillées :{' '} - {nombreHeuresTravaillées} + {nombreHeuresTravaillées}

{/* Section salaire brut */}
@@ -135,22 +134,21 @@ const PaySlip = ({

- Pour plus d'informations concernant votre bulletin de paie, - rendez vous sur  + Pour plus d'informations concernant votre bulletin de paie, rendez + vous sur  service-public.fr - +

- - Le simulateur vous aide à comprendre votre bulletin de paie, - sans lui être opposable. Il ne prend pour l'instant pas en - compte les conventions et accords collectifs, ni la myriade - d'aides à explorer sur - aides-entreprises.fr. + + Le simulateur vous aide à comprendre votre bulletin de paie, sans lui + être opposable. Il ne prend pour l'instant pas en compte les + conventions et accords collectifs, ni la myriade d'aides à explorer + sur aides-entreprises.fr.

diff --git a/source/components/ResultView/ResultView.css b/source/components/ResultView/ResultView.css index d2898eb20..191af70f4 100644 --- a/source/components/ResultView/ResultView.css +++ b/source/components/ResultView/ResultView.css @@ -1,11 +1,25 @@ -.result-view-header { - display: flex; - align-items: center; - flex-wrap: wrap; +.result-view__tabs { + display: inline-block; + box-shadow: 0 -1px 0 0 #d4d4d5, 1px 0 0 0 #d4d4d5, -1px 0 0 0 #d4d4d5; + border-top-right-radius: 0.6em; + border: none; + border-top-left-radius: 0.6em; + margin-top: 2em; + margin-bottom: -1px; + border-bottom: 1px solid transparent; +} +.result-view__tabs button { + padding: 1em; + border-right: 1px solid #d4d4d5; +} +.result-view__tabs button.selected { + border-bottom: 1px solid white; +} +.result-view__tabs button:last-of-type { + border-right: none; } -.result-view-header h2 { - flex: 1; - flex-shrink: 0; - white-space: nowrap; +.result-view__body { + border-top-left-radius: 0; + margin-bottom: 2em; } diff --git a/source/components/ResultView/ResultView.js b/source/components/ResultView/ResultView.js index 96cca2e47..1e489e678 100644 --- a/source/components/ResultView/ResultView.js +++ b/source/components/ResultView/ResultView.js @@ -3,7 +3,7 @@ import React, { PureComponent } from 'react' import { Trans } from 'react-i18next' import { connect } from 'react-redux' -import Button from '../ui/Button' +import { SimpleButton } from '../ui/Button' import Card from '../ui/Card' import Distribution from './Distribution' import PaySlip from './PaySlip' @@ -27,24 +27,22 @@ class ResultView extends PureComponent { } render() { return ( - -
-

- {resultViewTitle[this.state.resultView]} -

- {this.state.resultView === 'distribution' ? ( - - ) : ( - - )} + <> +
+ {['distribution', 'payslip'].map(resultView => ( + this.setState({ resultView })}> + {resultViewTitle[resultView]} + + ))} +
- {this.state.resultView === 'payslip' ? : } - + + {this.state.resultView === 'payslip' ? : } + + ) } } diff --git a/source/components/TargetSelection.js b/source/components/TargetSelection.js index af5c7b463..35f7ce2ab 100644 --- a/source/components/TargetSelection.js +++ b/source/components/TargetSelection.js @@ -7,6 +7,11 @@ import { Trans, translate } from 'react-i18next' import { connect } from 'react-redux' import { Link } from 'react-router-dom' import { change, Field, formValueSelector, reduxForm } from 'redux-form' +import { + analysisWithDefaultsSelector, + flatRulesSelector, + noUserInputSelector +} from 'Selectors/analyseSelectors' import BlueButton from './BlueButton' import CurrencyInput from './CurrencyInput/CurrencyInput' import ProgressCircle from './ProgressCircle/ProgressCircle' @@ -26,12 +31,6 @@ export let popularTargetNames = [ 'contrat salarié . salaire . net imposable' ] -import { - flatRulesSelector, - noUserInputSelector, - analysisWithDefaultsSelector -} from 'Selectors/analyseSelectors' - @translate() @reduxForm({ form: 'conversation', @@ -80,13 +79,9 @@ export default class TargetSelection extends Component { Estimation approximative -
- - pour une situation par défaut (CDI non cadre). -

- Commencer la simulation + Continuer
)} diff --git a/source/components/conversation/FoldedSteps.js b/source/components/conversation/FoldedSteps.js index a8811fbe3..a36117103 100644 --- a/source/components/conversation/FoldedSteps.js +++ b/source/components/conversation/FoldedSteps.js @@ -1,4 +1,3 @@ -// css in conversation.Css import { isEmpty } from 'ramda' import React, { Component } from 'react' import { Trans, translate } from 'react-i18next' @@ -8,7 +7,7 @@ import { reset } from 'redux-form' import { flatRulesSelector } from 'Selectors/analyseSelectors' import { resetSimulation } from '../../actions' import { LinkButton, SimpleButton } from '../ui/Button' -import Card from '../ui/Card' +import './conversation.css' import FoldedStep from './FoldedStep' @connect( @@ -33,19 +32,17 @@ export default class FoldedSteps extends Component { if (isEmpty(foldedSteps || [])) return null return ( - -
-
- -