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>