From 9581264286c1244f693da3f3d3c4655ca220f40d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Fri, 1 Mar 2024 13:06:33 +0530
Subject: [PATCH] fix: Broken styles (#9046)

---
 app/javascript/dashboard/assets/scss/widgets/_base.scss  | 6 ++++++
 app/javascript/dashboard/assets/scss/widgets/_tabs.scss  | 2 +-
 .../components/widgets/conversation/ConversationCard.vue | 3 ++-
 .../dashboard/components/widgets/mentions/MentionBox.vue | 2 +-
 .../routes/dashboard/inbox/components/MenuItem.vue       | 2 --
 tailwind.config.js                                       | 9 +++++++++
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_base.scss b/app/javascript/dashboard/assets/scss/widgets/_base.scss
index 261df19e8..e64231dfc 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_base.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_base.scss
@@ -29,6 +29,12 @@ hr {
   @apply clear-both max-w-full h-0 my-5 mx-0 border-slate-300 dark:border-slate-600;
 }
 
+ul,
+ol,
+dl {
+  @apply mb-2 list-disc list-outside leading-[1.65];
+}
+
 // Form elements
 label {
   @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
index 3ef40a137..b9999fac9 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss
@@ -7,7 +7,7 @@
 }
 
 .tabs {
-  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
 }
 
 .tabs--with-scroll {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 44144f2d8..c17baac35 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -2,7 +2,8 @@
   <div
     class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
+      'animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+        isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
diff --git a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
index a3c2afac4..fb28f00c0 100644
--- a/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
+++ b/app/javascript/dashboard/components/widgets/mentions/MentionBox.vue
@@ -12,7 +12,7 @@
         @mouseover="onHover(index)"
       >
         <button
-          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-b border-solid border-slate-100 dark:border-slate-700"
+          class="flex group flex-col gap-0.5 overflow-hidden cursor-pointer items-start rounded-none py-2.5 px-2.5 justify-center w-full h-full text-left hover:bg-woot-50 dark:hover:bg-woot-800 border-x-0 border-t-0 border-b border-solid border-slate-100 dark:border-slate-700"
           :class="{
             ' bg-woot-25 dark:bg-woot-800': index === selectedIndex,
           }"
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
index ea8ea421d..cddad0d58 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/MenuItem.vue
@@ -1,6 +1,4 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-
 defineProps({
   label: {
     type: String,
diff --git a/tailwind.config.js b/tailwind.config.js
index 0c0073180..aa7a2a14a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -143,11 +143,20 @@ module.exports = {
         '50%': { opacity: 1 },
         '100%': { opacity: 0.4 },
       },
+      'card-select': {
+        '0%, 100%': {
+          transform: 'translateX(0)',
+        },
+        '50%': {
+          transform: 'translateX(1px)',
+        },
+      },
     },
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      'card-select': 'card-select 0.25s ease-in-out',
     },
   },
   plugins: [