feat: Update locales page UI (#13053)

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

@@ -58,9 +58,10 @@ const handleAction = ({ action, value }) => {
         <span class="text-sm font-medium 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="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
+          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"
         >
           {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
         </span>
@@ -92,15 +93,16 @@ const handleAction = ({ action, value }) => {
           <Button
             icon="i-lucide-ellipsis-vertical"
             color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
+            ghost
+            xs
+            class="rounded-md group-hover:bg-n-alpha-2 [&>span]:size-3.5"
             @click="toggleDropdown()"
           />
 
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
+import { useI18n } from 'vue-i18n';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
 import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
@@ -19,6 +19,8 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const addLocaleDialogRef = ref(null);
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -31,20 +33,17 @@ const localeCount = computed(() => props.locales?.length);
 </script>
 
 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :header-title="t('HELP_CENTER.LOCALES_PAGE.HEADER')"
+    :create-button-label="t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+    :show-pagination-footer="false"
+    @create="openAddLocaleDialog"
+  >
     <template #header-actions>
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-4">
-          <span class="text-sm font-medium text-n-slate-12">
-            {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
-          </span>
-        </div>
-        <Button
-          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="openAddLocaleDialog"
-        />
+      <div class="flex items-start h-8 ltr:ml-1 rtl:mr-1">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
+        </span>
       </div>
     </template>
     <template #content>

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -630,6 +630,7 @@
       }
     },
     "LOCALES_PAGE": {
+      "HEADER": "Locales",
       "LOCALES_COUNT": "No locales available | {n} locale | {n} locales",
       "NEW_LOCALE_BUTTON_TEXT": "New locale",
       "LOCALE_CARD": {