fix: Update broken design elements in dashboard (#7468)

chatwoot · Jul 6, 2023 · 571e6bd · 571e6bd
1 parent 528da1d
commit 571e6bd
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>