diff --git a/source/components/PeriodSwitch.css b/source/components/PeriodSwitch.css index a11a818b5..21a9b95c4 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: 0.3em; + 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: 0.3em; + padding: 0 0.6em; + color: white; } -input[type='radio']:checked + span { - background: #297da1; - background: var(--colour); +#PeriodSwitch .radioText:hover { + text-decoration: underline; +} + +#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); + text-decoration: none; } 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 (
- - {emoji('⏳')} - + + + +
) }) 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