From 269c452aa707ad30cd76f804ff484fce3a40db05 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 19 Jul 2023 13:09:09 -0700
Subject: [PATCH] refactor: upc error styles

---
 components/UserProfile/DropdownContent.vue |  2 +-
 components/UserProfile/DropdownError.vue   | 10 +++++-----
 components/UserProfile/DropdownItem.vue    |  8 ++++++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/UserProfile/DropdownContent.vue b/components/UserProfile/DropdownContent.vue
index fad0a53f2..bcd23317d 100644
--- a/components/UserProfile/DropdownContent.vue
+++ b/components/UserProfile/DropdownContent.vue
@@ -92,7 +92,7 @@ const showKeyline = computed(() => (showErrors.value || showConnectStatus.value)
       <UpcDropdownError v-if="showErrors" />
       <UpcDropdownConnectStatus v-if="showConnectStatus" class="mt-8px" />
 
-      <li v-if="showKeyline" class="m-8px">
+      <li v-if="showKeyline" class="my-8px">
         <UpcKeyline />
       </li>
 
diff --git a/components/UserProfile/DropdownError.vue b/components/UserProfile/DropdownError.vue
index 047ad0330..19e253470 100644
--- a/components/UserProfile/DropdownError.vue
+++ b/components/UserProfile/DropdownError.vue
@@ -8,15 +8,15 @@ const { errors } = storeToRefs(errorsStore);
 </script>
 
 <template>
-  <ul v-if="errors.length" class="text-white bg-unraid-red/90 font-semibold list-reset flex flex-col gap-y-8px mb-4px py-12px px-16px rounded">
+  <ul v-if="errors.length" class="list-reset flex flex-col gap-y-8px mb-4px border-2 border-solid border-unraid-red/90 rounded-md">
     <li v-for="(error, index) in errors" :key="index" class="flex flex-col gap-8px">
-      <h3 class="text-18px">
+      <h3 class="text-18px py-8px px-16px text-white bg-unraid-red/90 font-semibold text-center">
         <span>{{ error.heading }}</span>
       </h3>
-      <div v-html="error.message" class="text-14px"></div>
+      <div v-html="error.message" class="text-14px pt-8px px-12px"></div>
       <nav v-if="error.actions">
-        <li v-for="(link, index) in error.actions" :key="`link_${index}`" class="-mx-8px">
-          <UpcDropdownItem :item="link" class="text-white" />
+        <li v-for="(link, index) in error.actions" :key="`link_${index}`">
+          <UpcDropdownItem :item="link" :rounded="false" />
         </li>
       </nav>
     </li>
diff --git a/components/UserProfile/DropdownItem.vue b/components/UserProfile/DropdownItem.vue
index 26d753497..513be1cab 100644
--- a/components/UserProfile/DropdownItem.vue
+++ b/components/UserProfile/DropdownItem.vue
@@ -5,9 +5,12 @@ import type { UserProfileLink } from '~/types/userProfile';
 
 export interface Props {
   item: ServerStateDataAction | UserProfileLink;
+  rounded: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  rounded: true,
+});
 
 const showExternalIconOnHover = computed(() => props.item?.external && props.item.icon !== ArrowTopRightOnSquareIcon);
 </script>
@@ -20,11 +23,12 @@ const showExternalIconOnHover = computed(() => props.item?.external && props.ite
     :title="item?.title ?? null"
     :target="item?.external ? '_blank' : null"
     :rel="item?.external ? 'noopener noreferrer' : null"
-    class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer rounded-md"
+    class="text-left text-14px w-full flex flex-row items-center justify-between gap-x-8px px-8px py-8px cursor-pointer"
     :class="{
       'text-beta bg-transparent hover:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange focus:text-white focus:bg-gradient-to-r focus:from-unraid-red focus:to-orange focus:outline-none': !item?.emphasize,
       'text-white bg-gradient-to-r from-unraid-red to-orange hover:from-unraid-red/60 hover:to-orange/60 focus:from-unraid-red/60 focus:to-orange/60': item?.emphasize,
       'group': showExternalIconOnHover,
+      'rounded-md': rounded,
     }"
   >
     <span class="leading-snug inline-flex flex-row items-center gap-x-8px">