feat: Dark Mode (#7471)

app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue

@@ -13,7 +13,7 @@
             small
           />
           <div class="inbox-name-wrap">
-            <inbox-name :inbox="inbox" class="margin-right-1" />
+            <inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
           </div>
         </div>
         <div>
@@ -25,7 +25,10 @@
           <span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
           {{ name }}
         </h5>
-        <h5 v-if="email" class="text-block-title email text-truncate">
+        <h5
+          v-if="email"
+          class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
+        >
           <span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
           {{ email }}
         </h5>
@@ -95,67 +98,37 @@ export default {
 
 <style scoped lang="scss">
 .conversation-item {
-  cursor: pointer;
-  display: flex;
-  padding: var(--space-small);
-  border-radius: var(--border-radius-small);
-
-  &:hover {
-    background-color: var(--s-25);
-  }
+  @apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
 }
 
 .meta-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-smaller);
+  @apply flex items-center justify-between mb-1;
 }
 .icon-wrap {
-  width: var(--space-medium);
-  height: var(--space-medium);
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--w-600);
-  border-radius: var(--border-radius-small);
-  background-color: var(--w-75);
+  @apply w-6 h-6 flex-shrink-0  bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
 }
 
 .inbox-name-wrap {
-  background-color: var(--s-25);
-  height: var(--space-two);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--border-radius-small);
-  width: fit-content;
-  margin-left: var(--space-smaller);
+  @apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
 }
 .conversation-details {
-  margin-left: var(--space-small);
-  flex-grow: 1;
-  min-width: 0;
+  @apply ml-2 flex-grow min-w-0;
 }
 
 .name {
-  flex-shrink: 0;
+  @apply flex-shrink-0;
 }
 .conversation-id,
 .name,
 .email {
-  margin: 0;
+  @apply m-0;
 }
 .created-at,
 .pre-text {
-  color: var(--s-600);
-  font-size: var(--font-size-mini);
-  font-weight: var(--font-weight-normal);
+  @apply text-slate-600 dark:text-slate-100 text-xs font-normal;
 }
 
 .user-details {
-  display: flex;
-  gap: var(--space-small);
+  @apply flex gap-2;
 }
 </style>