chore: Update typography in Help Center
This commit is contained in:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user