From 812ff6b88772f6adc5044a6e9513e009aba3637c Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Sun, 2 Feb 2025 01:54:44 +1300
Subject: [PATCH] fix styles

---
 src/frontend/components/interfaces/AddInterfacePage.vue | 2 +-
 src/frontend/components/interfaces/ExpandingSection.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/frontend/components/interfaces/AddInterfacePage.vue b/src/frontend/components/interfaces/AddInterfacePage.vue
index 4f7f884..b69f64c 100644
--- a/src/frontend/components/interfaces/AddInterfacePage.vue
+++ b/src/frontend/components/interfaces/AddInterfacePage.vue
@@ -53,7 +53,7 @@
             </div>
 
             <!-- add interface form -->
-            <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
+            <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900">
                 <div class="p-2 font-bold dark:text-white">
                     <span v-if="isEditingInterface">Edit Interface</span>
                     <span v-else>Add Interface</span>
diff --git a/src/frontend/components/interfaces/ExpandingSection.vue b/src/frontend/components/interfaces/ExpandingSection.vue
index f171864..9d23a17 100644
--- a/src/frontend/components/interfaces/ExpandingSection.vue
+++ b/src/frontend/components/interfaces/ExpandingSection.vue
@@ -1,11 +1,11 @@
 <template>
-    <div class="bg-white rounded shadow divide-y divide-gray-200 dark:bg-zinc-900">
-        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer">
+    <div class="bg-white rounded shadow divide-y divide-gray-300 dark:divide-zinc-700 dark:bg-zinc-900 overflow-hidden">
+        <div @click="isExpanded = !isExpanded" class="flex p-2 justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-zinc-800">
             <div class="my-auto mr-auto">
                 <div class="font-bold dark:text-white">
                     <slot name="title"/>
                 </div>
-                <div class="text-sm dark:text-white">
+                <div class="text-sm text-gray-600 dark:text-gray-300">
                     <slot name="subtitle"/>
                 </div>
             </div>
@@ -13,7 +13,7 @@
                 <div class="w-5 h-5 text-gray-600 dark:text-gray-300 transform transition-transform duration-200" :class="{ 'rotate-90': isExpanded }">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="size-5">
                         <rect width="256" height="256" fill="none"/>
-                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z"/>
+                        <path d="M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34Z" fill="currentColor"/>
                     </svg>
                 </div>
             </div>