From 19a8da8a3fdda75c3378156f62c54f4ec7f671d8 Mon Sep 17 00:00:00 2001
From: Johan Girod <johangirod@gmail.com>
Date: Fri, 24 Apr 2020 16:05:29 +0200
Subject: [PATCH] :art: correction de styles pour les simulateurs

- Corrige l'alignement des questions sur chrome (fix #967)
- Corrige l'affichage de l'aide sur mobile (fix #992)
---
 .../components/Documentation/References.css   |  3 ++-
 source/components/StackedBarChart.tsx         |  2 +-
 source/components/TargetSelection.css         |  4 ++--
 source/components/conversation/AnswerList.tsx |  1 -
 source/components/conversation/DateInput.tsx  | 12 +++++------
 source/components/conversation/Input.js       | 11 ++++------
 .../conversation/InputSuggestions.tsx         | 21 +++++++++++++------
 .../components/conversation/conversation.css  | 16 +++++++++-----
 source/locales/rules-en.yaml                  |  8 +++----
 source/rules/salarié.yaml                     |  4 ++--
 .../mon-entreprise.fr/pages/Coronavirus.tsx   |  6 +++---
 .../pages/Simulateurs/ArtisteAuteur.tsx       |  2 +-
 12 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/source/components/Documentation/References.css b/source/components/Documentation/References.css
index 511940ab2..dcaaebc3d 100644
--- a/source/components/Documentation/References.css
+++ b/source/components/Documentation/References.css
@@ -4,6 +4,7 @@
 }
 .references a {
 	flex: 1;
+	min-width: 45%;
 	text-decoration: underline;
 }
 
@@ -18,7 +19,7 @@
 	font-style: italic;
 }
 .references .imageWrapper {
-	width: 6rem;
+	width: 4.5rem;
 	height: 3rem;
 	display: flex;
 	align-items: center;
diff --git a/source/components/StackedBarChart.tsx b/source/components/StackedBarChart.tsx
index eb1bf3110..cee6f01a8 100644
--- a/source/components/StackedBarChart.tsx
+++ b/source/components/StackedBarChart.tsx
@@ -123,7 +123,7 @@ export function StackedBarChart({ data }: StackedBarChartProps) {
 				{dataWithPercentage.map(({ key, percentage, color, legend }) => (
 					<BarStackLegendItem key={key}>
 						<SmallCircle style={{ backgroundColor: color }} />
-						<strong>{legend}</strong>
+						{legend}
 						<strong>{percentage} %</strong>
 					</BarStackLegendItem>
 				))}
diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index 2b7fde3c5..d9ff00859 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -69,7 +69,7 @@
 	text-decoration: underline;
 }
 
-@media (min-width: 800px) {
+@media (min-width: 660px) {
 	#targetSelection {
 		font-size: 115%;
 	}
@@ -132,7 +132,7 @@
 }
 
 .light #targetSelection .optionTitle {
-	color: var(--darkestColor);
+	color: var(--darkColor);
 }
 
 #targetSelection .editableTarget {
