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: