From 9aaa2e59262c83a54b253e0aad951be3d42bbc3a Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 21 Feb 2023 15:18:47 +1000
Subject: [PATCH] improve the design of the dropdown button

---
 resources/js/components/SMButton.vue | 37 ++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index e77382b..ce16491 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -135,17 +135,37 @@ const handleClickItem = (item: string) => {
         white-space: nowrap;
         display: flex;
         align-items: center;
+        font-weight: normal;
+        background: #fff !important;
+        color: $primary-color !important;
+        border-radius: 12px;
+        border-width: 1px;
+        font-size: 0.8rem;
+        min-width: auto;
 
         span {
             flex: 1;
-            border-right: 1px solid rgba(255, 255, 255, 0.5);
-            padding-top: map-get($spacer, 1);
-            padding-bottom: map-get($spacer, 1);
-            padding-left: map-get($spacer, 2);
+            border-right: 1px solid $primary-color;
+            padding: 0;
+            padding-top: calc(#{map-get($spacer, 1)} / 1.5);
+            padding-bottom: calc(#{map-get($spacer, 1)} / 1.5);
+            padding-left: map-get($spacer, 3);
+            padding-right: map-get($spacer, 3);
         }
 
         ion-icon {
-            padding: 0 calc(#{map-get($spacer, 1)} / 2);
+            height: 1rem;
+            width: 1rem;
+            padding: 0 map-get($spacer, 1) 0 map-get($spacer, 1);
+        }
+
+        &:hover {
+            background-color: $primary-color !important;
+            color: #fff !important;
+
+            span {
+                border-right: 1px solid $primary-color-light;
+            }
         }
     }
 
@@ -166,8 +186,8 @@ const handleClickItem = (item: string) => {
         list-style: none;
         padding: 0;
         margin: 0;
-        background-color: #f9f9f9;
-        border: 1px solid #ddd;
+        background-color: #f8f8f8;
+        border: 1px solid $border-color;
         color: $primary-color;
         box-shadow: 0 0 14px rgba(0, 0, 0, 0.25);
     }
@@ -179,7 +199,8 @@ const handleClickItem = (item: string) => {
     }
 
     li:hover {
-        background-color: #ddd;
+        background-color: $primary-color;
+        color: #f8f8f8;
     }
 }
 </style>