From f0c1be61c51eef763967dfcf14b25fead19027d0 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sat, 28 Mar 2026 20:37:58 +0100
Subject: [PATCH] feat: reorganize FontChange layout and resize header icons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/FontChange.vue   | 83 ++++++++++++++++++---------------
 src/components/HeaderNote.vue   | 20 ++++----
 src/components/WelcomeWorld.vue |  2 +-
 3 files changed, 57 insertions(+), 48 deletions(-)

diff --git a/src/components/FontChange.vue b/src/components/FontChange.vue
index f5de0dc..89b197e 100644
--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -16,54 +16,63 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 
 <template>
   <div class="font-change" v-if="sortedFontFamilies.length > 0">
-    <theme-swap />
+    <div>
+      <label for="title-font" class="font-label">t</label>
+      <select
+        id="title-font"
+        class="select"
+        :value="store.userSettings?.chosenTitleFont"
+        @change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
+      >
+        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
+          {{ font }}
+        </option>
+      </select>
 
-    <label class="font-label">t</label>
-    <select
-      class="select"
-      :value="store.userSettings?.chosenTitleFont"
-      @change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
-    >
-      <option v-for="font in sortedFontFamilies" :key="font" :value="font">
-        {{ font }}
-      </option>
-    </select>
+      <label for="body-font" class="font-label">p</label>
+      <select
+        id="body-font"
+        class="select"
+        :value="store.userSettings?.chosenBodyFont"
+        @change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
+      >
+        <option v-for="font in sortedFontFamilies" :key="font" :value="font">
+          {{ font }}
+        </option>
+      </select>
+    </div>
+    <div>
+      <theme-swap />
 
-    <label class="font-label">p</label>
-    <select
-      class="select"
-      :value="store.userSettings?.chosenBodyFont"
-      @change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
-    >
-      <option v-for="font in sortedFontFamilies" :key="font" :value="font">
-        {{ font }}
-      </option>
-    </select>
-
-    <select
-      class="select"
-      :value="store.userSettings?.chosenFontSize"
-      @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
-    >
-      <option v-for="size in fontSizes" :key="size" :value="size">
-        {{ size }}
-      </option>
-    </select>
+      <label for="font-size" class="font-label">s</label>
+      <select
+        id="font-size"
+        class="select"
+        :value="store.userSettings?.chosenFontSize"
+        @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
+      >
+        <option v-for="size in fontSizes" :key="size" :value="size">
+          {{ size }}
+        </option>
+      </select>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .font-change {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-
   select {
     flex: 1;
     display: flex;
   }
+
+  div {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1rem;
+  }
 }
 
 .font-label {
diff --git a/src/components/HeaderNote.vue b/src/components/HeaderNote.vue
index 3b021ad..f959800 100644
--- a/src/components/HeaderNote.vue
+++ b/src/components/HeaderNote.vue
@@ -36,8 +36,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icons-tabler-outline icon-tabler-typography"
-        width="24"
-        height="24"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -58,8 +58,8 @@ defineProps<{ user: string; repo: string }>()
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke="currentColor"
         fill="none"
@@ -79,8 +79,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-notes"
-        width="24"
-        height="24"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
@@ -100,8 +100,8 @@ defineProps<{ user: string; repo: string }>()
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -126,8 +126,8 @@ defineProps<{ user: string; repo: string }>()
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-mailbox"
-        width="24"
-        height="24"
+        width="30"
+        height="30"
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue
index 43bed2c..07e4f44 100644
--- a/src/components/WelcomeWorld.vue
+++ b/src/components/WelcomeWorld.vue
@@ -44,7 +44,7 @@ const { userInput, repoInput, submit } = useForm()
 
     <footer>
       <theme-swap />
-      Made with
+      made with
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="icon icon-tabler icon-tabler-heart"