From d432f795fc190e686254cc690871f7e8f84b6a71 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 16 Aug 2023 14:27:37 -0700
Subject: [PATCH] refactor(upc): dropdown button opacity transition

---
 web/components/UserProfile.ce.vue                 |  2 +-
 web/components/UserProfile/DropdownTrigger.vue    | 15 ++++++++++++---
 .../UserProfile/DropdownTriggerMenuIcon.vue       | 14 --------------
 3 files changed, 13 insertions(+), 18 deletions(-)
 delete mode 100644 web/components/UserProfile/DropdownTriggerMenuIcon.vue

diff --git a/web/components/UserProfile.ce.vue b/web/components/UserProfile.ce.vue
index de09aaa4f..2842bbad7 100644
--- a/web/components/UserProfile.ce.vue
+++ b/web/components/UserProfile.ce.vue
@@ -92,7 +92,7 @@ onBeforeMount(() => {
           <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span>
           <span class="text-gamma hidden md:inline-block px-8px">&bull;</span>
         </template>
-        <button :title="t('Click to Copy LAN IP {0}', [lanIp])" @click="copyLanIp()" class="opacity-100 hover:opacity-75 focus:opacity-75">
+        <button :title="t('Click to Copy LAN IP {0}', [lanIp])" @click="copyLanIp()" class="opacity-100 hover:opacity-75 focus:opacity-75 transition-opacity">
           {{ name }}
         </button>
         <span
diff --git a/web/components/UserProfile/DropdownTrigger.vue b/web/components/UserProfile/DropdownTrigger.vue
index b8099c72a..2376557f3 100644
--- a/web/components/UserProfile/DropdownTrigger.vue
+++ b/web/components/UserProfile/DropdownTrigger.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { InformationCircleIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroicons/vue/24/solid';
+import {
+  Bars3Icon,
+  Bars3BottomRightIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  ShieldExclamationIcon,
+} from '@heroicons/vue/24/solid';
 
 import { useDropdownStore } from '~/store/dropdown';
 import { useErrorsStore } from '~/store/errors';
@@ -29,7 +35,7 @@ const title = computed((): string => {
 
 <template>
   <button
-    class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 hover:text-alpha focus:text-alpha"
+    class="group text-18px border-0 relative flex flex-row justify-end items-center h-full gap-x-8px opacity-100 hover:opacity-75 focus:opacity-75 hover:text-alpha focus:text-alpha transition-opacity"
     :title="title"
     @click="dropdownStore.dropdownToggle()"
   >
@@ -42,7 +48,10 @@ const title = computed((): string => {
       <span>{{ text }}</span>
       <span class="absolute bottom-[-3px] inset-x-0 h-2px w-full bg-gradient-to-r from-unraid-red to-orange rounded opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity" />
     </span>
-    <UpcDropdownTriggerMenuIcon :open="dropdownVisible" />
+
+    <Bars3Icon v-if="!dropdownVisible" class="w-20px" />
+    <Bars3BottomRightIcon v-else class="w-20px" />
+
     <BrandAvatar />
   </button>
 </template>
diff --git a/web/components/UserProfile/DropdownTriggerMenuIcon.vue b/web/components/UserProfile/DropdownTriggerMenuIcon.vue
deleted file mode 100644
index 0092ddfd4..000000000
--- a/web/components/UserProfile/DropdownTriggerMenuIcon.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { Bars3Icon, Bars3BottomRightIcon } from '@heroicons/vue/24/solid';
-
-export interface Props {
-  open?: boolean;
-}
-withDefaults(defineProps<Props>(), {
-  open: false,
-});
-</script>
-<template>
-  <Bars3Icon v-if="!open" class="w-20px" />
-  <Bars3BottomRightIcon v-else class="w-20px" />
-</template>