restyle telemetry radio buttons like in WWW

src/components/telemetry-modal/telemetry-modal.css

@@ -3,6 +3,12 @@
 @import "../../css/typography.css";
 @import "../../css/z-index.css";
 
+/* from scratch-www */
+$active-gray: hsla(0, 0%, 0%, .1);
+$ui-blue-10percent: hsla(215, 100%, 65%, .1);
+$ui-blue-25percent:  hsla(215, 100%, 65%, .25);
+$ui-gray: hsla(0, 0%, 95%, 1);
+
 .modal-overlay {
     position: fixed;
     top: 0;
@@ -44,15 +50,60 @@
     text-decoration: none;
 }
 
-.radioButtons {
-    justify-content: center;
-    width: fit-content;
-}
-
 /* stack the radio buttons vertically, not horizontally */
 .radioButtons label {
     display: block;
     margin: 0.5rem;
+    transition: all .125s ease;
+    background-color: $ui-gray;
+    border-radius: .5rem;
+    margin: 0 auto 0.375rem;
+    padding-left: 0.8125rem;
+    align-items: center;
+    padding: 1rem;
+    vertical-align: middle;
+}
+
+.radioButtons label:hover {
+    background-color: $ui-blue-10percent;
+}
+
+.radioButtons label.labelSelected,
+.radioButtons label.labelSelected:hover {
+    background-color: $ui-blue-25percent;
+}
+
+.radioButtons input[type="radio"] {
+    margin: -1px 0.75rem 1px 0;
+    border: 1px solid $active-gray;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    appearance: none;
+    background-color: $ui-white;
+    vertical-align: middle;
+}
+
+.radioButtons input[type="radio"]:checked,
+.radioButtons input[type="radio"]:focus {
+    box-shadow: 0 0 0 2px $ui-blue-25percent;
+    outline: none;
+}
+
+.radioButtons input[type="radio"]:checked {
+    transition: all .25s ease;
+    background-color: $ui-white;
+    border: 1px solid $motion-primary;
+}
+
+.radioButtons input[type="radio"]:checked::after {
+    display: block;
+    transform: translate(.125rem, .125rem);
+    border-radius: 50%;
+    background-color: $motion-primary;
+    width: .625rem;
+    height: .625rem;
+    content: "";
 }
 
 /* Confirmation buttons at the bottom of the modal */

src/components/telemetry-modal/telemetry-modal.jsx

@@ -87,6 +87,8 @@ class TelemetryModal extends React.PureComponent {
     }
     render () {
         const isUndecided = (typeof this.props.isTelemetryEnabled !== 'boolean');
+        const isOff = (this.props.isTelemetryEnabled === false);
+        const isOn = (this.props.isTelemetryEnabled === true);
         return (<ReactModal
             isOpen
             className={styles.modalContent}
@@ -114,7 +116,7 @@ class TelemetryModal extends React.PureComponent {
                         }}
                     /></p>
                     <Box className={styles.radioButtons}>
-                        <label>
+                        <label className={isOn ? styles.labelSelected : null}>
                             <input
                                 name="optInOut"
                                 type="radio"
@@ -125,7 +127,7 @@ class TelemetryModal extends React.PureComponent {
                             />
                             <FormattedMessage {...messages.optInText} />
                         </label>
-                        <label>
+                        <label className={isOff ? styles.labelSelected : null}>
                             <input
                                 name="optInOut"
                                 type="radio"