From 00413b168eea89c0662887f1ec31c31a38bd8884 Mon Sep 17 00:00:00 2001
From: Joe Banks <joe@jb3.dev>
Date: Wed, 10 Jul 2024 02:43:10 +0100
Subject: 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 | 63 ++++++++++++++++++++++++-------------
 src/components/InputTypes/index.tsx |  5 ++-
 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:
-- 
cgit v1.2.3