From 8e312ef4b6eabea64d0dd943625e72e41ce837a4 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 27 Mar 2019 17:05:27 +0100
Subject: [PATCH 1/2] :art: Redesign du PeriodSwitch

---
 source/components/PeriodSwitch.css | 39 ++++++++-----------
 source/components/PeriodSwitch.js  | 62 +++++++++++++++---------------
 source/locales/en.yaml             |  3 +-
 3 files changed, 48 insertions(+), 56 deletions(-)

diff --git a/source/components/PeriodSwitch.css b/source/components/PeriodSwitch.css
index a11a818b5..f750722fa 100644
--- a/source/components/PeriodSwitch.css
+++ b/source/components/PeriodSwitch.css
@@ -4,9 +4,13 @@
 	align-items: center;
 	justify-content: center;
 }
+#PeriodSwitch .base {
+	background: var(--colour);
+	border-radius: 1em;
+	padding: 0.4em;
+}
 
 #PeriodSwitch label {
-	margin: 0 0.4em;
 	color: var(--colour);
 }
 
@@ -15,29 +19,20 @@
 	left: -100%;
 }
 
-input[type='radio'] + span {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	margin: 0 0.3em;
-	vertical-align: middle;
-	border-radius: 20px;
-	cursor: pointer;
-	box-shadow: 0 0 0px 1px #297da1;
-	box-shadow: 0 0 0px 1px var(--colour);
-}
-input[type='radio'] ~ span {
+#PeriodSwitch .radioText {
 	cursor: pointer;
+	border-radius: 1em;
+	padding: 0 0.6em;
+	color: white;
 }
 
-input[type='radio']:checked + span {
-	background: #297da1;
-	background: var(--colour);
+#PeriodSwitch .radioText:hover {
+	border-bottom: 1px solid white;
+	border-radius: 0;
+}
+
+#PeriodSwitch input[type='radio']:checked + .radioText {
+	background: white;
 	border: 4px solid white;
-}
-input[type='radio']:focus ~ .radioText {
-	border: 1px dotted gray;
-}
-input[type='radio']:checked ~ .radioText {
-	font-weight: 500;
+	color: var(--colour);
 }
diff --git a/source/components/PeriodSwitch.js b/source/components/PeriodSwitch.js
index da8dd46c4..075542cf5 100644
--- a/source/components/PeriodSwitch.js
+++ b/source/components/PeriodSwitch.js
@@ -54,38 +54,36 @@ export default compose(
 	})
 	return (
 		<div id="PeriodSwitch">
-			<label>
-				<Field
-					name="période"
-					component="input"
-					type="radio"
-					value="mois"
-					onChange={() =>
-						updateSituation('mois', batchPeriodChange, situation, rules)
-					}
-				/>
-				<span />
-				<span className="radioText">
-					<Trans>Mois</Trans>
-				</span>
-			</label>
-			<span style={{ fontSize: '1.5em' }}>{emoji('⏳')}</span>
-			<label>
-				<Field
-					name="période"
-					component="input"
-					type="radio"
-					value="année"
-					onChange={() =>
-						updateSituation('année', batchPeriodChange, situation, rules)
-					}
-				/>
-				<span />
-
-				<span className="radioText">
-					<Trans>Année</Trans>
-				</span>
-			</label>
+			<span className="base ui__ card">
+				<label>
+					<Field
+						name="période"
+						component="input"
+						type="radio"
+						value="mois"
+						onChange={() =>
+							updateSituation('mois', batchPeriodChange, situation, rules)
+						}
+					/>
+					<span className="radioText">
+						<Trans>mois</Trans>
+					</span>
+				</label>
+				<label>
+					<Field
+						name="période"
+						component="input"
+						type="radio"
+						value="année"
+						onChange={() =>
+							updateSituation('année', batchPeriodChange, situation, rules)
+						}
+					/>
+					<span className="radioText">
+						<Trans>année</Trans>
+					</span>
+				</label>
+			</span>
 		</div>
 	)
 })
diff --git a/source/locales/en.yaml b/source/locales/en.yaml
index e1969408f..43c67e72a 100644
--- a/source/locales/en.yaml
+++ b/source/locales/en.yaml
@@ -558,9 +558,8 @@ Pas en auto entrepreneur: Not in auto-entrepreneur
 Précédent: Previous
 Choisir plus tard: Choose later
 
-Mois: Month
-Année: Year
 mois: month
+année: year
 an: year
 par: per
 Explorez notre documentation: Explore our documentation

From 688a94fcfdf3b21930fbe3572faf6603cd5444f3 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Wed, 27 Mar 2019 17:09:00 +0100
Subject: [PATCH 2/2] =?UTF-8?q?:art:=20PeriodSwitch=20carr=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/components/PeriodSwitch.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/components/PeriodSwitch.css b/source/components/PeriodSwitch.css
index f750722fa..21a9b95c4 100644
--- a/source/components/PeriodSwitch.css
+++ b/source/components/PeriodSwitch.css
@@ -6,7 +6,7 @@
 }
 #PeriodSwitch .base {
 	background: var(--colour);
-	border-radius: 1em;
+	border-radius: 0.3em;
 	padding: 0.4em;
 }
 
@@ -21,18 +21,18 @@
 
 #PeriodSwitch .radioText {
 	cursor: pointer;
-	border-radius: 1em;
+	border-radius: 0.3em;
 	padding: 0 0.6em;
 	color: white;
 }
 
 #PeriodSwitch .radioText:hover {
-	border-bottom: 1px solid white;
-	border-radius: 0;
+	text-decoration: underline;
 }
 
 #PeriodSwitch input[type='radio']:checked + .radioText {
 	background: white;
 	border: 4px solid white;
 	color: var(--colour);
+	text-decoration: none;
 }