chore: Update typography in Help Center

This commit is contained in:
iamsivin
2026-01-07 11:48:35 +05:30
parent d1fb816243
commit 017bf17e06
15 changed files with 38 additions and 38 deletions
@@ -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,
@@ -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 }}
@@ -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>
@@ -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',