From 571e6bd0ecd9cfe94ffae025f3bf22ef4d3172f2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 7 Jul 2023 00:28:54 +0530
Subject: [PATCH] fix: Update broken design elements in dashboard (#7468)

---
 .../assets/scss/widgets/_buttons.scss         |  4 +--
 .../layout/sidebarComponents/OptionsMenu.vue  |  2 +-
 .../widgets/WootWriter/ReplyTopPanel.vue      |  4 +--
 .../widgets/conversation/bubble/Text.vue      | 26 +++++--------------
 4 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 8df496ef6..e7b840442 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -94,11 +94,11 @@
     }
 
     &.alert {
-      @apply bg-red-50 dark:bg-red-700 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800;
+      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
     }
 
     &.warning {
-      @apply bg-yellow-50 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-100 dark:hover:bg-yellow-800;
+      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-100 hover:bg-yellow-200 dark:hover:bg-yellow-200;
     }
   }
 
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
index 862d1c412..5e4f583da 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -3,7 +3,7 @@
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md drop-shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
       <availability-status />
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
index 3594d7c13..147854347 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -144,7 +144,7 @@ export default {
 
   .button--reply {
     border-radius: 0;
-    @apply border-r border-slate-50 dark:border-slate-700;
+    @apply border-r border-b-0 border-l-0 border-slate-50 dark:border-slate-700;
 
     &:hover,
     &:focus {
@@ -156,7 +156,7 @@ export default {
     border-radius: 0;
 
     &.is-active {
-      @apply border-r border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 border-slate-50 dark:border-slate-700;
       background: var(--y-50);
     }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
index d69abf626..e6aa951dd 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
@@ -10,15 +10,15 @@
     <letter v-else class="text-content" :html="message" />
     <button
       v-if="showQuoteToggle"
-      class="quoted-text--button"
+      class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
       @click="toggleQuotedContent"
     >
-      <span v-if="showQuotedContent">
-        <fluent-icon icon="chevron-up" class="fluent-icon" size="16" />
+      <span v-if="showQuotedContent" class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-up" size="16" />
         {{ $t('CHAT_LIST.HIDE_QUOTED_TEXT') }}
       </span>
-      <span v-else>
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="16" />
+      <span v-else class="flex items-center gap-0.5">
+        <fluent-icon icon="chevron-down" size="16" />
         {{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
       </span>
     </button>
@@ -104,25 +104,13 @@ export default {
 
 .show--quoted {
   blockquote {
-    display: block;
+    @apply block;
   }
 }
 
 .hide--quoted {
   blockquote {
-    display: none;
-  }
-}
-
-.quoted-text--button {
-  color: var(--s-400);
-  cursor: pointer;
-  font-size: var(--font-size-mini);
-  padding-bottom: var(--space-small);
-  padding-top: var(--space-small);
-
-  .fluent-icon {
-    margin-bottom: var(--space-minus-smaller);
+    @apply hidden;
   }
 }
 </style>