Add visual design tweaks (#8)

* Add visual design tweaks for window styles

* Fix typo in pre-commit hook

* Refine form element visual design:

- Spacing, sizing and contrast
- Colours and animations

* Add small visual changes to Copy button

Author: AJGeel

Taskfile

@@ -103,7 +103,7 @@ function task:pre-commit { ## Clean up code before committing
 	task:prettier
 	task:eslint
 	task:typescript
-	title "Comitting"
+	title "Committing"
 }
 
 # =========================================================

src/app/globals.css

@@ -19,6 +19,7 @@ body {
 pre {
 	tab-size: 4;
 	font-family: var(--font-code), monospace;
+	font-size: 0.94rem;
 }
 
 a {

src/components/Form/Checkbox/Checkbox.tsx

@@ -11,18 +11,18 @@ type Props = {
 	options?: RegisterOptions;
 };
 
-const RadioInput = ({ name, children, options }: Props): ReactElement => {
+const CheckboxInput = ({ name, children, options }: Props): ReactElement => {
 	const { register } = useFormContext();
 
 	return (
 		<>
 			<label className={styles.checkbox}>
 				<input {...register(name, options)} name={name} type="checkbox" />
-				<span>{children}</span>
+				<span className={styles.label}>{children}</span>
 			</label>
 			<FormError name={name} />
 		</>
 	);
 };
 
-export default RadioInput;
+export default CheckboxInput;

src/components/Form/Checkbox/checkbox.module.css

@@ -1,6 +1,6 @@
 .checkbox {
 	position: relative;
-	font-size: 1.1rem;
+	font-size: 1rem;
 }
 
 .checkbox input {
@@ -13,11 +13,11 @@
 .checkbox span {
 	position: relative;
 	display: block;
-	padding: 0.3rem 0.5rem 0.3rem 2rem;
+	padding: 0.5rem 0.5rem 0.5rem 2rem;
 	background-color: #f0f0f0;
-	border-radius: 0.1rem;
+	border-radius: 0.4rem;
 	cursor: pointer;
-	transition: background-color 500ms;
+	transition: background-color 300ms ease-in-out;
 }
 
 .checkbox span:hover {
@@ -27,14 +27,28 @@
 .checkbox span::before {
 	content: '';
 	background-color: #fff;
-	width: 20px;
-	height: 20px;
+	width: 18px;
+	height: 18px;
 	position: absolute;
 	top: 50%;
-	left: 5px;
+	left: 0.4rem;
 	transform: translateY(-50%);
+	border-radius: 0.2rem;
+	transition: background-color 300ms ease-in-out;
+}
+
+.checkbox span::after {
+	content: '';
+	width: 12px;
+	height: 12px;
+	position: absolute;
+	top: 50%;
+	left: 9px;
+	transform: translateY(-50%) scale(0.5);
 	border-radius: 0.1rem;
-	transition: background-color 250ms;
+	transition:
+		background-color 150ms ease-in-out,
+		transform 150ms ease-in-out;
 }
 
 .checkbox input:focus + span,
@@ -43,13 +57,10 @@
 }
 
 .checkbox input:checked + span::after {
-	content: '';
 	background-color: #2ac93f;
-	width: 14px;
-	height: 14px;
-	position: absolute;
-	top: 50%;
-	left: 8px;
-	transform: translateY(-50%);
-	border-radius: 0.1rem;
+	transform: translateY(-50%) scale(1);
+}
+
+.label {
+	user-select: none;
 }

src/components/Form/Radio/Radio.tsx

@@ -22,8 +22,8 @@ const RadioInput = ({ name, title, options, choices, flat = false }: Props): Rea
 	const { register } = useFormContext();
 
 	return (
-		<div className={styles.container}>
-			<span>{title}</span>
+		<div>
+			<span className={styles.title}>{title}</span>
 			<div className={`${styles.options} ${flat && styles.flat}`}>
 				{choices.map((radio) => (
 					<label key={radio.value}>

src/components/Form/Radio/radio.module.css

@@ -9,8 +9,15 @@
 	flex-direction: column;
 }
 
+.title {
+	font-weight: 600;
+	display: inline-block;
+	margin-bottom: 0.4rem;
+}
+
 .option {
-	font-size: 1.1rem;
+	font-size: 1rem;
+	user-select: none;
 }
 
 .option input {
@@ -23,11 +30,11 @@
 .option span {
 	position: relative;
 	display: block;
-	padding: 0.3rem 0.5rem 0.3rem 2rem;
+	padding: 0.5rem 1rem 0.5rem 2rem;
 	background-color: #f0f0f0;
-	border-radius: 0.2rem;
+	border-radius: 0.4rem;
 	cursor: pointer;
-	transition: background-color 500ms;
+	transition: background-color 300ms ease-in-out;
 }
 
 .option span:hover {
@@ -46,19 +53,30 @@
 	border-radius: 50%;
 }
 
+.option span::after {
+	content: '';
+	width: 0.75rem;
+	height: 0.75rem;
+	position: absolute;
+	top: 50%;
+	left: 0.6rem;
+	transform: translateY(-50%) scale(0.5);
+	border-radius: 50%;
+	transition:
+		background-color 150ms ease-in-out,
+		transform 150ms ease-in-out;
+}
+
 .option input:focus + span,
 .option input:active + span {
 	outline: 0.2rem solid #a1e1aa;
 }
 
+.option input:checked + span {
+	background: #a1e1aa76;
+}
+
 .option input:checked + span::after {
-	content: '';
 	background-color: #2ac93f;
-	width: 0.8rem;
-	height: 0.8rem;
-	position: absolute;
-	top: 50%;
-	left: 0.6rem;
-	transform: translateY(-50%);
-	border-radius: 50%;
+	transform: translateY(-50%) scale(1);
 }

src/components/Form/form.module.css

@@ -8,6 +8,12 @@
 	display: block;
 }
 
+.title {
+	font-weight: 600;
+	display: inline-block;
+	margin-bottom: 0.4rem;
+}
+
 .input {
 	display: block;
 	position: relative;
@@ -16,7 +22,7 @@
 	border-radius: 0.2rem;
 	border: 0;
 	width: 100%;
-	font-size: 1.1rem;
+	font-size: 1rem;
 	font-family: var(--font-text), sans-serif;
 }
 
@@ -27,5 +33,7 @@
 
 .error {
 	display: block;
-	color: #d00000;
+	font-size: 1rem;
+	color: #b43232;
+	margin-top: 0.4rem;
 }

src/components/Generator/GeneredTaskfile/Copy/Copy.tsx

@@ -20,7 +20,7 @@ const CopyToClipboard = ({ onCopy }: CopyProps): ReactElement => {
 
 	return (
 		<button type="button" className={`${styles.button} ${isCopied && styles.copied}`} onClick={onClick}>
-			{isCopied ? 'copied!' : 'copy'}
+			{isCopied ? 'Copied!' : 'Copy'}
 		</button>
 	);
 };

src/components/Generator/GeneredTaskfile/Copy/copy.module.css

@@ -2,27 +2,26 @@
 	position: sticky;
 	top: 0;
 	float: right;
-	background-color: #202020;
-	color: #505050;
-	border: 0.2rem solid #505050;
-	padding: 0.5rem 0;
+	background-color: #10001fc2;
+	color: rgb(255 255 255 / 0.5);
+	border: 0.1rem solid rgb(255 255 255 / 0.5);
+	padding: 1rem;
 	border-radius: 0.2rem;
 	cursor: pointer;
-	width: 5rem;
-	height: 5rem;
+	width: 5.5rem;
 	font-size: 1rem;
-	font-weight: 700;
 	transition:
-		color 500ms,
-		border 500ms;
+		color 300ms ease-in-out,
+		border 300ms ease-in-out;
 }
 
 .button:hover {
 	color: #fff;
 	border-color: #fff;
 }
 
-.copied {
-	color: #2ac93f !important;
-	border-color: #2ac93f !important;
+.button.copied,
+.button:hover.copied {
+	color: #2ac93f;
+	border-color: #2ac93f;
 }

src/components/Generator/generator.module.css

@@ -9,11 +9,14 @@
 }
 
 .settingsWindow {
+	background-color: #fff;
 	width: 25rem;
 	flex-shrink: 0;
 	max-width: 100%;
 }
 
 .outputWindow {
 	flex-grow: 1;
+	background-color: #10001fc2;
+	color: #fff;
 }