From 5eda87b1ef17ef0d8c6d1d1b045df452c5c31d91 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Tue, 21 Feb 2023 10:43:13 +1000
Subject: [PATCH] improve dropdown button design

---
 resources/js/components/SMButton.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/SMButton.vue b/resources/js/components/SMButton.vue
index ffbb796..e77382b 100644
--- a/resources/js/components/SMButton.vue
+++ b/resources/js/components/SMButton.vue
@@ -25,7 +25,7 @@
         ]"
         :type="buttonType"
         @click="handleClick">
-        {{ label }}
+        <span>{{ label }}</span>
         <ion-icon v-if="icon && dropdown == null" :icon="icon" />
         <ion-icon
             v-if="dropdown != null"
@@ -131,8 +131,22 @@ const handleClickItem = (item: string) => {
     }
 
     &.dropdown-button {
-        padding: map-get($spacer, 1) map-get($spacer, 2);
+        padding: 0;
         white-space: nowrap;
+        display: flex;
+        align-items: center;
+
+        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);
+        }
+
+        ion-icon {
+            padding: 0 calc(#{map-get($spacer, 1)} / 2);
+        }
     }
 
     ion-icon {