feat: Update settings pages UI (#13191)

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -29,7 +29,7 @@ const onToggle = () => {
       class="flex items-center select-none w-full m-0 cursor-grab justify-between drag-handle px-4 py-0 focus-visible:outline-none outline-none !transition-none"
       @click.stop="onToggle"
     >
-      <h5 class="text-n-slate-12 text-heading-2 mb-0 py-0 pr-2 pl-0">
+      <h5 class="text-n-slate-12 text-heading-3 mb-0 py-0 pr-2 pl-0">
         {{ title }}
       </h5>
       <div

app/javascript/dashboard/components/ChatListHeader.vue

@@ -53,7 +53,7 @@ const toggleConversationLayout = () => {
 <template>
   <div class="flex items-center justify-between gap-2 px-4 h-[3.25rem]">
     <div class="flex items-center justify-center min-w-0">
-      <h1 class="text-heading-1 truncate text-n-slate-12" :title="pageTitle">
+      <h1 class="text-heading-2 truncate text-n-slate-12" :title="pageTitle">
         {{ pageTitle }}
       </h1>
       <span

app/javascript/dashboard/components/FormSection.vue

@@ -1,31 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col items-start w-full gap-6">
-    <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-n-slate-12">
-        {{ title }}
-      </h4>
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-n-weak" />
-      </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-n-slate-12">
-        {{ description }}
-      </p>
-    </div>
-    <div class="flex flex-col w-full gap-6">
-      <slot />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/widgets/LoadingState.vue

@@ -11,7 +11,7 @@ defineProps({
     <h6
       class="flex items-center gap-3 text-base text-center w-100 text-n-slate-11"
     >
-      <span class="text-base font-medium text-n-slate-12">
+      <span class="text-body-main !text-base text-n-slate-12">
         {{ message }}
       </span>
       <Spinner class="text-n-brand" />

app/javascript/dashboard/components/widgets/SettingIntroBanner.vue

@@ -15,7 +15,7 @@ export default {
 
 <template>
   <div class="border-b border-solid border-n-weak/60">
-    <div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-8">
+    <div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-6">
       <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
         {{ headerTitle }}
       </h2>

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -134,7 +134,7 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
       <BackButton v-if="showBackButton" :back-url="backButtonUrl" />
 
       <div class="flex items-center gap-1 min-w-0 ltr:mr-2 rtl:ml-2">
-        <span class="text-heading-1 text-n-slate-12 truncate min-w-0">
+        <span class="text-heading-2 text-n-slate-12 truncate min-w-0">
           {{ currentContact.name }}
         </span>
         <Icon