Merge branch 'develop' into feat/ui-lib

app/javascript/dashboard/components-next/message/bubbles/Dyte.vue

@@ -74,7 +74,7 @@ const action = computed(() => ({
 
 <style lang="scss">
 .join-call-button {
-  margin: var(--space-small) 0;
+  margin: 0.5rem 0;
 }
 
 .video-call--container {
@@ -83,9 +83,9 @@ const action = computed(() => ({
   right: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--z-index-high);
-  padding: var(--space-smaller);
-  background: var(--b-800);
+  z-index: 1000;
+  padding: 0.25rem;
+  @apply bg-n-background;
 
   iframe {
     width: 100%;
@@ -95,7 +95,7 @@ const action = computed(() => ({
 
   button {
     position: absolute;
-    top: var(--space-smaller);
+    top: 0.25rem;
     right: 10rem;
   }
 }

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -119,7 +119,13 @@ const handleSeeOriginal = () => {
       >
         <div
           v-if="isExpandable && !isExpanded"
-          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end"
+          :class="{
+            'bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent':
+              isIncoming,
+            'bg-gradient-to-t from-n-solid-blue via-n-solid-blue via-20% to-transparent':
+              isOutgoing,
+          }"
         >
           <button
             class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"

app/javascript/dashboard/components-next/message/chips/File.vue

@@ -34,7 +34,7 @@ const displayFileName = computed(() => {
 const textColorClass = computed(() => {
   const colorMap = {
     '7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
-    csv: 'text-amber-12',
+    csv: 'text-n-amber-12',
     doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
     docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
     json: 'text-n-slate-12',