hack css for socialPermission radio input

Author: dipamsen

src/components/PassengerShowcaseForm.js

@@ -146,6 +146,12 @@ const PassengerShowcaseForm = () => {
       );
       return;
     }
+    if (e.target.name === 'socialPermission') {
+      setState(
+        Object.assign({}, state, { [e.target.name]: e.target.value == 'true' })
+      );
+      return;
+    }
     setState(Object.assign({}, state, { [e.target.name]: e.target.value }));
   };
 
@@ -357,27 +363,29 @@ const PassengerShowcaseForm = () => {
             submission.)
           </span>
         </label>
+        <label>Social media permission</label>
         <label>
-          Social media permission
-          <input
-            type="radio"
-            name="socialPermission"
-            value={true}
-            checked={state.socialPermission === true}
-            onChange={onChange}
-          />
-          <span>
+          <span className={css.radioLabel}>
+            <input
+              type="radio"
+              name="socialPermission"
+              value="true"
+              checked={state.socialPermission}
+              onChange={onChange}
+            />
             The Cafe Car: You have my permission to share this project to other
             Coding Train social media platforms!
           </span>
-          <input
-            type="radio"
-            name="socialPermission"
-            value={false}
-            checked={state.socialPermission === false}
-            onChange={onChange}
-          />
-          <span>
+        </label>
+        <label>
+          <span className={css.radioLabel}>
+            <input
+              type="radio"
+              name="socialPermission"
+              value="false"
+              checked={!state.socialPermission}
+              onChange={onChange}
+            />
             By private carriage: I prefer this project to be featured on the
             Coding Train website only.
           </span>

src/components/PassengerShowcaseForm.module.css

@@ -15,6 +15,14 @@
     max-width: 500px;
     font-size: var(--maru-small);
     line-height: 17px;
+
+    &.radio-label {
+      /* display: inline; */
+      margin-right: var(--spacing-small);
+      color: var(--black);
+      font-size: var(--maru-medium);
+      max-width: 500px;
+    }
   }
 }
 
@@ -30,6 +38,12 @@
   padding: var(--spacing-small);
 }
 
+.form input[type="radio"] {
+  display: inline;
+  margin-right: var(--spacing-small);
+  -webkit-appearance: radio;
+}
+
 .error,
 .submitted {
   max-width: 500px;