From 162efff7119fb0a10ac718b73094700b654c213d Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 14 Mar 2024 17:05:27 +0530
Subject: [PATCH] chore: Ui fixes

---
 .../dashboard/inbox/components/InboxCard.vue       | 14 +++++++-------
 .../dashboard/inbox/components/InboxCardInfo.vue   |  7 ++++---
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
index dd68db2bc..fe839e235 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     role="button"
-    class="flex flex-col ltr:pl-5 rtl:pl-3 rtl:pr-5 ltr:pr-3 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
+    class="flex flex-col ltr:pl-5 rtl:pl-4 rtl:pr-5 ltr:pr-4 gap-2.5 py-3 w-full border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-25 dark:hover:bg-slate-800 cursor-pointer"
     :class="
       active
         ? 'bg-slate-25 dark:bg-slate-800 click-animation'
@@ -11,7 +11,7 @@
     @click="openConversation(notificationItem)"
   >
     <div
-      class="flex flex-row justify-between relative items-center w-full gap-2"
+      class="flex flex-row justify-between relative items-center w-full gap-1.5"
     >
       <div
         v-if="isUnread"
@@ -24,7 +24,7 @@
         size="16px"
       />
       <span
-        class="flex-1 text-slate-800 dark:text-slate-50 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        class="flex-1 text-slate-900 dark:text-white text-sm overflow-hidden text-ellipsis whitespace-nowrap"
         :class="isUnread ? 'font-medium' : 'font-normal'"
       >
         {{ pushTitle }}
@@ -37,12 +37,12 @@
     >
       <div
         v-if="snoozedUntilTime || hasLastSnoozed"
-        class="flex flex-row flex-1 gap-1 items-center"
+        class="flex flex-row flex-1 gap-1 items-center w-3/4"
       >
         <fluent-icon
           :icon="hasLastSnoozed ? 'snooze-timer' : 'sharp-timer'"
           type="outline"
-          class="text-woot-500 dark:text-woot-500"
+          class="text-woot-500 dark:text-woot-500 flex-shrink-0"
           size="16"
         />
         <span
@@ -79,7 +79,7 @@
         <PriorityIcon :priority="primaryActor.priority" />
         <StatusIcon :status="primaryActor.status" />
         <span
-          class="font-medium text-slate-600 dark:text-slate-300 text-xs whitespace-nowrap"
+          class="font-medium text-slate-500 dark:text-slate-400 text-xs whitespace-nowrap"
         >
           {{ lastActivityAt }}
         </span>
@@ -182,7 +182,7 @@ export default {
       const dynamicTime = this.dynamicTime(
         this.notificationItem?.last_activity_at
       );
-      return this.shortTimestamp(dynamicTime, true);
+      return this.shortTimestamp(dynamicTime);
     },
     menuItems() {
       const items = [
diff --git a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
index d46de181b..2e94860f9 100644
--- a/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/inbox/components/InboxCardInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center w-auto justify-start rounded-[4px] border border-slate-100 dark:border-slate-700/50 divide-x divide-slate-100 dark:divide-slate-700/50 bg-none overflow-hidden"
+    class="flex items-center w-auto justify-start rounded-[4px] border border-slate-75 dark:border-slate-700/50 divide-x divide-slate-75 dark:divide-slate-700/50 bg-none overflow-hidden"
   >
     <!-- Inbox icon -->
     <div
@@ -19,7 +19,7 @@
 
     <!-- Conversation ID -->
     <span
-      class="flex items-center py-0.5 px-1.5 font-medium text-slate-600 dark:text-slate-200 text-xs"
+      class="flex items-center py-0.5 px-1.5 font-medium text-slate-700 dark:text-slate-200 text-xs"
     >
       {{ conversationId }}
     </span>
@@ -37,6 +37,7 @@
         class="flex-shrink-0 w-2 h-2 rounded-sm"
       />
       <span
+        :title="label.title"
         class="text-xs font-medium truncate text-slate-700 dark:text-slate-200"
       >
         {{ label.title }}
@@ -62,7 +63,7 @@ const MAX_LABELS = 6;
 const MIN_LABELS = 1;
 
 const BASE_WIDTH = 380;
-const TOTAL_PADDING = 32;
+const TOTAL_PADDING = 36;
 const EFFECTIVE_WIDTH = BASE_WIDTH - TOTAL_PADDING;
 
 // 24 is the padding + gap + label color width