feat: update styles

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

@@ -78,7 +78,7 @@ const onVideoLoadError = () => {
     />
     <div
       v-else
-      class="flex items-center bg-n-alpha-1 gap-1 text-center px-5 py-4 rounded-lg"
+      class="flex items-center gap-1 px-5 py-4 text-center rounded-lg bg-n-alpha-1"
     >
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
       <p class="mb-0 text-n-slate-11">

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

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, onMounted, nextTick } from 'vue';
 import BaseAttachmentBubble from './BaseAttachment.vue';
-import Icon from 'next/icon/Icon.vue';
 import { useI18n } from 'vue-i18n';
 import maplibregl from 'maplibre-gl';
 
@@ -37,10 +36,6 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const senderName = computed(() => {
-  return props.sender.name;
-});
-
 const attachment = computed(() => {
   return props.attachments[0];
 });
@@ -98,7 +93,7 @@ onMounted(async () => {
     }"
   >
     <template #before>
-      <div id="map" class="max-w-md min-w-64 w-full h-28 -mb-12 z-10" />
+      <div id="map" class="z-10 w-full max-w-md -mb-12 min-w-64 h-28" />
     </template>
   </BaseAttachmentBubble>
 </template>

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

@@ -3,7 +3,7 @@ import BaseBubble from './Base.vue';
 </script>
 
 <template>
-  <BaseBubble class="p-3 text-sm" data-bubble-name="unsupported">
+  <BaseBubble class="px-4 py-3 text-sm" data-bubble-name="unsupported">
     {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
   </BaseBubble>
 </template>

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

@@ -29,14 +29,14 @@ const handleError = () => {
   >
     <div
       v-if="hasError"
-      class="flex flex-col size-full justify-center text-xs items-center bg-n-alpha-1 gap-1 text-center rounded-lg text-n-slate-11"
+      class="flex flex-col items-center justify-center gap-1 text-xs text-center rounded-lg size-full bg-n-alpha-1 text-n-slate-11"
     >
       <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
       {{ $t('COMPONENTS.MEDIA.LOADING_FAILED') }}
     </div>
     <img
       v-else
-      class="w-full h-full object-cover"
+      class="object-cover w-full h-full"
       :src="attachment.dataUrl"
       @error="handleError"
     />
@@ -46,7 +46,7 @@ const handleError = () => {
     v-model:show="showGallery"
     :attachment="useSnakeCase(attachment)"
     :all-attachments="filteredCurrentChatAttachments"
-    @error="onError"
+    @error="handleError"
     @close="() => (showGallery = false)"
   />
 </template>