🖋️🎨 remplace 'valider' par 'suivant' et réaligne le bouton avec les possibilités dans le cas d'une question oui / non

source/components/PaySlipSections.js

@@ -50,7 +50,7 @@ export let SalaireNetSection = ({ getRule }) => {
 					{/* Avantages en nature */}
 					<Line negative rule={avantagesEnNature} />
 					{/* Salaire net */}
-					<Line negative rule={getRule('contrat salarié . salaire . net')} />
+					<Line rule={getRule('contrat salarié . salaire . net')} />
 				</>
 			) : null}
 			<Line negative rule={getRule('impôt . neutre')} />

source/components/conversation/SendButton.js

@@ -26,18 +26,19 @@ export default compose(withTranslation())(
 			return (
 				<span
 					css={`
+						margin-left: 1rem;
 						.keyIcon {
 							opacity: 0;
 						}
 						${!disabled &&
 							`
 							@media (hover) {
-							
+
 							:hover .keyIcon {
 							opacity: 1
 							}
-							
-							
+
+
 							}`}
 					`}
 					className="sendWrapper">
@@ -46,7 +47,7 @@ export default compose(withTranslation())(
 						disabled={disabled}
 						onClick={() => this.getAction()('accept')}>
 						<span className="text">
-							<Trans>valider</Trans> ✓
+							<Trans>Suivant →</Trans>
 						</span>
 					</button>
 					<span className="keyIcon">

source/components/conversation/TextArea.js

@@ -1,57 +0,0 @@
-import { compose } from 'ramda';
-import React, { Component } from 'react';
-import { Trans, withTranslation } from 'react-i18next';
-import { FormDecorator } from './FormDecorator';
-
-export default compose(
-	FormDecorator('text-area'),
-	withTranslation()
-)(
-	class Input extends Component {
-		render() {
-			let {
-					name,
-					input,
-					submit,
-					attributes,
-					meta: { touched, error },
-					themeColours
-				} = this.props,
-				inputError = touched && error,
-				sendButtonDisabled = !input.value || inputError
-
-			return (
-				<span>
-					<span className="answer">
-						<textarea
-							{...attributes}
-							{...input}
-							id={'step-' + name}
-							onKeyDown={
-								({ key, ctrlKey }) =>
-									key == 'Enter' &&
-									ctrlKey &&
-									input.value &&
-									(!error ? submit() : input.onBlur()) // blur will trigger the error
-							}
-						/>
-						<button
-							className="ui__ button plain"
-							style={{
-								visibility: sendButtonDisabled ? 'hidden' : 'visible',
-								color: themeColours.textColour,
-								background: themeColours.colour
-							}}
-							onClick={() => (!error ? submit() : null)}>
-							<span className="text">
-								<Trans>valider</Trans>
-							</span>
-							<span className="icon">✓</span>
-						</button>
-					</span>
-					{inputError && <span className="step-input-error">{error}</span>}
-				</span>
-			)
-		}
-	}
-)

source/components/conversation/conversation.css

@@ -98,12 +98,20 @@
 
 .step fieldset {
 	margin: 0.8em 0;
+	display: flex;
+	justify-content: flex-end;
+	flex-wrap: wrap;
+	align-items: baseline;
 }
 
 .step fieldset ul {
 	list-style-type: none;
 }
 
+.step fieldset > ul:not(.binaryQuestionList) {
+	width: 100%;
+}
+
 .step.question .variant {
 	margin-bottom: 1em;
 }
@@ -325,6 +333,9 @@
 	margin-left: 0.3em;
 }
 
+.select-answer.commune {
+	flex: 1;
+}
 .select-answer.commune .Select {
 	width: 50%;
 }

source/locales/en.yaml

@@ -5,8 +5,7 @@ previousSimulationBanner:
 Première estimation: First estimate
 Commencer la simulation: Start simulation
 selectMany: You may pick more than one
-Valider: Accept
-valider: accept
+Suivant: Next
 votre réponse: answer here
 reset: Start over
 resetAll: Discard answers