Improve the styles on the radio component to make it easier to use

Increases the click area, the visibility that an option has been
selected, and the visibility that an item has been hovered on.

Additionally, adds an instruction ahead of the component instructing
users to select an option incase it was no longer clear that the field
is a radio select.

src/components/InputTypes/Radio.tsx

@@ -1,40 +1,61 @@
 /** @jsx jsx */
 import { jsx, css } from "@emotion/react";
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 import colors from "../../colors";
-import { multiSelectInput, hiddenInput } from "../../commonStyles";
 
 interface RadioProps {
     option: string,
     question_id: string,
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    onBlurHandler: () => void
+    onBlurHandler: () => void,
+    index: number,
 }
 
-const styles = css`
-  div {
-    width: 0.7em;
-    height: 0.7em;
-    top: 0.18rem;
+const containerStyles = css`
+position: relative;
+margin-bottom: 10px;
+`;
 
-    border-radius: 50%;
-  }
+const inputStyles = css`
+position: absolute;
+opacity: 0;
+&:checked + label {
+    background-color: ${colors.success};
+}
+`;
 
-  :hover div, :focus-within div {
-    background-color: lightgray;
-  }
+const labelStyles = css`
+display: flex;
+align-items: center;
+background-color: ${colors.darkerGreyple};
+padding: 10px;
+border-radius: 5px;
+cursor: pointer;
+transition: background-color 0.25s ease, transform 0.25s ease;
+transform: none;
 
-  input:checked+div {
-    background-color: ${colors.blurple};
-  }
+:hover {
+    background-color: ${colors.greyple};
+    transform: translateX(5px);
+}
 `;
 
 export default function Radio(props: RadioProps): JSX.Element {
+  const calculatedID = `${props.question_id}-${props.index}`;
+
     return (
-        <label css={styles}>
-            <input type="radio" name={props.question_id} onChange={props.handler} css={hiddenInput} onBlur={props.onBlurHandler}/>
-            <div css={multiSelectInput}/>
-            {props.option}<br/>
-        </label>
+        <div css={containerStyles}>
+            <input
+                type="radio"
+                id={calculatedID}
+                name={props.question_id}
+                onChange={props.handler}
+                css={inputStyles}
+                onBlur={props.onBlurHandler}
+            />
+            <label htmlFor={calculatedID} css={labelStyles}>
+                {props.option}
+            </label>
+        </div>
     );
 }

src/components/InputTypes/index.tsx

@@ -45,7 +45,10 @@ export default function create_input(
             break;
 
         case QuestionType.Radio:
-            result = options.map((option, index) => <Radio option={option} question_id={question.id} handler={handler} key={index} onBlurHandler={onBlurHandler}/>);
+            result = [
+                <p key={"instruction"}>Select one option:</p>,
+                ...options.map((option, index) => <Radio option={option} index={index} question_id={question.id} handler={handler} key={index} onBlurHandler={onBlurHandler}/>)
+            ];
             break;
 
         case QuestionType.Select: