From eb6ad93e5c76cd7772f0196bb7e81528da78a1fe Mon Sep 17 00:00:00 2001
From: Steve Bauman <steven_bauman@outlook.com>
Date: Thu, 28 Dec 2023 00:51:40 -0500
Subject: [PATCH] UI tweaks

---
 components/ControlAspectRatios.vue | 2 +-
 components/Dropdown.vue            | 4 ++--
 components/FileDropdown.vue        | 6 +++---
 components/Preview.vue             | 8 ++++----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/ControlAspectRatios.vue b/components/ControlAspectRatios.vue
index 96f2d74..948f689 100644
--- a/components/ControlAspectRatios.vue
+++ b/components/ControlAspectRatios.vue
@@ -7,7 +7,7 @@
             :rounded="false"
             :disabled="lockWindowSize"
             :active="isEqual(aspectRatio, [x, y])"
-            class="justify-center w-16"
+            class="justify-center w-16 font-medium"
             :class="{ 'rounded-l-lg': index === 0 }"
             @click.native="$emit('select', x, y)"
         >
diff --git a/components/Dropdown.vue b/components/Dropdown.vue
index 0af4644..b93c241 100644
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@@ -4,7 +4,7 @@
             button: [sizes[size], variants[variant], 'rounded-lg', ...classes],
             dropdownWrapper: 'fixed z-30 bg-ui-gray-700',
             dropdown:
-                'highlight origin-top-right absolute right-0 w-56 shadow bg-ui-gray-700 rounded-lg',
+                'highlight origin-top-right absolute right-0 w-56 shadow bg-ui-gray-700 rounded-lg overflow-hidden ring-1 ring-ui-gray-800',
             enterClass: 'opacity-0 scale-95',
             enterActiveClass: 'transition transform ease-out duration-100',
             enterToClass: 'opacity-100 scale-100',
@@ -34,7 +34,7 @@
                 @blur="blurHandler"
                 :dusk="`option-${item.name}`"
                 @click.prevent="() => item.click() && hide()"
-                class="block px-4 py-2 mx-2 my-1 text-sm transition duration-150 ease-in-out rounded-lg text-ui-gray-100 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 focus:bg-ui-gray-900"
+                class="block px-4 py-2 mx-2 my-1 text-xs font-medium transition duration-150 ease-in-out rounded-md text-ui-gray-100 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 focus:bg-ui-gray-900"
             >
                 {{ item.title }}
             </a>
diff --git a/components/FileDropdown.vue b/components/FileDropdown.vue
index 73cf6f6..5cc6d9d 100644
--- a/components/FileDropdown.vue
+++ b/components/FileDropdown.vue
@@ -6,7 +6,7 @@
             wrapper: 'inline-flex flex-col',
             dropdownWrapper: 'relative z-30 bg-ui-gray-700',
             dropdown:
-                'highlight origin-top-left absolute left-0 w-56 shadow bg-ui-gray-700 overflow-hidden rounded-br-lg rounded-tr-lg',
+                'highlight origin-top-left absolute left-0 top-1 left-1 w-56 shadow bg-ui-gray-700 overflow-hidden rounded-lg ring-1 ring-ui-gray-800',
             enterClass: 'opacity-0 scale-95',
             enterActiveClass: 'transition transform ease-out duration-100',
             enterToClass: 'opacity-100 scale-100',
@@ -17,7 +17,7 @@
     >
         <div dusk="dropdown-file" slot-scope="{ hide, blurHandler }" class="py-1 shadow-lg">
             <template v-for="(option, index) in options">
-                <div v-if="option.separator" class="h-px bg-ui-gray-800" :key="index"></div>
+                <div v-if="option.separator" class="h-px bg-ui-gray-800 mx-2" :key="index"></div>
 
                 <a
                     v-else
@@ -25,7 +25,7 @@
                     :key="option.name"
                     @blur="blurHandler"
                     @click.prevent="() => option.click() && hide()"
-                    class="block px-4 py-1 my-1 text-sm leading-5 transition duration-150 ease-in-out text-ui-gray-100 hover:bg-ui-gray-900 focus:outline-none focus:ring-0 focus:bg-ui-gray-900"
+                    class="block px-4 py-1 my-1 text-xs leading-5 transition duration-150 ease-in-out mx-2 font-medium text-ui-gray-100 rounded-md hover:bg-ui-gray-900 focus:outline-none focus:ring-0 focus:bg-ui-gray-900"
                 >
                     {{ option.title }}
                 </a>
diff --git a/components/Preview.vue b/components/Preview.vue
index e4670f6..a7f4cbe 100644
--- a/components/Preview.vue
+++ b/components/Preview.vue
@@ -17,7 +17,7 @@
 
             <div class="flex flex-wrap items-center justify-center h-10 gap-2">
                 <Button
-                    size="sm"
+                    size="xs"
                     type="button"
                     class="shadow"
                     dusk="button-copy"
@@ -32,7 +32,7 @@
                 </Button>
 
                 <Dropdown
-                    size="sm"
+                    size="xs"
                     variant="primary"
                     :items="fileTypes"
                     dusk="button-export"
@@ -44,7 +44,7 @@
 
                 <Button
                     v-if="!$config.isDesktop && $config.isDistributing"
-                    size="sm"
+                    size="xs"
                     href="/buy"
                     class="shadow"
                     target="_blank"
@@ -55,7 +55,7 @@
                 </Button>
 
                 <Button
-                    size="sm"
+                    size="xs"
                     href="https://api.showcode.app/docs"
                     class="shadow"
                     target="_blank"