🎨 Redesign du PeriodSwitch

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);
 }

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>
 	)
 })

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