chore: Update typography in Help Center

app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue

@@ -21,8 +21,10 @@ const handleButtonClick = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+    <header
+      class="sticky top-0 z-10 px-6 lg:px-0 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
+      <div class="w-full max-w-5xl mx-auto lg:px-6">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +46,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+      <div class="w-full max-w-5xl mx-auto py-4 lg:px-6">
         <slot name="default" />
       </div>
     </main>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -15,7 +15,9 @@ const emit = defineEmits(['search', 'update:sort']);
 </script>
 
 <template>
-  <header class="sticky top-0 z-10">
+  <header
+    class="sticky top-0 z-10 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+  >
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
     >

app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue

@@ -43,6 +43,7 @@ const updateCurrentPage = page => {
           :current-page="currentPage"
           :total-items="totalItems"
           :items-per-page="25"
+          class="max-w-[105rem]"
           @update:current-page="updateCurrentPage"
         />
       </footer>

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -37,7 +37,7 @@ defineProps({
       <div
         class="flex flex-col items-center justify-end w-full h-full pb-20"
         :class="{
-          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-25% to-transparent':
+          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-40% to-transparent':
             showBackdrop,
         }"
       >

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -128,7 +128,7 @@ const handleClick = id => {
   <CardLayout class="[&>div]:!pt-3 group/articleCard hover:bg-n-alpha-1">
     <div class="flex justify-between w-full gap-1">
       <span
-        class="text-sm cursor-pointer py-1.5 font-medium underline-offset-2 group-hover/articleCard:text-n-blue-11 text-n-slate-12 line-clamp-1"
+        class="cursor-pointer py-1.5 text-heading-3 group-hover/articleCard:text-n-blue-11 text-n-slate-12 line-clamp-1"
         @click="handleClick(id)"
       >
         {{ title }}
@@ -171,7 +171,7 @@ const handleClick = id => {
             rounded-full
             class="shrink-0"
           />
-          <span class="text-sm font-420 truncate text-n-slate-11">
+          <span class="text-body-main truncate text-n-slate-11">
             {{ authorName || '-' }}
           </span>
         </div>
@@ -184,14 +184,14 @@ const handleClick = id => {
             {{ categoryIcon }}
           </span>
           <Icon v-else icon="i-lucide-shapes" class="size-4 shrink-0" />
-          <span class="text-sm font-420 truncate">
+          <span class="text-body-main truncate">
             {{ categoryName }}
           </span>
         </div>
         <div v-if="category" class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
         <div class="flex items-center gap-1.5 text-n-slate-11 shrink-0">
           <Icon icon="i-lucide-trending-up" class="size-4" />
-          <span class="text-sm font-420 whitespace-nowrap">
+          <span class="text-body-main whitespace-nowrap">
             {{
               t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.VIEWS', {
                 count: views,

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue

@@ -60,7 +60,7 @@ const handleAction = ({ action }) => {
       <div
         class="size-10 rounded-[0.625rem] mt-1 outline outline-1 outline-n-weak flex items-center justify-center flex-shrink-0"
       >
-        <span v-if="icon" class="text-sm font-420">
+        <span v-if="icon" class="text-body-para">
           {{ icon }}
         </span>
         <Icon v-else icon="i-lucide-shapes" class="size-4 shrink-0" />
@@ -69,13 +69,13 @@ const handleAction = ({ action }) => {
         <div class="flex justify-between w-full gap-2 h-6">
           <div class="flex items-center justify-start min-w-0 gap-2">
             <span
-              class="text-sm font-medium truncate group-hover/categoryCard:text-n-blue-11 cursor-pointer text-n-slate-12"
+              class="text-heading-3 truncate group-hover/categoryCard:text-n-blue-11 cursor-pointer text-n-slate-12"
               @click="handleClick(slug)"
             >
               {{ title }}
             </span>
             <div class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
-            <span class="text-sm text-n-slate-11 font-420 shrink-0">
+            <span class="text-body-main text-n-slate-11 shrink-0">
               {{
                 t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_CARD.ARTICLES_COUNT', {
                   count: articlesCount,
@@ -105,7 +105,7 @@ const handleAction = ({ action }) => {
         </div>
 
         <span
-          class="text-sm line-clamp-3"
+          class="text-body-main line-clamp-3"
           :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
         >
           {{ description }}

app/javascript/dashboard/components-next/HelpCenter/HelpCenterLayout.vue

@@ -115,7 +115,7 @@ const onClickCreateButton = () => {
                 v-if="activePortalName"
                 class="w-px h-3 rounded-2xl bg-n-strong ltr:ml-2 ltr:mr-3 rtl:mr-2 rtl:ml-3"
               />
-              <span v-if="headerTitle" class="text-sm font-420 text-n-slate-12">
+              <span v-if="headerTitle" class="text-body-main text-n-slate-12">
                 {{ headerTitle }}
               </span>
             </div>
@@ -124,19 +124,11 @@ const onClickCreateButton = () => {
             <Button
               v-if="createButtonLabel"
               :label="createButtonLabel"
-              icon="i-lucide-plus"
               size="sm"
               @click="onClickCreateButton"
             />
             <slot name="modal" :button-ref="createButtonRef" />
           </div>
-          <Button
-            v-if="createButtonLabel"
-            :label="createButtonLabel"
-            icon="i-lucide-plus"
-            size="sm"
-            @click="onClickCreateButton"
-          />
         </div>
         <slot name="header-actions" />
       </div>
@@ -151,7 +143,7 @@ const onClickCreateButton = () => {
         :current-page="currentPage"
         :total-items="totalItems"
         :items-per-page="itemsPerPage"
-        class="max-w-5xl"
+        class="max-w-[105rem]"
         @update:current-page="updateCurrentPage"
       />
     </footer>

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue

@@ -55,20 +55,20 @@ const handleAction = ({ action, value }) => {
   <CardLayout>
     <div class="flex justify-between gap-2">
       <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        <span class="text-heading-3 text-n-slate-12 line-clamp-1">
           {{ locale }} ({{ localeCode }})
         </span>
         <div v-if="isDefault" class="w-px h-3 bg-n-weak rounded-lg shrink-0" />
         <span
           v-if="isDefault"
-          class="text-xs font-440 outline outline-1 outline-n-container inline-flex items-center px-2 h-6 rounded-md bg-n-button-color"
+          class="text-button-small outline outline-1 outline-n-container inline-flex items-center px-2 h-6 rounded-md bg-n-button-color"
         >
           {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
         </span>
       </div>
       <div class="flex items-center justify-end gap-4">
         <div class="flex items-center gap-4">
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <span class="text-body-main text-n-slate-11 whitespace-nowrap">
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -77,7 +77,7 @@ const handleAction = ({ action, value }) => {
             }}
           </span>
           <div class="w-px h-3 bg-n-weak" />
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <span class="text-body-main text-n-slate-11 whitespace-nowrap">
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -116,7 +116,9 @@ const handleCreateAssistant = () => {
 
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6">
+    <header
+      class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
+    >
       <div class="w-full max-w-[60rem] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
@@ -232,6 +234,7 @@ const handleCreateAssistant = () => {
         :current-page="currentPage"
         :total-items="totalCount"
         :items-per-page="itemsPerPage"
+        class="max-w-[105rem]"
         @update:current-page="handlePageChange"
       />
     </footer>