Rewrites Radios

Rewrites radios to be more fitting with the general theme and style, and
 to be more consistent across browsers.

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 23 insertions, 2 deletions

diff --git a/src/components/InputTypes/Radio.tsx b/src/components/InputTypes/Radio.tsx
index be0f60e..3bf13ed 100644
--- a/src/components/InputTypes/Radio.tsx
+++ b/src/components/InputTypes/Radio.tsx
@@ -1,6 +1,8 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
 import React, { ChangeEvent } from "react";
+import colors from "../../colors";
+import { multiSelectInput, hiddenInput } from "../../commonStyles";
 
 interface RadioProps {
     option: string,
@@ -8,10 +10,29 @@ interface RadioProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void
 }
 
+const styles = css`
+  div {
+    width: 0.7em;
+    height: 0.75em;
+    top: 0.18rem;
+
+    border-radius: 50%;
+  }
+
+  :hover div, :focus-within div {
+    background-color: lightgray;
+  }
+
+  input:checked+div {
+    background-color: ${colors.blurple};
+  }
+`;
+
 export default function Radio(props: RadioProps): JSX.Element {
     return (
-        <label>
-            <input type="radio" name={props.question_id} css={css`margin: 1rem 0.5rem 0 0;`} onChange={props.handler}/>
+        <label css={styles}>
+            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput}/>
+            <div css={multiSelectInput}/>
             {props.option}<br/>
         </label>
     );