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.

2 files changed, 46 insertions, 22 deletions

diff --git a/src/components/InputTypes/Radio.tsx b/src/components/InputTypes/Radio.tsx
index d95dcdd..5e37c57 100644
--- a/src/components/InputTypes/Radio.tsx
+++ b/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>
     );
 }
diff --git a/src/components/InputTypes/index.tsx b/src/components/InputTypes/index.tsx
index 85634cc..ee92ef1 100644
--- a/src/components/InputTypes/index.tsx
+++ b/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: