🎨 Améliorations de l'UI du simulateur indeps

package.json

@@ -133,6 +133,7 @@
 		"mock-local-storage": "^1.0.5",
 		"nearley-loader": "^2.0.0",
 		"postcss-loader": "^2.1.2",
+		"prettier": "^1.15.3",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
 		"serve": "^10.0.2",
@@ -150,8 +151,8 @@
 		"workbox-webpack-plugin": "^3.6.1",
 		"yaml-loader": "^0.5.0"
 	},
-	"optionalDependencies":{
-		"prerender-spa-plugin": "^3.4.0",
-		"cypress": "^3.1.0"
+	"optionalDependencies": {
+		"cypress": "^3.1.0",
+		"prerender-spa-plugin": "^3.4.0"
 	}
 }

source/components/ComparativeSimulation.js

@@ -10,7 +10,6 @@ import {
 	nextStepsSelector,
 	analysisWithDefaultsSelector
 } from 'Selectors/analyseSelectors'
-import PeriodSwitch from 'Components/PeriodSwitch'
 import Controls from './Controls'
 import simulationConfig from './simulateur-rémunération-dirigeant.yaml'
 
@@ -66,7 +65,6 @@ export default compose(
 								<p>Vous avez atteint l'estimation la plus précise.</p>
 							</>
 						)}
-						<PeriodSwitch />
 						<ComparativeTargets />
 					</div>
 				</div>

source/components/ComparativeTargets.css

@@ -3,21 +3,29 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	flex-wrap: wrap;
 }
-#targets > .content > ul > li {
+#targets ul {
+	width: 100%;
+	display: flex;
+	justify-content: space-around;
+	align-items: center;
+	flex-wrap: wrap;
+}
+#targets li {
 	margin: 1em;
-	border-radius: 6px;
 	background: var(--colour);
 	padding: 1em;
-	width: 16em;
+	width: 12em;
 	display: flex;
-	justify-content: space-between;
+	justify-content: center;
 	align-items: center;
+	flex-wrap: wrap;
+	border-radius: 0.6em;
+	box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
 }
-#targets > .icon {
-	margin: 0 0.6em;
-	font-size: 200%;
-	color: var(--colour);
+#targets .title {
+	margin-bottom: 0.6em;
 }
 #targets .value {
 	font-size: 180%;

source/components/ComparativeTargets.js

@@ -8,6 +8,7 @@ import emoji from 'react-easy-emoji'
 import { compose } from 'ramda'
 import simulationConfig from './simulateur-rémunération-dirigeant.yaml'
 import AnimatedTargetValue from './AnimatedTargetValue'
+import PeriodSwitch from 'Components/PeriodSwitch'
 
 export default compose(
 	connect(state => ({
@@ -17,35 +18,43 @@ export default compose(
 )(
 	class ComparativeTargets extends React.Component {
 		render() {
+			let { colours, analyses } = this.props
 			return (
 				<div id="targets">
-					<div
-						className="content"
-						style={{ color: this.props.colours.textColour }}>
-						<ul>
-							{this.props.analyses.map((analysis, i) => {
-								let { title, nodeValue, dottedName } = analysis.targets[0],
-									name = simulationConfig.branches[i].nom
-								return (
-									<li key={name}>
-										{name}
-										<span className="figure">
-											<span className="value">
-												<AnimatedTargetValue value={nodeValue} />
-											</span>{' '}
-										</span>
-										<Link
-											title="Quel est calcul ?"
-											style={{ color: this.props.colours.colour }}
-											to={'/règle/' + dottedName}
-											className="explanation">
-											{emoji('📖')}
-										</Link>
-									</li>
-								)
-							})}
-						</ul>
-					</div>
+					<h3>{analyses[0].targets[0].title}</h3>
+					<PeriodSwitch />
+					<ul>
+						{analyses.map((analysis, i) => {
+							let { title, nodeValue, dottedName } = analysis.targets[0],
+								name = simulationConfig.branches[i].nom
+							return (
+								<li
+									style={{
+										color: colours.textColour,
+										background: `linear-gradient(
+							60deg,
+							${colours.darkColour} 0%,
+							${colours.colour} 100%
+						)`
+									}}
+									key={name}>
+									<span className="title">{name}</span>
+									<span className="figure">
+										<span className="value">
+											<AnimatedTargetValue value={nodeValue} />
+										</span>{' '}
+									</span>
+									<Link
+										title="Quel est calcul ?"
+										style={{ color: this.props.colours.colour }}
+										to={'/règle/' + dottedName}
+										className="explanation">
+										{emoji('📖')}
+									</Link>
+								</li>
+							)
+						})}
+					</ul>
 				</div>
 			)
 		}

source/components/simulateur-rémunération-dirigeant.yaml

@@ -14,7 +14,7 @@ branches:
       indépendant: oui
       micro entreprise: non
       contrat salarié: non
-  - nom: Régime général (assimilé salarié)
+  - nom: Assimilé salarié
     situation: 
       micro entreprise: non
       indépendant: non

source/règles/base.yaml

@@ -2557,6 +2557,7 @@
       - micro entreprise . revenu net de cotisations
 
 - nom: revenu net d'impôt
+  titre: Revenu net de cotisations et d'impôt
   période: flexible
   formule: revenu net de cotisations - impôt . impôt sur le revenu à payer
 

yarn.lock

@@ -6615,6 +6615,11 @@ prerender-spa-plugin@^3.4.0:
     "@prerenderer/renderer-puppeteer" "^0.2.0"
     html-minifier "^3.5.16"
 
+prettier@^1.15.3:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.15.3.tgz#1feaac5bdd181237b54dbe65d874e02a1472786a"
+  integrity sha512-gAU9AGAPMaKb3NNSUUuhhFAS7SCO4ALTN4nRIn6PJ075Qd28Yn2Ig2ahEJWdJwJmlEBTUfC7mMUSFy8MwsOCfg==
+
 pretty-bytes@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"