diff --git a/source/components/conversation/AnswerList.tsx b/source/components/conversation/AnswerList.tsx
index 3ce6972d1..12dcae1a4 100644
--- a/source/components/conversation/AnswerList.tsx
+++ b/source/components/conversation/AnswerList.tsx
@@ -91,7 +91,6 @@ function StepsTable({
 							</td>
 							<td>
 								<span
-									className="answer"
 									css={`
 										display: inline-block;
 										padding: 0.6rem;
diff --git a/source/components/conversation/DateInput.tsx b/source/components/conversation/DateInput.tsx
index b89fef659..b0fe194ff 100644
--- a/source/components/conversation/DateInput.tsx
+++ b/source/components/conversation/DateInput.tsx
@@ -42,8 +42,8 @@ export default function DateInput({
 		[onChange]
 	)
 	return (
-		<>
-			<div css="width: 100%">
+		<div className="step input">
+			<div>
 				<InputSuggestions
 					suggestions={suggestions}
 					onFirstClick={value => {
@@ -51,17 +51,15 @@ export default function DateInput({
 					}}
 					onSecondClick={() => onSubmit?.('suggestion')}
 				/>
-			</div>
-			<div className="answer">
 				<DateStyledInput
-					className="ui__ input"
+					className="ui__ input suffixed"
 					type="date"
 					value={dateValue}
 					onChange={handleDateChange}
 				/>
-				{onSubmit && <SendButton disabled={!dateValue} onSubmit={onSubmit} />}
 			</div>
-		</>
+			{onSubmit && <SendButton disabled={!dateValue} onSubmit={onSubmit} />}
+		</div>
 	)
 }
 
diff --git a/source/components/conversation/Input.js b/source/components/conversation/Input.js
index 64a846358..2e268c480 100644
--- a/source/components/conversation/Input.js
+++ b/source/components/conversation/Input.js
@@ -26,7 +26,7 @@ export default function Input({
 
 	return (
 		<div className="step input">
-			<div css="width: 100%">
+			<div>
 				<InputSuggestions
 					suggestions={suggestions}
 					onFirstClick={value => {
@@ -35,9 +35,6 @@ export default function Input({
 					onSecondClick={() => onSubmit && onSubmit('suggestion')}
 					unit={unit}
 				/>
-			</div>
-
-			<div className="answer">
 				<NumberFormat
 					autoFocus={autoFocus}
 					className="suffixed"
@@ -56,10 +53,10 @@ export default function Input({
 				<label className="suffix" htmlFor={'step-' + dottedName}>
 					{serializeUnit(unit, value, language)}
 				</label>
-				{onSubmit && (
-					<SendButton disabled={value === undefined} onSubmit={onSubmit} />
-				)}
 			</div>
+			{onSubmit && (
+				<SendButton disabled={value === undefined} onSubmit={onSubmit} />
+			)}
 		</div>
 	)
 }
diff --git a/source/components/conversation/InputSuggestions.tsx b/source/components/conversation/InputSuggestions.tsx
index 75290bdcc..a90c036e8 100644
--- a/source/components/conversation/InputSuggestions.tsx
+++ b/source/components/conversation/InputSuggestions.tsx
@@ -11,19 +11,23 @@ type InputSuggestionsProps = {
 }
 
 export default function InputSuggestions({
-	suggestions,
+	suggestions = {},
 	onSecondClick = x => x,
 	onFirstClick,
 	unit
 }: InputSuggestionsProps) {
 	const [suggestion, setSuggestion] = useState<string | number>()
 	const { t } = useTranslation()
-	if (!suggestions) return null
 
 	return (
-		<div css="display: flex; align-items: baseline; ">
-			<small>Suggestions :</small>
-
+		<div
+			className="ui__ notice"
+			css={`
+				display: flex;
+				align-items: baseline;
+				margin-top: 0.2rem;
+			`}
+		>
 			{toPairs(suggestions).map(([text, value]: [string, number]) => {
 				const valueWithUnit: string = `${value} ${
 					unit ? serializeUnit(unit)?.replace(' / ', '/') : ''
@@ -32,7 +36,12 @@ export default function InputSuggestions({
 					<button
 						className="ui__ link-button"
 						key={value}
-						css="margin: 0 0.4rem !important"
+						css={`
+							margin: 0 0.4rem !important;
+							:first-child {
+								margin-left: 0rem !important;
+							}
+						`}
 						onClick={() => {
 							onFirstClick(valueWithUnit)
 							if (suggestion !== value) setSuggestion(valueWithUnit)
diff --git a/source/components/conversation/conversation.css b/source/components/conversation/conversation.css
index a44eed15e..5e875b2bb 100644
--- a/source/components/conversation/conversation.css
+++ b/source/components/conversation/conversation.css
@@ -68,6 +68,16 @@
 	z-index: -1;
 }
 
+.step.input {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: flex-end;
+}
+.step.input > :first-child {
+	text-align: right;
+}
+
 .step input[type='text'],
 .ui__.input {
 	border: 1px solid var(--color);
@@ -80,7 +90,7 @@
 	font-size: 120%;
 	padding: 0;
 	padding-right: 0.4em;
-	width: 10rem;
+	width: 12rem;
 	text-align: right;
 	padding-left: 0.2em;
 }
@@ -116,10 +126,6 @@
 	outline: none;
 }
 
-.answer {
-	margin-top: 0.6rem;
-}
-
 .step label.userAnswerButton {
 	border: 1px solid var(--color) !important;
 	text-transform: none !important;
diff --git a/source/locales/rules-en.yaml b/source/locales/rules-en.yaml
index aa7254bc7..f02cbd0fc 100644
--- a/source/locales/rules-en.yaml
+++ b/source/locales/rules-en.yaml
@@ -526,10 +526,10 @@ contrat salarié . CDD . congés non pris:
     fin du contrat.
   question.en: How many working days of paid leave will not be taken?
   question.fr: Combien de jours ouvrés de congés ne seront pas pris sur la durée du CDD ?
-  suggestions.10.en: '[automatic] 10'
-  suggestions.10.fr: '10'
-  suggestions.3.en: '[automatic] 3'
-  suggestions.3.fr: '3'
+  suggestions.10 jours.en: '[automatic] 10 days'
+  suggestions.10 jours.fr: 10 jours
+  suggestions.3 jours.en: '[automatic] 3 days'
+  suggestions.3 jours.fr: 3 jours
   titre.en: Untaken paid leave
   titre.fr: congés non pris
 contrat salarié . CDD . contrat jeune vacances:
diff --git a/source/rules/salarié.yaml b/source/rules/salarié.yaml
index 2c7c15942..99308a995 100644
--- a/source/rules/salarié.yaml
+++ b/source/rules/salarié.yaml
@@ -883,8 +883,8 @@ contrat salarié . CDD . congés non pris:
     Le contrat étant à durée déterminée, le salarié n'a pas forcément le temps de prendre tous les jours de congés qu'il a acquis comme tout salarié au cours du contrat.
     Par exemple, pour un contrat de 3 mois, le salarié acquiert 2,08 jours de congés par mois (25 jours / 12 mois = 2,08), donc 6,25 sur la durée du contrat. Or il se peut que l'entreprise le contraigne à n'en prendre que 4, donc 2,25 jours ne seront pas pris. Ils seront payés par l'employeur à la fin du contrat.
   suggestions:
-    3: 3
-    10: 10
+    3 jours: 3
+    10 jours: 10
   par défaut: 0 jour ouvré
   contrôles:
     - si: congés non pris > congés dus en jours ouvrés
diff --git a/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx b/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
index af9e29057..20901e8f5 100644
--- a/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Coronavirus.tsx
@@ -137,6 +137,7 @@ function ExplanationSection() {
 				id="targetSelection"
 				className="ui__ light card"
 				css={`
+					overflow: hidden;
 					margin: 1rem 0;
 				`}
 			>
@@ -315,7 +316,6 @@ function RowLabel(target: EvaluatedRule) {
 const ResultTable = styled.table`
 	width: 100%;
 	border-collapse: collapse;
-	margin-top: 5px;
 
 	&.ui__.mobile-version {
 		display: none;
@@ -345,13 +345,13 @@ const ResultTable = styled.table`
 
 	td {
 		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		padding: 8px 16px 0;
+		padding: 0.8rem 1rem 0;
 	}
 
 	td:first-child {
 		text-align: left;
 		p {
-			font-style: italic;
+			margin-top: 0.2rem;
 		}
 	}
 
diff --git a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
index 35f524ddf..c570d37f5 100644
--- a/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Simulateurs/ArtisteAuteur.tsx
@@ -83,7 +83,7 @@ function SimpleField({ dottedName }: SimpleFieldProps) {
 					<div className="header">
 						<label htmlFor={`step-${dottedName}`}>
 							<span className="optionTitle">{rule.question || rule.titre}</span>
-							<p>{rule.résumé}</p>
+							<p className="ui__ notice">{rule.résumé}</p>
 						</label>
 					</div>
 					<div className="targetInputOrValue">