From 08f0a06ee9039ba039af0203f0b19c38d755e682 Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Thu, 26 Dec 2024 16:11:01 +1300
Subject: [PATCH] improve ui for displaying selected profile icon colours

---
 .../components/profile/ProfilePage.vue        | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/frontend/components/profile/ProfilePage.vue b/src/frontend/components/profile/ProfilePage.vue
index 40fb20d..296553d 100644
--- a/src/frontend/components/profile/ProfilePage.vue
+++ b/src/frontend/components/profile/ProfilePage.vue
@@ -20,21 +20,27 @@
             <!-- colours -->
             <div class="bg-white dark:bg-zinc-800 rounded shadow">
                 <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Select your Colours</div>
-                <div class="flex p-2 space-x-2">
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
 
-                    <!-- icon colour -->
-                    <div>
-                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Icon</div>
-                        <div class="flex">
-                            <ColourPickerDropdown v-model:colour="iconForegroundColour"/>
+                    <!-- background colour -->
+                    <div class="p-2 flex space-x-2">
+                        <div class="flex my-auto">
+                            <ColourPickerDropdown v-model:colour="iconBackgroundColour"/>
+                        </div>
+                        <div class="my-auto">
+                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Background Colour</div>
+                            <div class="text-sm text-gray-900 dark:text-gray-100">{{ iconBackgroundColour }}</div>
                         </div>
                     </div>
 
-                    <!-- background colour -->
-                    <div>
-                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Background</div>
-                        <div class="flex">
-                            <ColourPickerDropdown v-model:colour="iconBackgroundColour"/>
+                    <!-- icon colour -->
+                    <div class="p-2 flex space-x-2">
+                        <div class="flex my-auto">
+                            <ColourPickerDropdown v-model:colour="iconForegroundColour"/>
+                        </div>
+                        <div class="my-auto">
+                            <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Icon Colour</div>
+                            <div class="text-sm text-gray-900 dark:text-gray-100">{{ iconForegroundColour }}</div>
                         </div>
                     </div>