🎨 zone les résultats et les questions répondues

source/components/Explanation.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import './Explanation.css'
-import withColours from './withColours'
 import ResultView from './ResultView/ResultView'
+import Card from './ui/Card'
+import withColours from './withColours'
 
 @translate()
 @withColours
@@ -10,22 +11,23 @@ export default class Explanation extends Component {
 	render() {
 		return (
 			<section id="explanation">
-				<ResultView />
-				<div id="warning">
-					<p>
-						<i className="fa fa-info-circle" aria-hidden="true" />
-						<Trans i18nKey="disclaimer">
-							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
-						</Trans>
-						<a href="https://www.aides-entreprises.fr" target="_blank">
-							{' '}
-							aides-entreprises.fr
-						</a>.
-					</p>
-				</div>
+				<Card>
+					<ResultView />
+					<div id="warning">
+						<p>
+							<i className="fa fa-info-circle" aria-hidden="true" />
+							<Trans i18nKey="disclaimer">
+								Le simulateur vous aide à comprendre votre bulletin de paie,
+								sans lui être opposable. Il ne prend pour l&apos;instant pas en
+								compte les conventions et accords collectifs, ni la myriade
+								d&apos;aides à explorer sur
+							</Trans>
+							<a href="https://www.aides-entreprises.fr">
+								aides-entreprises.fr
+							</a>.
+						</p>
+					</div>
+				</Card>
 			</section>
 		)
 	}

source/components/ResultView/Distribution.css

@@ -49,8 +49,6 @@
 	align-items: center;
 	color: rgba(0, 0, 0, 0.7);
 	padding: 0.4em 0;
-	position: absolute;
-	left: -8.5em;
 	padding-right: 1em;
 	justify-content: space-evenly;
 	width: 9em;

source/components/ResultView/PaySlip.js

@@ -9,16 +9,16 @@ import './PaySlip.css'
 import RuleLink from './RuleLink'
 import { ficheDePaieSelector } from './selectors'
 import type { FicheDePaie } from './types'
-import withLanguage from '../withLanguage';
 
-type ConnectedPropTypes = FicheDePaie & { colours: { lightestColour: string }, language: string }
+type ConnectedPropTypes = FicheDePaie & {
+	colours: { lightestColour: string }
+}
 
 const PaySlip = ({
 	salaireBrut,
 	avantagesEnNature,
 	salaireNet,
 	salaireDeBase,
-	language,
 	salaireChargé,
 	salaireNetImposable,
 	nombreHeuresTravaillées,
@@ -30,10 +30,10 @@ const PaySlip = ({
 }: ConnectedPropTypes) => (
 	<div className="payslip__container">
 		<div className="payslip__hourSection">
-			<Trans i18nKey="payslip.workinghours">Nombre d&apos;heures travaillées : </Trans>
-			{Intl.NumberFormat(language, {
-					maximumFractionDigits: 1,
-			}).format(nombreHeuresTravaillées)}
+			<Trans i18nKey="payslip.heures">
+				Nombre d&apos;heures travaillées :{' '}
+			</Trans>
+			{nombreHeuresTravaillées}
 		</div>
 		{/* Section salaire brut */}
 		<div className="payslip__salarySection">
@@ -150,7 +150,6 @@ const PaySlip = ({
 
 export default compose(
 	withColours,
-	withLanguage,
 	connect(
 		ficheDePaieSelector,
 		{}

source/components/ResultView/ResultView.js

@@ -16,7 +16,7 @@ type Props = {
 }
 
 const resultViewTitle = {
-	distribution: 'Où vont mes cotisations ?',
+	distribution: 'Mes cotisations',
 	payslip: 'Ma fiche de paie'
 }
 

source/components/ResultView/selectors.js

@@ -4,23 +4,23 @@ import { findRuleByDottedName } from 'Engine/rules'
 import { encodeRuleName } from 'Engine/rules.js'
 import {
 	add,
+	compose,
 	concat,
 	filter,
+	fromPairs,
 	groupBy,
 	map,
 	max,
-	fromPairs,
 	mergeWith,
 	mergeWithKey,
 	path,
 	pathOr,
-	without,
 	pipe,
 	prop,
 	reduce,
-	values,
 	sort,
-	compose
+	values,
+	without
 } from 'ramda'
 import { createSelector } from 'reselect'
 import {
@@ -228,8 +228,9 @@ function analysisToFicheDePaie(
 		salaireNetàPayer: règleAvecMontant(
 			'contrat salarié . salaire . net à payer'
 		),
-		nombreHeuresTravaillées:
+		nombreHeuresTravaillées: Math.round(
 			règleAvecMontant('contrat salarié . heures par semaine').montant * 4.33
+		)
 	}
 }
 
@@ -280,17 +281,23 @@ const répartition = (ficheDePaie: FicheDePaie): Répartition => {
 		rawRépartition[branche] = {
 			partPatronale:
 				rawRépartition[branche].partPatronale +
-				CSG.montant.partPatronale * REPARTITION_CSG[branche] / 100,
+				(CSG.montant.partPatronale * REPARTITION_CSG[branche]) / 100,
 			partSalariale:
 				rawRépartition[branche].partSalariale +
-				CSG.montant.partSalariale * REPARTITION_CSG[branche] / 100
+				(CSG.montant.partSalariale * REPARTITION_CSG[branche]) / 100
 		}
 	}
 	return {
 		// $FlowFixMe
-		répartition: compose(sort(byMontantTotal), Object.entries)(rawRépartition),
+		répartition: compose(
+			sort(byMontantTotal),
+			Object.entries
+		)(rawRépartition),
 		// $FlowFixMe
-		total: compose(reduce(mergeWith(add), 0), Object.values)(rawRépartition),
+		total: compose(
+			reduce(mergeWith(add), 0),
+			Object.values
+		)(rawRépartition),
 		// $FlowFixMe
 		cotisationMaximum: compose(
 			reduce(max, 0),

source/components/Sondage.js

@@ -1,17 +1,18 @@
 import React, { Component } from 'react'
-import './Sondage.css'
-import { connect } from 'react-redux'
-import ReactPiwik from './Tracker'
 import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-import Smiley from './SatisfactionSmiley'
-import TypeFormEmbed from './TypeFormEmbed'
-import withLanguage from './withLanguage'
 import { Trans, translate } from 'react-i18next'
-import withColours from './withColours'
+import { connect } from 'react-redux'
 import {
-	noUserInputSelector,
-	nextStepsSelector
+	nextStepsSelector,
+	noUserInputSelector
 } from 'Selectors/analyseSelectors'
+import Smiley from './SatisfactionSmiley'
+import './Sondage.css'
+import ReactPiwik from './Tracker'
+import TypeFormEmbed from './TypeFormEmbed'
+import { SimpleButton } from './ui/Button'
+import withColours from './withColours'
+import withLanguage from './withLanguage'
 
 @connect(state => ({
 	conversationStarted: state.conversationStarted,
@@ -100,12 +101,12 @@ export default class Sondage extends Component {
 									hoverColor="#f39c12"
 									onClick={this.onSmileyClick}
 								/>
-								<button
-									className="sondage__closeButton unstyledButton"
+								<SimpleButton
+									className="sondage__closeButton"
 									onClick={this.handleClose}
 									aria-label="close">
 									X
-								</button>
+								</SimpleButton>
 							</div>
 						</div>
 					)}

source/components/conversation/FoldedSteps.js

@@ -1,14 +1,14 @@
 // css in conversation.Css
+import { isEmpty } from 'ramda'
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
 import { animateScroll, Element, scroller } from 'react-scroll'
 import { reset } from 'redux-form'
+import { flatRulesSelector } from 'Selectors/analyseSelectors'
 import { resetSimulation } from '../../actions'
 import { LinkButton, SimpleButton } from '../ui/Button'
-import { isEmpty } from 'ramda'
-
-import { flatRulesSelector } from 'Selectors/analyseSelectors'
+import Card from '../ui/Card'
 import FoldedStep from './FoldedStep'
 
 @connect(
@@ -33,17 +33,19 @@ export default class FoldedSteps extends Component {
 
 		if (isEmpty(foldedSteps || [])) return null
 		return (
-			<div id="foldedSteps">
-				<div className="header">
-					<LinkButton onClick={this.handleSimulationReset}>
-						<i className="fa fa-trash" aria-hidden="true" />
-						<Trans i18nKey="resetAll">Tout effacer</Trans>
-					</LinkButton>
+			<Card>
+				<div id="foldedSteps">
+					<div className="header">
+						<LinkButton onClick={this.handleSimulationReset}>
+							<i className="fa fa-trash" aria-hidden="true" />
+							<Trans i18nKey="resetAll">Tout effacer</Trans>
+						</LinkButton>
+					</div>
+					{foldedSteps.map(dottedName => (
+						<FoldedStep key={dottedName} dottedName={dottedName} />
+					))}
 				</div>
-				{foldedSteps.map(dottedName => (
-					<FoldedStep key={dottedName} dottedName={dottedName} />
-				))}
-			</div>
+			</Card>
 		)
 	}
 }

source/components/ui/Card.css

@@ -0,0 +1,7 @@
+.card {
+	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
+		0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -2px rgba(0, 0, 0, 0.12);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	padding: 0 1em;
+	border-radius: 0.6em;
+}

source/components/ui/Card.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import './Card.css'
+const Card = ({ children }) => <div className="card"> {children}</div>
+export default Card

source/locales/en.yaml

@@ -114,10 +114,11 @@ Part salariale: Employee share
 Total des retenues: Total withheld
 accidents du travail / maladies professionnelles: work accidents / occupational diseases
 autres: other
-Où vont mes cotisations ?: Where do my contributions go?
+Mes cotisations: My contributions
 Voir ma fiche de paie: View my payslip
 Voir la répartition des cotisations: View contribution breakdown
 Cotisations: Contributions
 Ma fiche de paie: My payslip
 payslip: 
-  notice: For further details on the payslip in France, you can go to <1>service-public.fr (french)</1>
+  notice: For further details on the payslip in France, you can go to <1>service-public.fr (french)</1>
+  heures: 'Number of hours worked: '