chore: Use CardLayout component

app/javascript/dashboard/components-next/captain/assistant/FaqSuggestionCard.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
@@ -36,14 +37,12 @@ const language = computed(() =>
 </script>
 
 <template>
-  <article
-    class="group flex flex-col gap-4 rounded-xl border border-n-weak bg-n-solid-2 p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:border-n-strong hover:shadow-md"
-  >
+  <CardLayout>
     <div
       class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between"
     >
       <div class="min-w-0">
-        <div class="mb-3 flex flex-wrap items-center gap-2">
+        <div class="mb-2 flex flex-wrap items-center gap-2">
           <span
             class="inline-flex items-center gap-1.5 rounded-full bg-n-brand/10 px-2.5 py-1 text-xs font-medium text-n-blue-11"
           >
@@ -72,12 +71,12 @@ const language = computed(() =>
       />
     </div>
 
-    <p class="line-clamp-3 text-sm leading-6 text-n-slate-11">
+    <p class="line-clamp-2 text-sm leading-5 text-n-slate-11">
       {{ suggestion.answer }}
     </p>
 
     <div
-      class="flex flex-col gap-3 border-t border-n-weak pt-4 sm:flex-row sm:items-center sm:justify-between"
+      class="flex flex-col gap-3 border-t border-n-weak pt-2.5 sm:flex-row sm:items-center sm:justify-between"
     >
       <div
         class="flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-xs text-n-slate-10"
@@ -95,7 +94,7 @@ const language = computed(() =>
       <div class="flex items-center gap-2">
         <Button
           :label="$t('CAPTAIN.FAQ_SUGGESTIONS.DISMISS')"
-          icon="i-lucide-x"
+          icon="i-lucide-circle-x"
           size="sm"
           variant="ghost"
           color="slate"
@@ -112,5 +111,5 @@ const language = computed(() =>
         />
       </div>
     </div>
-  </article>
+  </CardLayout>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/response/FaqSuggestionReviewDialog.vue

@@ -123,20 +123,33 @@ defineExpose({ dialogRef });
     width="3xl"
     position="top"
     overflow-y-auto
-    :title="$t('CAPTAIN.FAQ_SUGGESTIONS.DETAILS.TITLE')"
     :show-cancel-button="false"
     :show-confirm-button="false"
     @close="emit('close')"
   >
-    <template #description>
-      <p class="mb-0 text-sm text-n-slate-11">
-        {{
-          $t('CAPTAIN.FAQ_SUGGESTIONS.DETAILS.DESCRIPTION', {
-            count: suggestion.source_count,
-          })
-        }}
-      </p>
-    </template>
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium leading-6 text-n-slate-12">
+          {{ $t('CAPTAIN.FAQ_SUGGESTIONS.DETAILS.TITLE') }}
+        </h3>
+        <p class="mb-0 text-sm text-n-slate-11">
+          {{
+            $t('CAPTAIN.FAQ_SUGGESTIONS.DETAILS.DESCRIPTION', {
+              count: suggestion.source_count,
+            })
+          }}
+        </p>
+      </div>
+      <Button
+        icon="i-lucide-x"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        class="-me-1.5 -mt-1.5 shrink-0"
+        :aria-label="$t('DIALOG.BUTTONS.CANCEL')"
+        @click="close"
+      />
+    </div>
 
     <div
       class="grid min-h-0 grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_18rem]"
@@ -251,7 +264,7 @@ defineExpose({ dialogRef });
       >
         <Button
           :label="$t('CAPTAIN.FAQ_SUGGESTIONS.DISMISS')"
-          icon="i-lucide-x"
+          icon="i-lucide-circle-x"
           variant="ghost"
           color="ruby"
           :is-loading="isDismissing"
@@ -259,13 +272,6 @@ defineExpose({ dialogRef });
           @click="handleDismiss"
         />
         <div class="flex items-center justify-end gap-2">
-          <Button
-            :label="$t('DIALOG.BUTTONS.CANCEL')"
-            variant="faded"
-            color="slate"
-            :disabled="isSaving || isDismissing"
-            @click="close"
-          />
           <Button
             :label="$t('CAPTAIN.FAQ_SUGGESTIONS.SAVE')"
             variant="faded"