From ca2b0a9c5e4e95ab3db00ef13669e065284088b5 Mon Sep 17 00:00:00 2001 From: Arthur Geel Date: Fri, 15 Nov 2024 11:20:28 +0100 Subject: [PATCH 1/4] Add visual design tweaks for window styles --- src/app/globals.css | 1 + src/components/Generator/generator.module.css | 3 ++ src/components/Window/window.module.css | 31 ++++++------------- 3 files changed, 14 insertions(+), 21 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 51e3895..2e364f5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -19,6 +19,7 @@ body { pre { tab-size: 4; font-family: var(--font-code), monospace; + font-size: 0.94rem; } a { diff --git a/src/components/Generator/generator.module.css b/src/components/Generator/generator.module.css index 105a161..ead9849 100644 --- a/src/components/Generator/generator.module.css +++ b/src/components/Generator/generator.module.css @@ -9,6 +9,7 @@ } .settingsWindow { + background-color: #fff; width: 25rem; flex-shrink: 0; max-width: 100%; @@ -16,4 +17,6 @@ .outputWindow { flex-grow: 1; + background-color: #10001fc2; + color: #fff; } diff --git a/src/components/Window/window.module.css b/src/components/Window/window.module.css index af87712..8390795 100644 --- a/src/components/Window/window.module.css +++ b/src/components/Window/window.module.css @@ -1,40 +1,29 @@ .window { - background: #fff; - border-radius: 0.2rem; - box-shadow: 0 0 3rem #0005; + border-radius: 0.4rem; + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + outline: 1px solid rgb(255 255 255 / 0.2); overflow: hidden; } .topBar { display: flex; flex-direction: row; - gap: 0.8rem; + gap: 0.6rem; padding: 0.8rem; } .topBar > div { - width: 1.6rem; - height: 1.6rem; - background-color: #fbbf2b; + width: 0.75rem; + height: 0.75rem; + background-color: #a0a0b6; border-radius: 50%; - - &:first-child { - background-color: #ff5e56; - } - - &:last-child { - background-color: #2ac93f; - } } .content { position: relative; - padding: 0.8rem; + padding: 1rem; overflow: scroll; max-height: calc(100dvh - 11.2rem); } - -.dark { - background-color: #202020; - color: #fff; -} From 316779a625561d0198086a98650fd69f85f31432 Mon Sep 17 00:00:00 2001 From: Arthur Geel Date: Fri, 15 Nov 2024 11:21:36 +0100 Subject: [PATCH 2/4] Fix typo in pre-commit hook --- Taskfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Taskfile b/Taskfile index 8e2cb42..7510dc6 100755 --- a/Taskfile +++ b/Taskfile @@ -103,7 +103,7 @@ function task:pre-commit { ## Clean up code before committing task:prettier task:eslint task:typescript - title "Comitting" + title "Committing" } # ========================================================= From f7f2c5b3ced91f99642ca809f72061db96b3d141 Mon Sep 17 00:00:00 2001 From: Arthur Geel Date: Fri, 15 Nov 2024 12:08:57 +0100 Subject: [PATCH 3/4] Refine form element visual design: - Spacing, sizing and contrast - Colours and animations --- src/components/Form/Checkbox/Checkbox.tsx | 6 +-- .../Form/Checkbox/checkbox.module.css | 43 ++++++++++++------- src/components/Form/Radio/Radio.tsx | 4 +- src/components/Form/Radio/radio.module.css | 42 ++++++++++++------ src/components/Form/form.module.css | 12 +++++- .../GeneredTaskfile/Copy/copy.module.css | 4 +- 6 files changed, 74 insertions(+), 37 deletions(-) diff --git a/src/components/Form/Checkbox/Checkbox.tsx b/src/components/Form/Checkbox/Checkbox.tsx index 120a5ed..09871f7 100644 --- a/src/components/Form/Checkbox/Checkbox.tsx +++ b/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 ( <> ); }; -export default RadioInput; +export default CheckboxInput; diff --git a/src/components/Form/Checkbox/checkbox.module.css b/src/components/Form/Checkbox/checkbox.module.css index ec9234e..f76864b 100644 --- a/src/components/Form/Checkbox/checkbox.module.css +++ b/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; } diff --git a/src/components/Form/Radio/Radio.tsx b/src/components/Form/Radio/Radio.tsx index 5941042..ea11374 100644 --- a/src/components/Form/Radio/Radio.tsx +++ b/src/components/Form/Radio/Radio.tsx @@ -22,8 +22,8 @@ const RadioInput = ({ name, title, options, choices, flat = false }: Props): Rea const { register } = useFormContext(); return ( -
- {title} +
+ {title}
{choices.map((radio) => (