From 33dbd18f706e9c8e87fc3e3b7e223fc9233eaba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Sat, 16 Nov 2024 16:30:04 +0000
Subject: [PATCH 01/17] feat: first radio-button draft

Using CSS only.

Co-Authored-By: Sofia Minnemann <93668178+Lauranea@users.noreply.github.com>
---
 .../{icons => forms}/label-input.stories.ts   |  2 +-
 .../{icons => forms}/label-input.svelte       |  0
 src/lib/components/forms/radio-button.svelte  | 48 +++++++++++++++++++
 src/routes/(app)/(home)/+page.svelte          |  5 ++
 src/routes/(app)/contacts/+page.svelte        |  2 +-
 5 files changed, 55 insertions(+), 2 deletions(-)
 rename src/lib/components/{icons => forms}/label-input.stories.ts (92%)
 rename src/lib/components/{icons => forms}/label-input.svelte (100%)
 create mode 100644 src/lib/components/forms/radio-button.svelte

diff --git a/src/lib/components/icons/label-input.stories.ts b/src/lib/components/forms/label-input.stories.ts
similarity index 92%
rename from src/lib/components/icons/label-input.stories.ts
rename to src/lib/components/forms/label-input.stories.ts
index 95339d6b..c5cbc6c6 100644
--- a/src/lib/components/icons/label-input.stories.ts
+++ b/src/lib/components/forms/label-input.stories.ts
@@ -1,4 +1,4 @@
-import LabelInput from './label-input.svelte';
+import LabelInput from '../label-input.svelte';
 
 export default {
   title: 'Atoms/LabelInput',
diff --git a/src/lib/components/icons/label-input.svelte b/src/lib/components/forms/label-input.svelte
similarity index 100%
rename from src/lib/components/icons/label-input.svelte
rename to src/lib/components/forms/label-input.svelte
diff --git a/src/lib/components/forms/radio-button.svelte b/src/lib/components/forms/radio-button.svelte
new file mode 100644
index 00000000..387fbc6a
--- /dev/null
+++ b/src/lib/components/forms/radio-button.svelte
@@ -0,0 +1,48 @@
+<script>
+    export const options = [
+        "test1",
+        "test2"
+    ]
+    let selectedOption = "";
+</script>
+
+<div>
+    <p>Estatutos</p>
+    <ul class ="radio-buttons">
+        {#each options as option}
+            <input id="radio-input-{option}" class="radio-input" type="radio" bind:group={selectedOption} value={option}>
+            <label class="radio-label" for="radio-input-{option}">{option}</label>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    .radio-buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        width: 25%;
+    }
+
+    .radio-label {
+        text-align: center;
+        display: inline-block;
+        min-width: 160px;
+        margin: 5px;
+        padding: 10px 20px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        cursor: pointer;
+        background-color: #561919;
+        transition: background-color 0.3s, border-color 0.3s;
+    }
+
+    .radio-input{
+        display: none;
+    }
+
+    .radio-input:checked + .radio-label {
+        background-color: #FFE9E9;
+        color: #561919;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/(app)/(home)/+page.svelte b/src/routes/(app)/(home)/+page.svelte
index e69de29b..880e3301 100644
--- a/src/routes/(app)/(home)/+page.svelte
+++ b/src/routes/(app)/(home)/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+    import RadioButton from '@/lib/components/forms/radio-button.svelte'
+</script>
+
+<RadioButton />
\ No newline at end of file
diff --git a/src/routes/(app)/contacts/+page.svelte b/src/routes/(app)/contacts/+page.svelte
index e98d94c7..0fe54581 100644
--- a/src/routes/(app)/contacts/+page.svelte
+++ b/src/routes/(app)/contacts/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Icon } from 'svelte-icons-pack';
   import Graph from './_components/graph.svelte';
-  import LabelInput from '@/lib/components/icons/label-input.svelte';
+  import LabelInput from '@/lib/components/forms/label-input.svelte';
   import Icons from '$lib/components/icons/icons';
 </script>
 

From 87169e23586281988b25ac933fbff0c76d9df9c8 Mon Sep 17 00:00:00 2001
From: Lauranea <93668178+Lauranea@users.noreply.github.com>
Date: Sat, 16 Nov 2024 17:32:19 +0000
Subject: [PATCH 02/17] feat: start upload picture

---
 src/lib/components/forms/picture-input.svelte | 37 +++++++++++++++++++
 src/lib/components/icons/icons.ts             |  4 +-
 src/routes/(app)/(home)/+page.svelte          |  4 +-
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/forms/picture-input.svelte

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
new file mode 100644
index 00000000..088e1cad
--- /dev/null
+++ b/src/lib/components/forms/picture-input.svelte
@@ -0,0 +1,37 @@
+<script>
+    import Icon from '$lib/components/icons/icon.svelte';
+    import Icons from '$lib/components/icons/icons';
+    import { Edit } from 'lucide-svelte';
+	let  avatar, fileinput;
+	
+	const onFileSelected =(e)=>{
+            let image = e.target.files[0];
+            let reader = new FileReader();
+            reader.readAsDataURL(image);
+            reader.onload = e => {
+                 avatar = e.target.result
+            };
+}
+	
+</script>
+<div id="app" class="flex items-center justify-center flex-col">
+  
+        {#if avatar}
+        <div class="flex h-[200px] w-[200px] rounded-md overflow-hidden relative">
+            <img class="h-[200px] w-[200px]" src="{avatar}" alt="Avatar" />
+            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
+                <Icon src={Icons.Edit} color="white" size="80%" />
+            </button>
+            <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
+        </div>
+        {:else}
+        <div class="bg-muted-red-400 flex items-center justify-center rounded-md h-[200px] w-[200px] text-center relative">
+            <p class="text-white font-medium">Adicionar logo <span class="text-4xl">*</span></p>
+            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
+                <Icon src={Icons.Edit} color="white" size="80%" />
+            </button>
+            <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
+        </div>
+        {/if}
+
+</div>
diff --git a/src/lib/components/icons/icons.ts b/src/lib/components/icons/icons.ts
index 13f3c118..e4a1135c 100644
--- a/src/lib/components/icons/icons.ts
+++ b/src/lib/components/icons/icons.ts
@@ -10,6 +10,7 @@ import {
 } from 'svelte-icons-pack/fa';
 import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
+import { FiEdit2 } from "svelte-icons-pack/fi";
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -24,7 +25,8 @@ const Icons = {
   Globe: FaSolidGlobe,
   Pin: BiMap,
   Visible: IoEye,
-  Hidden: IoEyeOff
+  Hidden: IoEyeOff,
+  Edit: FiEdit2
 };
 
 export default Icons;
diff --git a/src/routes/(app)/(home)/+page.svelte b/src/routes/(app)/(home)/+page.svelte
index 880e3301..0f07e8aa 100644
--- a/src/routes/(app)/(home)/+page.svelte
+++ b/src/routes/(app)/(home)/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import RadioButton from '@/lib/components/forms/radio-button.svelte'
+        import PictureInput from '$lib/components/forms/picture-input.svelte';
 </script>
 
-<RadioButton />
\ No newline at end of file
+<PictureInput/>
\ No newline at end of file

From c323102770d62936d1073f28d2e1df0bb8da2be8 Mon Sep 17 00:00:00 2001
From: Lauranea <93668178+Lauranea@users.noreply.github.com>
Date: Sat, 16 Nov 2024 17:40:45 +0000
Subject: [PATCH 03/17] added more padding

---
 src/lib/components/forms/picture-input.svelte | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index 088e1cad..b1aebbf7 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -5,22 +5,22 @@
 	let  avatar, fileinput;
 	
 	const onFileSelected =(e)=>{
-            let image = e.target.files[0];
-            let reader = new FileReader();
-            reader.readAsDataURL(image);
-            reader.onload = e => {
-                 avatar = e.target.result
-            };
-}
-	
+        let image = e.target.files[0];
+        let reader = new FileReader();
+        reader.readAsDataURL(image);
+        reader.onload = e => {
+            avatar = e.target.result;    
+        };
+    }
 </script>
+
 <div id="app" class="flex items-center justify-center flex-col">
   
         {#if avatar}
         <div class="flex h-[200px] w-[200px] rounded-md overflow-hidden relative">
             <img class="h-[200px] w-[200px]" src="{avatar}" alt="Avatar" />
             <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
-                <Icon src={Icons.Edit} color="white" size="80%" />
+                <Icon src={Icons.Edit} color="white" size="70%" />
             </button>
             <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
         </div>
@@ -28,7 +28,7 @@
         <div class="bg-muted-red-400 flex items-center justify-center rounded-md h-[200px] w-[200px] text-center relative">
             <p class="text-white font-medium">Adicionar logo <span class="text-4xl">*</span></p>
             <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
-                <Icon src={Icons.Edit} color="white" size="80%" />
+                <Icon src={Icons.Edit} color="white" size="60%" />
             </button>
             <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
         </div>

From cb3e5aa1b55f98b56b90669c6cc36ee77e4874f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Sat, 16 Nov 2024 17:55:38 +0000
Subject: [PATCH 04/17] refactor: style radio buttons

Replace most CSS with Tailwind.
---
 src/lib/components/forms/radio-button.svelte  | 48 -------------------
 src/lib/components/forms/radio-buttons.svelte | 26 ++++++++++
 src/routes/(app)/(home)/+page.svelte          |  2 +-
 3 files changed, 27 insertions(+), 49 deletions(-)
 delete mode 100644 src/lib/components/forms/radio-button.svelte
 create mode 100644 src/lib/components/forms/radio-buttons.svelte

diff --git a/src/lib/components/forms/radio-button.svelte b/src/lib/components/forms/radio-button.svelte
deleted file mode 100644
index 387fbc6a..00000000
--- a/src/lib/components/forms/radio-button.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script>
-    export const options = [
-        "test1",
-        "test2"
-    ]
-    let selectedOption = "";
-</script>
-
-<div>
-    <p>Estatutos</p>
-    <ul class ="radio-buttons">
-        {#each options as option}
-            <input id="radio-input-{option}" class="radio-input" type="radio" bind:group={selectedOption} value={option}>
-            <label class="radio-label" for="radio-input-{option}">{option}</label>
-        {/each}
-    </ul>
-</div>
-
-<style>
-    .radio-buttons {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-        width: 25%;
-    }
-
-    .radio-label {
-        text-align: center;
-        display: inline-block;
-        min-width: 160px;
-        margin: 5px;
-        padding: 10px 20px;
-        border: 1px solid #ccc;
-        border-radius: 20px;
-        cursor: pointer;
-        background-color: #561919;
-        transition: background-color 0.3s, border-color 0.3s;
-    }
-
-    .radio-input{
-        display: none;
-    }
-
-    .radio-input:checked + .radio-label {
-        background-color: #FFE9E9;
-        color: #561919;
-    }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
new file mode 100644
index 00000000..a9003f0b
--- /dev/null
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -0,0 +1,26 @@
+<script>
+    export const options = [
+        "test1",
+        "test2"
+    ];
+    let selectedOption;
+</script>
+
+<div>
+    {#each options as option}
+        <input id="radio-{option}" class="radio-button hidden" type="radio" bind:group={selectedOption} value={option}>
+        <label
+            class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
+            for="radio-{option}"
+        >
+            {option}
+        </label>
+    {/each}
+</div>
+
+<style>
+    .radio-button:checked + label {
+        background-color: theme('colors.muted-red.400');
+        color: theme('colors.taupe.100');
+    }
+</style>
diff --git a/src/routes/(app)/(home)/+page.svelte b/src/routes/(app)/(home)/+page.svelte
index 0f07e8aa..5ecf142e 100644
--- a/src/routes/(app)/(home)/+page.svelte
+++ b/src/routes/(app)/(home)/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-        import PictureInput from '$lib/components/forms/picture-input.svelte';
+    import PictureInput from '$lib/components/forms/picture-input.svelte';
 </script>
 
 <PictureInput/>
\ No newline at end of file

From e40cb213bb8ae630416f889ef274e2ace6188501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Sat, 16 Nov 2024 18:04:03 +0000
Subject: [PATCH 05/17] fix: change display of uploaded image

---
 src/lib/components/forms/picture-input.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index b1aebbf7..d65ab5ac 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -18,7 +18,7 @@
   
         {#if avatar}
         <div class="flex h-[200px] w-[200px] rounded-md overflow-hidden relative">
-            <img class="h-[200px] w-[200px]" src="{avatar}" alt="Avatar" />
+            <img class="h-[200px] w-[200px] object-cover" src="{avatar}" alt="Avatar" />
             <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
                 <Icon src={Icons.Edit} color="white" size="70%" />
             </button>

From bb306928fd8a1beee0776e841e3627574cabf154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Sat, 16 Nov 2024 18:44:14 +0000
Subject: [PATCH 06/17] chore: add radio buttons to storybook

---
 .../components/forms/label-input.stories.ts    |  2 +-
 .../components/forms/radio-buttons.stories.ts  | 18 ++++++++++++++++++
 src/lib/components/forms/radio-buttons.svelte  | 11 ++++-------
 3 files changed, 23 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/forms/radio-buttons.stories.ts

diff --git a/src/lib/components/forms/label-input.stories.ts b/src/lib/components/forms/label-input.stories.ts
index c5cbc6c6..95339d6b 100644
--- a/src/lib/components/forms/label-input.stories.ts
+++ b/src/lib/components/forms/label-input.stories.ts
@@ -1,4 +1,4 @@
-import LabelInput from '../label-input.svelte';
+import LabelInput from './label-input.svelte';
 
 export default {
   title: 'Atoms/LabelInput',
diff --git a/src/lib/components/forms/radio-buttons.stories.ts b/src/lib/components/forms/radio-buttons.stories.ts
new file mode 100644
index 00000000..ac402783
--- /dev/null
+++ b/src/lib/components/forms/radio-buttons.stories.ts
@@ -0,0 +1,18 @@
+import RadioButtons from './radio-buttons.svelte';
+
+export default {
+  title: 'Atoms/RadioButtons',
+  component: RadioButtons,
+  argTypes: {
+    options: { control: 'array' }
+  },
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export const Example = {
+  args: {
+    options: ['Hello', 'World']
+  }
+};
diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index a9003f0b..e010fa32 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -1,14 +1,11 @@
-<script>
-    export const options = [
-        "test1",
-        "test2"
-    ];
-    let selectedOption;
+<script lang='ts'>
+    export let options: [string];
+    let selectedOption: string;
 </script>
 
 <div>
     {#each options as option}
-        <input id="radio-{option}" class="radio-button hidden" type="radio" bind:group={selectedOption} value={option}>
+        <input id="radio-{option}" class="radio-button hidden text-center" type="radio" bind:group={selectedOption} value={option}>
         <label
             class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
             for="radio-{option}"

From 7b82b7976d6ccf4d1bddc1f5256ef8b20b07467e Mon Sep 17 00:00:00 2001
From: Lauranea <93668178+Lauranea@users.noreply.github.com>
Date: Sat, 16 Nov 2024 18:47:03 +0000
Subject: [PATCH 07/17] start of upload multiple files

---
 src/lib/components/forms/files-input.svelte | 37 +++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/lib/components/forms/files-input.svelte

diff --git a/src/lib/components/forms/files-input.svelte b/src/lib/components/forms/files-input.svelte
new file mode 100644
index 00000000..ed646f7a
--- /dev/null
+++ b/src/lib/components/forms/files-input.svelte
@@ -0,0 +1,37 @@
+<script>
+	let files = null;
+  
+	$: () => {
+	  if (files) {
+		console.log(files);
+		for (const file of files) {
+		  console.log(`${file.name}: ${file.size} bytes`);
+		}
+	  }
+	};
+</script>
+  
+<div class="flex items-center space-x-4">
+<label
+	for="file-upload"
+	class="muted-red text-white py-2 px-4 rounded-lg cursor-pointer hover:bg-red-600">
+	Selecionar ficheiro
+</label>
+
+<input
+	id="file-upload"
+	multiple
+	type="file"
+	bind:files
+	class="hidden"
+/>
+
+{#if files}
+	{#each Array.from(files) as file}
+		<div class="bg-taupe-200 text-rose-950 py-2 px-4 rounded-lg">
+			<p>{file.name}</p>
+		</div>
+	{/each}
+{/if}
+</div>
+  
\ No newline at end of file

From ad8e815366a361b18efed7cd9f04f393648bc163 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 20 Nov 2024 17:27:22 +0000
Subject: [PATCH 08/17] fix(radio button): fix parameter type

---
 src/lib/components/forms/radio-buttons.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index e010fa32..5ededa51 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -1,5 +1,5 @@
 <script lang='ts'>
-    export let options: [string];
+    export let options: string[];
     let selectedOption: string;
 </script>
 

From 4289ef113815bccc8220fe4550cbeb8a560d5a54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 27 Nov 2024 00:23:15 +0000
Subject: [PATCH 09/17] chore(storybook): add PictureInput story

---
 .../components/forms/picture-input.stories.ts  | 18 ++++++++++++++++++
 src/lib/components/forms/picture-input.svelte  |  9 +++++----
 .../components/forms/radio-buttons.stories.ts  |  4 ++--
 src/routes/(app)/(home)/+page.svelte           |  2 +-
 4 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 src/lib/components/forms/picture-input.stories.ts

diff --git a/src/lib/components/forms/picture-input.stories.ts b/src/lib/components/forms/picture-input.stories.ts
new file mode 100644
index 00000000..66245260
--- /dev/null
+++ b/src/lib/components/forms/picture-input.stories.ts
@@ -0,0 +1,18 @@
+import PictureInput from './picture-input.svelte';
+
+export default {
+  title: 'Atoms/Forms/Picture Input',
+  component: PictureInput,
+  argTypes: {
+    text: { control: 'text' }
+  },
+  parameters: {
+    layout: 'centered',
+  }
+};
+
+export const Example = {
+  args: {
+    text: 'Adicionar logo'
+  }
+};
diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index d65ab5ac..649e0926 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -1,8 +1,9 @@
-<script>
+<script lang='ts'>
     import Icon from '$lib/components/icons/icon.svelte';
     import Icons from '$lib/components/icons/icons';
-    import { Edit } from 'lucide-svelte';
-	let  avatar, fileinput;
+
+    export let text: string;
+	let avatar, fileinput;
 	
 	const onFileSelected =(e)=>{
         let image = e.target.files[0];
@@ -26,7 +27,7 @@
         </div>
         {:else}
         <div class="bg-muted-red-400 flex items-center justify-center rounded-md h-[200px] w-[200px] text-center relative">
-            <p class="text-white font-medium">Adicionar logo <span class="text-4xl">*</span></p>
+            <p class="text-white font-medium">{text}<span class="text-4xl">*</span></p>
             <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
                 <Icon src={Icons.Edit} color="white" size="60%" />
             </button>
diff --git a/src/lib/components/forms/radio-buttons.stories.ts b/src/lib/components/forms/radio-buttons.stories.ts
index ac402783..c36dd561 100644
--- a/src/lib/components/forms/radio-buttons.stories.ts
+++ b/src/lib/components/forms/radio-buttons.stories.ts
@@ -1,7 +1,7 @@
 import RadioButtons from './radio-buttons.svelte';
 
 export default {
-  title: 'Atoms/RadioButtons',
+  title: 'Atoms/Forms/Radio Buttons',
   component: RadioButtons,
   argTypes: {
     options: { control: 'array' }
@@ -13,6 +13,6 @@ export default {
 
 export const Example = {
   args: {
-    options: ['Hello', 'World']
+    options: ['English', 'Spanish']
   }
 };
diff --git a/src/routes/(app)/(home)/+page.svelte b/src/routes/(app)/(home)/+page.svelte
index 5ecf142e..daf05067 100644
--- a/src/routes/(app)/(home)/+page.svelte
+++ b/src/routes/(app)/(home)/+page.svelte
@@ -2,4 +2,4 @@
     import PictureInput from '$lib/components/forms/picture-input.svelte';
 </script>
 
-<PictureInput/>
\ No newline at end of file
+<PictureInput text="Adicionar logo"/>
\ No newline at end of file

From cf3b9f794b20b7e57fb3acaa48ede816feeca727 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 27 Nov 2024 00:57:18 +0000
Subject: [PATCH 10/17] chore: format code

---
 src/lib/components/forms/files-input.svelte   |  56 +++++-----
 .../components/forms/picture-input.stories.ts |   2 +-
 src/lib/components/forms/picture-input.svelte | 104 ++++++++++++------
 .../components/forms/radio-buttons.stories.ts |   2 +-
 src/lib/components/forms/radio-buttons.svelte |  38 ++++---
 src/lib/components/icons/icons.ts             |   2 +-
 src/routes/(app)/(home)/+page.svelte          |   5 -
 7 files changed, 120 insertions(+), 89 deletions(-)

diff --git a/src/lib/components/forms/files-input.svelte b/src/lib/components/forms/files-input.svelte
index ed646f7a..4918d8d6 100644
--- a/src/lib/components/forms/files-input.svelte
+++ b/src/lib/components/forms/files-input.svelte
@@ -1,37 +1,31 @@
 <script>
-	let files = null;
-  
-	$: () => {
-	  if (files) {
-		console.log(files);
-		for (const file of files) {
-		  console.log(`${file.name}: ${file.size} bytes`);
-		}
-	  }
-	};
+  let files = null;
+
+  $: () => {
+    if (files) {
+      console.log(files);
+      for (const file of files) {
+        console.log(`${file.name}: ${file.size} bytes`);
+      }
+    }
+  };
 </script>
-  
+
 <div class="flex items-center space-x-4">
-<label
-	for="file-upload"
-	class="muted-red text-white py-2 px-4 rounded-lg cursor-pointer hover:bg-red-600">
-	Selecionar ficheiro
-</label>
+  <label
+    for="file-upload"
+    class="muted-red cursor-pointer rounded-lg px-4 py-2 text-white hover:bg-red-600"
+  >
+    Selecionar ficheiro
+  </label>
 
-<input
-	id="file-upload"
-	multiple
-	type="file"
-	bind:files
-	class="hidden"
-/>
+  <input id="file-upload" multiple type="file" bind:files class="hidden" />
 
-{#if files}
-	{#each Array.from(files) as file}
-		<div class="bg-taupe-200 text-rose-950 py-2 px-4 rounded-lg">
-			<p>{file.name}</p>
-		</div>
-	{/each}
-{/if}
+  {#if files}
+    {#each Array.from(files) as file}
+      <div class="rounded-lg bg-taupe-200 px-4 py-2 text-rose-950">
+        <p>{file.name}</p>
+      </div>
+    {/each}
+  {/if}
 </div>
-  
\ No newline at end of file
diff --git a/src/lib/components/forms/picture-input.stories.ts b/src/lib/components/forms/picture-input.stories.ts
index 66245260..57bc4812 100644
--- a/src/lib/components/forms/picture-input.stories.ts
+++ b/src/lib/components/forms/picture-input.stories.ts
@@ -7,7 +7,7 @@ export default {
     text: { control: 'text' }
   },
   parameters: {
-    layout: 'centered',
+    layout: 'centered'
   }
 };
 
diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index 649e0926..d21d0650 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -1,38 +1,74 @@
-<script lang='ts'>
-    import Icon from '$lib/components/icons/icon.svelte';
-    import Icons from '$lib/components/icons/icons';
+<script lang="ts">
+  import Icon from '$lib/components/icons/icon.svelte';
+  import Icons from '$lib/components/icons/icons';
 
-    export let text: string;
-	let avatar, fileinput;
-	
-	const onFileSelected =(e)=>{
-        let image = e.target.files[0];
-        let reader = new FileReader();
-        reader.readAsDataURL(image);
-        reader.onload = e => {
-            avatar = e.target.result;    
-        };
-    }
-</script>
+  export let text: string;
+  let avatar, fileinput;
 
-<div id="app" class="flex items-center justify-center flex-col">
-  
-        {#if avatar}
-        <div class="flex h-[200px] w-[200px] rounded-md overflow-hidden relative">
-            <img class="h-[200px] w-[200px] object-cover" src="{avatar}" alt="Avatar" />
-            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
-                <Icon src={Icons.Edit} color="white" size="70%" />
-            </button>
-            <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
-        </div>
-        {:else}
-        <div class="bg-muted-red-400 flex items-center justify-center rounded-md h-[200px] w-[200px] text-center relative">
-            <p class="text-white font-medium">{text}<span class="text-4xl">*</span></p>
-            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" on:click={() => { fileinput.click(); }} on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { fileinput.click(); } }}>
-                <Icon src={Icons.Edit} color="white" size="60%" />
-            </button>
-            <input style="display:none" type="file" accept=".jpg, .jpeg, .png" on:change={(e) => onFileSelected(e)} bind:this={fileinput}>
-        </div>
-        {/if}
+  const onFileSelected = (e) => {
+    let image = e.target.files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(image);
+    reader.onload = (e) => {
+      avatar = e.target.result;
+    };
+  };
+</script>
 
+<div id="app" class="flex flex-col items-center justify-center">
+  {#if avatar}
+    <div class="relative flex h-[200px] w-[200px] overflow-hidden rounded-md">
+      <img class="h-[200px] w-[200px] object-cover" src={avatar} alt="Avatar" />
+      <button
+        type="button"
+        aria-label="Change Avatar"
+        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+        on:click={() => {
+          fileinput.click();
+        }}
+        on:keydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            fileinput.click();
+          }
+        }}
+      >
+        <Icon src={Icons.Edit} color="white" size="70%" />
+      </button>
+      <input
+        style="display:none"
+        type="file"
+        accept=".jpg, .jpeg, .png"
+        on:change={(e) => onFileSelected(e)}
+        bind:this={fileinput}
+      />
+    </div>
+  {:else}
+    <div
+      class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
+    >
+      <p class="font-medium text-white">{text}<span class="text-4xl">*</span></p>
+      <button
+        type="button"
+        aria-label="Change Avatar"
+        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+        on:click={() => {
+          fileinput.click();
+        }}
+        on:keydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            fileinput.click();
+          }
+        }}
+      >
+        <Icon src={Icons.Edit} color="white" size="60%" />
+      </button>
+      <input
+        style="display:none"
+        type="file"
+        accept=".jpg, .jpeg, .png"
+        on:change={(e) => onFileSelected(e)}
+        bind:this={fileinput}
+      />
+    </div>
+  {/if}
 </div>
diff --git a/src/lib/components/forms/radio-buttons.stories.ts b/src/lib/components/forms/radio-buttons.stories.ts
index c36dd561..ccb52f05 100644
--- a/src/lib/components/forms/radio-buttons.stories.ts
+++ b/src/lib/components/forms/radio-buttons.stories.ts
@@ -7,7 +7,7 @@ export default {
     options: { control: 'array' }
   },
   parameters: {
-    layout: 'centered',
+    layout: 'centered'
   }
 };
 
diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index 5ededa51..6e939574 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -1,23 +1,29 @@
-<script lang='ts'>
-    export let options: string[];
-    let selectedOption: string;
+<script lang="ts">
+  export let options: string[];
+  let selectedOption: string;
 </script>
 
 <div>
-    {#each options as option}
-        <input id="radio-{option}" class="radio-button hidden text-center" type="radio" bind:group={selectedOption} value={option}>
-        <label
-            class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
-            for="radio-{option}"
-        >
-            {option}
-        </label>
-    {/each}
+  {#each options as option}
+    <input
+      id="radio-{option}"
+      class="radio-button hidden text-center"
+      type="radio"
+      bind:group={selectedOption}
+      value={option}
+    />
+    <label
+      class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
+      for="radio-{option}"
+    >
+      {option}
+    </label>
+  {/each}
 </div>
 
 <style>
-    .radio-button:checked + label {
-        background-color: theme('colors.muted-red.400');
-        color: theme('colors.taupe.100');
-    }
+  .radio-button:checked + label {
+    background-color: theme('colors.muted-red.400');
+    color: theme('colors.taupe.100');
+  }
 </style>
diff --git a/src/lib/components/icons/icons.ts b/src/lib/components/icons/icons.ts
index e4a1135c..9e5908ee 100644
--- a/src/lib/components/icons/icons.ts
+++ b/src/lib/components/icons/icons.ts
@@ -10,7 +10,7 @@ import {
 } from 'svelte-icons-pack/fa';
 import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
-import { FiEdit2 } from "svelte-icons-pack/fi";
+import { FiEdit2 } from 'svelte-icons-pack/fi';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
diff --git a/src/routes/(app)/(home)/+page.svelte b/src/routes/(app)/(home)/+page.svelte
index daf05067..e69de29b 100644
--- a/src/routes/(app)/(home)/+page.svelte
+++ b/src/routes/(app)/(home)/+page.svelte
@@ -1,5 +0,0 @@
-<script>
-    import PictureInput from '$lib/components/forms/picture-input.svelte';
-</script>
-
-<PictureInput text="Adicionar logo"/>
\ No newline at end of file

From ddd61979e108afaca17f873027c2765771d85f9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?=
 <93825634+tomas-sucena@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:53:45 +0000
Subject: [PATCH 11/17] refactor(radio button): replace 'div' with 'fieldset'

Co-authored-by: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/lib/components/forms/radio-buttons.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index 6e939574..8dc57f2b 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -3,7 +3,7 @@
   let selectedOption: string;
 </script>
 
-<div>
+<fieldset>
   {#each options as option}
     <input
       id="radio-{option}"

From d8fb00ab48f65d19c8b3bbc294c06945a57cd6ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?=
 <93825634+tomas-sucena@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:58:02 +0000
Subject: [PATCH 12/17] chore(picture input): add types

Co-authored-by: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/lib/components/forms/picture-input.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index d21d0650..ea56de59 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -3,7 +3,8 @@
   import Icons from '$lib/components/icons/icons';
 
   export let text: string;
-  let avatar, fileinput;
+  let avatar: string;
+  let fileinput: HTMLInputElement;
 
   const onFileSelected = (e) => {
     let image = e.target.files[0];

From d14c25c7fa164e4459cf94ef80008243dd62c5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 4 Dec 2024 16:13:12 +0000
Subject: [PATCH 13/17] refactor(radio button): simplify CSS selector

Based on @MRita443 's suggestion, add class 'selected' to the label when hovered.

Co-Authored-By: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/lib/components/forms/radio-buttons.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index 8dc57f2b..c5af066e 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -14,15 +14,16 @@
     />
     <label
       class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
+      class:selected={selectedOption === option}
       for="radio-{option}"
     >
       {option}
     </label>
   {/each}
-</div>
+</fieldset>
 
 <style>
-  .radio-button:checked + label {
+  label.selected {
     background-color: theme('colors.muted-red.400');
     color: theme('colors.taupe.100');
   }

From 43fb97a7a56e822b1696909a5af249f4b160d537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 4 Dec 2024 16:39:44 +0000
Subject: [PATCH 14/17] chore(storybook): change directory structure

Co-Authored-By: Rita Lopes <93883163+MRita443@users.noreply.github.com>
---
 src/lib/components/forms/label-input.stories.ts   | 2 +-
 src/lib/components/forms/picture-input.stories.ts | 4 ++--
 src/lib/components/forms/radio-buttons.stories.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/forms/label-input.stories.ts b/src/lib/components/forms/label-input.stories.ts
index 95339d6b..fbd2df55 100644
--- a/src/lib/components/forms/label-input.stories.ts
+++ b/src/lib/components/forms/label-input.stories.ts
@@ -1,7 +1,7 @@
 import LabelInput from './label-input.svelte';
 
 export default {
-  title: 'Atoms/LabelInput',
+  title: 'Atoms/Forms/Label Input',
   component: LabelInput,
   argTypes: {
     label: { control: 'text' },
diff --git a/src/lib/components/forms/picture-input.stories.ts b/src/lib/components/forms/picture-input.stories.ts
index 57bc4812..75db55f1 100644
--- a/src/lib/components/forms/picture-input.stories.ts
+++ b/src/lib/components/forms/picture-input.stories.ts
@@ -1,7 +1,7 @@
 import PictureInput from './picture-input.svelte';
 
 export default {
-  title: 'Atoms/Forms/Picture Input',
+  title: 'Atoms/Forms',
   component: PictureInput,
   argTypes: {
     text: { control: 'text' }
@@ -11,7 +11,7 @@ export default {
   }
 };
 
-export const Example = {
+export const Picture_Input = {
   args: {
     text: 'Adicionar logo'
   }
diff --git a/src/lib/components/forms/radio-buttons.stories.ts b/src/lib/components/forms/radio-buttons.stories.ts
index ccb52f05..6590d906 100644
--- a/src/lib/components/forms/radio-buttons.stories.ts
+++ b/src/lib/components/forms/radio-buttons.stories.ts
@@ -1,7 +1,7 @@
 import RadioButtons from './radio-buttons.svelte';
 
 export default {
-  title: 'Atoms/Forms/Radio Buttons',
+  title: 'Atoms/Forms',
   component: RadioButtons,
   argTypes: {
     options: { control: 'array' }
@@ -11,7 +11,7 @@ export default {
   }
 };
 
-export const Example = {
+export const Radio_Button = {
   args: {
     options: ['English', 'Spanish']
   }

From 21caa45e653421572e1cbc13816c1f0278264835 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Wed, 4 Dec 2024 17:27:35 +0000
Subject: [PATCH 15/17] refactor(picture input): reduce code inside
 'if'-statement

---
 src/lib/components/forms/picture-input.svelte | 82 +++++++------------
 1 file changed, 29 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index ea56de59..0f7c6073 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -11,65 +11,41 @@
     let reader = new FileReader();
     reader.readAsDataURL(image);
     reader.onload = (e) => {
-      avatar = e.target.result;
+      if (e.target?.result) {
+        avatar = e.target.result.toString();
+      }
     };
   };
 </script>
 
 <div id="app" class="flex flex-col items-center justify-center">
-  {#if avatar}
-    <div class="relative flex h-[200px] w-[200px] overflow-hidden rounded-md">
+  <div class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center">
+    {#if avatar}
       <img class="h-[200px] w-[200px] object-cover" src={avatar} alt="Avatar" />
-      <button
-        type="button"
-        aria-label="Change Avatar"
-        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
-        on:click={() => {
-          fileinput.click();
-        }}
-        on:keydown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            fileinput.click();
-          }
-        }}
-      >
-        <Icon src={Icons.Edit} color="white" size="70%" />
-      </button>
-      <input
-        style="display:none"
-        type="file"
-        accept=".jpg, .jpeg, .png"
-        on:change={(e) => onFileSelected(e)}
-        bind:this={fileinput}
-      />
-    </div>
-  {:else}
-    <div
-      class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
-    >
+    {:else}
       <p class="font-medium text-white">{text}<span class="text-4xl">*</span></p>
-      <button
-        type="button"
-        aria-label="Change Avatar"
-        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
-        on:click={() => {
+    {/if}
+    <button
+      type="button"
+      aria-label="Change Avatar"
+      class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+      on:click={() => {
+        fileinput.click();
+      }}
+      on:keydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
           fileinput.click();
-        }}
-        on:keydown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            fileinput.click();
-          }
-        }}
-      >
-        <Icon src={Icons.Edit} color="white" size="60%" />
-      </button>
-      <input
-        style="display:none"
-        type="file"
-        accept=".jpg, .jpeg, .png"
-        on:change={(e) => onFileSelected(e)}
-        bind:this={fileinput}
-      />
-    </div>
-  {/if}
+        }
+      }}
+    >
+      <Icon src={Icons.Edit} color="white" size="60%" />
+    </button>
+    <input
+      style="display:none"
+      type="file"
+      accept=".jpg, .jpeg, .png"
+      on:change={(e) => onFileSelected(e)}
+      bind:this={fileinput}
+    />
+  </div>
 </div>

From b993c572f7a1a0b98ea18aed5350c5822ab350ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Thu, 5 Dec 2024 13:16:05 +0000
Subject: [PATCH 16/17] chore: format code

---
 src/lib/components/forms/picture-input.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/forms/picture-input.svelte b/src/lib/components/forms/picture-input.svelte
index 0f7c6073..7fa5879d 100644
--- a/src/lib/components/forms/picture-input.svelte
+++ b/src/lib/components/forms/picture-input.svelte
@@ -19,7 +19,9 @@
 </script>
 
 <div id="app" class="flex flex-col items-center justify-center">
-  <div class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center">
+  <div
+    class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
+  >
     {#if avatar}
       <img class="h-[200px] w-[200px] object-cover" src={avatar} alt="Avatar" />
     {:else}

From 0e020cb125d113fd31ded90f9b9289485796b22b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sucena=20Lopes?= <tomas21sucena@gmail.com>
Date: Fri, 6 Dec 2024 11:13:36 +0000
Subject: [PATCH 17/17] refactor(radio button): simplify targeting selected
 labels

---
 src/lib/components/forms/radio-buttons.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/forms/radio-buttons.svelte b/src/lib/components/forms/radio-buttons.svelte
index c5af066e..1bcf5b35 100644
--- a/src/lib/components/forms/radio-buttons.svelte
+++ b/src/lib/components/forms/radio-buttons.svelte
@@ -14,7 +14,6 @@
     />
     <label
       class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
-      class:selected={selectedOption === option}
       for="radio-{option}"
     >
       {option}
@@ -23,7 +22,7 @@
 </fieldset>
 
 <style>
-  label.selected {
+  input:checked + label {
     background-color: theme('colors.muted-red.400');
     color: theme('colors.taupe.100');
   }