LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Remove older UI (#11720)

Browse Source
This commit is contained in:
Sivin Varghese
2025-07-01 09:43:44 +05:30
committed by GitHub
parent 58da92a252
commit 24ea968b00
369 changed files with 974 additions and 9363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue
View File

@@ -40,9 +40,9 @@ const handleSubmit = campaignDetails => {
<template>
<div
class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
>
<h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
<h3 class="text-base font-medium text-n-slate-12">
{{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
</h3>
<LiveChatCampaignForm

2
app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue
View File

@@ -306,7 +306,7 @@ defineExpose({ prepareCampaignDetails, isSubmitDisabled });
variant="faded"
color="slate"
:label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

4
app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue
View File

@@ -39,9 +39,9 @@ const handleClose = () => emit('close');
<template>
<div
class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
>
<h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
<h3 class="text-base font-medium text-n-slate-12">
{{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
</h3>
<SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />

2
app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue
View File

@@ -174,7 +174,7 @@ const handleSubmit = async () => {
color="slate"
type="button"
:label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

2
app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue
View File

@@ -130,7 +130,7 @@ const onMergeContacts = async () => {
variant="faded"
color="slate"
:label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="resetState"
/>
<Button

2
app/javascript/dashboard/components-next/Editor/Editor.vue
View File

@@ -35,7 +35,7 @@ const messageClass = computed(() => {
case 'error':
return 'text-n-ruby-9 dark:text-n-ruby-9';
case 'success':
return 'text-green-500 dark:text-green-400';
return 'text-n-teal-10 dark:text-n-teal-10';
default:
return 'text-n-slate-11 dark:text-n-slate-11';
}

4
app/javascript/dashboard/components-next/EmptyStateLayout.vue
View File

@@ -35,12 +35,12 @@ defineProps({
<div class="flex flex-col items-center justify-center gap-6">
<div class="flex flex-col items-center justify-center gap-3">
<h2
class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
>
{{ title }}
</h2>
<p
class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
>
{{ subtitle }}
</p>

2
app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue
View File

@@ -70,7 +70,7 @@ const category = {
<div
v-for="(article, index) in articles"
:key="index"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<ArticleCard
:id="article.id"

2
app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue
View File

@@ -32,7 +32,7 @@ const categories = [
<div
v-for="(category, index) in categories"
:key="index"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<CategoryCard
:id="category.id"

6
app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue
View File

@@ -121,11 +121,7 @@ const handleAction = ({ action, value }) => {
</div>
<span
class="text-sm line-clamp-3"
:class="
hasDescription
? 'text-slate-500 dark:text-slate-400'
: 'text-slate-400 dark:text-slate-700'
"
:class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
>
{{ description }}
</span>

2
app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue
View File

@@ -8,7 +8,7 @@ import ArticleEmptyState from './ArticleEmptyState.vue';
:layout="{ type: 'single', width: '1100px' }"
>
<Variant title="Article Empty State">
<div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
<div class="w-full h-full px-20 mx-auto bg-n-background">
<ArticleEmptyState />
</div>
</Variant>

2
app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue
View File

@@ -8,7 +8,7 @@ import PortalEmptyState from './PortalEmptyState.vue';
:layout="{ type: 'single', width: '1100px' }"
>
<Variant title="Portal Empty State">
<div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
<div class="w-full h-full px-20 mx-auto bg-n-background">
<PortalEmptyState />
</div>
</Variant>

2
app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue
View File

@@ -14,7 +14,7 @@ const locales = [
:layout="{ type: 'grid', width: '800px' }"
>
<Variant title="Locale Card">
<div class="px-10 py-4 bg-white dark:bg-slate-900">
<div class="px-10 py-4 bg-n-background">
<div v-for="(locale, index) in locales" :key="index" class="px-20 py-2">
<LocaleCard
:locale="locale.name"

14
app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue
View File

@@ -55,9 +55,7 @@ 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-slate-900 dark:text-slate-50 line-clamp-1"
>
<span class="text-sm font-medium text-n-slate-12 line-clamp-1">
{{ locale }} ({{ localeCode }})
</span>
<span
@@ -69,9 +67,7 @@ const handleAction = ({ action, value }) => {
</div>
<div class="flex items-center justify-end gap-4">
<div class="flex items-center gap-4">
<span
class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
>
<span class="text-sm text-n-slate-11 whitespace-nowrap">
{{
$t(
'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -79,10 +75,8 @@ const handleAction = ({ action, value }) => {
)
}}
</span>
<div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
<span
class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
>
<div class="w-px h-3 bg-n-weak" />
<span class="text-sm text-n-slate-11 whitespace-nowrap">
{{
$t(
'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',

8
app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
View File

@@ -146,7 +146,7 @@ const previewArticle = () => {
<style lang="scss" scoped>
::v-deep {
.ProseMirror .empty-node::before {
@apply text-slate-200 dark:text-slate-500 text-base;
@apply text-n-slate-10 text-base;
}
.ProseMirror-menubar-wrapper {
@@ -161,7 +161,7 @@ const previewArticle = () => {
.editor-root .has-selection {
.ProseMirror-menubar {
@apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
@apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
display: flex;
top: var(--selection-top, auto) !important;
left: var(--selection-left, 0) !important;
@@ -180,6 +180,10 @@ const previewArticle = () => {
}
}
}
.ProseMirror-menu-active {
@apply bg-n-slate-3;
}
}
}
}

4
app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue
View File

@@ -206,7 +206,7 @@ onMounted(() => {
/>
</OnClickOutside>
</div>
<div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
<div class="w-px h-3 bg-n-weak" />
<div class="relative">
<OnClickOutside @trigger="openCategoryList = false">
<Button
@@ -239,7 +239,7 @@ onMounted(() => {
</OnClickOutside>
</div>
<div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
<div class="w-px h-3 bg-n-weak" />
<div class="relative">
<OnClickOutside @trigger="openProperties = false">
<Button

2
app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
View File

@@ -128,7 +128,7 @@ const updateArticleStatus = async ({ value }) => {
<div class="flex items-center gap-4">
<span
v-if="isUpdating || isSaved"
class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
class="text-xs font-medium transition-all duration-300 text-n-slate-11"
>
{{ statusText }}
</span>

2
app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue
View File

@@ -64,7 +64,7 @@ const articles = [
<template>
<Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
<Variant title="All Articles">
<div class="w-full min-h-screen bg-white dark:bg-slate-900">
<div class="w-full min-h-screen bg-n-background">
<ArticlesPage :articles="articles" />
</div>
</Variant>

2
app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue
View File

@@ -201,7 +201,7 @@ const categories = [
<template>
<Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
<Variant title="All Categories">
<div class="w-full min-h-screen bg-white dark:bg-slate-900">
<div class="w-full min-h-screen bg-n-background">
<CategoriesPage :categories="categories" />
</div>
</Variant>

4
app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue
View File

@@ -90,9 +90,9 @@ const handleCategory = async formData => {
<template>
<div
class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
>
<h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
<h3 class="text-base font-medium text-n-slate-12">
{{
t(
`HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`

2
app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue
View File

@@ -246,7 +246,7 @@ defineExpose({ state, isSubmitDisabled });
variant="faded"
color="slate"
:label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

6
app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue
View File

@@ -147,10 +147,8 @@ const handleBreadcrumbClick = () => {
/>
</OnClickOutside>
</div>
<div class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800" />
<span
class="min-w-0 text-sm font-medium truncate text-slate-800 dark:text-slate-100"
>
<div class="w-px h-3.5 rounded my-auto bg-n-weak" />
<span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
{{
t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
n: categoriesCount,

2
app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue
View File

@@ -44,7 +44,7 @@ const locales = [
<template>
<Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
<Variant title="All Locales">
<div class="w-full min-h-screen bg-white dark:bg-slate-900">
<div class="w-full min-h-screen bg-n-background">
<LocalesPage :locales="locales" />
</div>
</Variant>

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

@@ -35,7 +35,7 @@ const localeCount = computed(() => props.locales?.length);
<template #header-actions>
<div class="flex items-center justify-between">
<div class="flex items-center gap-4">
<span class="text-sm font-medium text-slate-800 dark:text-slate-100">
<span class="text-sm font-medium text-n-slate-12">
{{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
</span>
</div>

14
app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
View File

@@ -211,7 +211,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
</label>
@@ -229,7 +229,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
</label>
@@ -245,7 +245,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
</label>
@@ -261,7 +261,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
</label>
@@ -281,7 +281,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
</label>
@@ -299,7 +299,7 @@ const handleAvatarDelete = () => {
class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
>
<label
class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
</label>
@@ -317,7 +317,7 @@ const handleAvatarDelete = () => {
</div>
<div class="flex items-start justify-between w-full gap-2">
<label
class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
>
{{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
</label>

2
app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue
View File

@@ -5,7 +5,7 @@ import PortalSettings from './PortalSettings.vue';
<template>
<Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
<Variant title="Default">
<div class="w-[1000px] min-h-screen bg-white dark:bg-slate-900">
<div class="w-[1000px] min-h-screen bg-n-background">
<PortalSettings />
</div>
</Variant>

4
app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
View File

@@ -81,13 +81,13 @@ const handleDeletePortal = () => {
:is-fetching="isFetching"
@update-portal="handleUpdatePortal"
/>
<div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
<div class="w-full h-px bg-n-weak" />
<PortalConfigurationSettings
:active-portal="activePortal"
:is-fetching="isFetching"
@update-portal-configuration="handleUpdatePortalConfiguration"
/>
<div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
<div class="w-full h-px bg-n-weak" />
<div class="flex items-end justify-between w-full gap-4">
<div class="flex flex-col gap-2">
<h6 class="text-base font-medium text-n-slate-12">

2
app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue
View File

@@ -32,7 +32,7 @@ const portals = [
:layout="{ type: 'grid', width: '510px' }"
>
<Variant title="Portal Switcher">
<div class="h-[500px] p-4 bg-slate-100 dark:bg-slate-900">
<div class="h-[500px] p-4 bg-n-slate-2 dark:bg-n-background">
<PortalSwitcher
:portals="portals"
header="Choose a Portal"

4
app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue
View File

@@ -100,7 +100,7 @@ const redirectToPortalHomePage = () => {
<div class="flex flex-col gap-1">
<div class="flex items-center gap-2">
<h2
class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
class="text-base font-medium cursor-pointer text-n-slate-12 w-fit hover:underline"
@click="redirectToPortalHomePage"
>
{{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
@@ -115,7 +115,7 @@ const redirectToPortalHomePage = () => {
@click="onClickPreviewPortal"
/>
</div>
<p class="text-sm text-slate-600 dark:text-slate-300">
<p class="text-sm text-n-slate-11">
{{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
</p>
</div>

14
app/javascript/dashboard/components-next/avatar/Avatar.story.vue
View File

@@ -5,7 +5,7 @@ import Avatar from './Avatar.vue';
<template>
<Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
<Variant title="Default">
<div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
<div class="flex p-4 space-x-4 bg-n-background">
<Avatar
name=""
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
@@ -16,7 +16,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="Different Shapes">
<div class="gap-4 p-4 bg-white dark:bg-slate-900">
<div class="gap-4 p-4 bg-n-background">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
name=""
@@ -34,7 +34,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="Different Sizes">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-4 p-4 bg-n-background">
<Avatar
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
:size="48"
@@ -57,7 +57,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="With Status">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-4 p-4 bg-n-background">
<Avatar
src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
status="online"
@@ -77,7 +77,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="With Custom Icon">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-4 p-4 bg-n-background">
<Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
<Avatar
name="Custom Industry"
@@ -88,7 +88,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="Upload States">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-4 p-4 bg-n-background">
<!-- Empty state with upload -->
<Avatar name="Upload New" allow-upload :size="48" />
@@ -103,7 +103,7 @@ import Avatar from './Avatar.vue';
</Variant>
<Variant title="Name Initials">
<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-4 p-4 bg-n-background">
<Avatar name="Catherine" :size="48" />
<Avatar name="John Doe" :size="48" />
<Avatar name="Rose Doe John" :size="48" />

10
app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue
View File

@@ -29,32 +29,32 @@ const longBreadcrumb = ref([
:layout="{ type: 'grid', width: '800px' }"
>
<Variant title="Single Item">
<div class="w-full p-4 bg-white dark:bg-slate-900">
<div class="w-full p-4 bg-n-background">
<Breadcrumb :items="singleItem" />
</div>
</Variant>
<Variant title="Two Items">
<div class="w-full p-4 bg-white dark:bg-slate-900">
<div class="w-full p-4 bg-n-background">
<Breadcrumb :items="twoItems" />
</div>
</Variant>
<Variant title="Three Items with Count">
<div class="w-full p-4 bg-white dark:bg-slate-900">
<div class="w-full p-4 bg-n-background">
<Breadcrumb :items="threeItems" count-label="articles" />
</div>
</Variant>
<Variant title="Long Breadcrumb">
<div class="w-full p-4 bg-white dark:bg-slate-900">
<div class="w-full p-4 bg-n-background">
<Breadcrumb :items="longBreadcrumb" count-label="articles" />
</div>
</Variant>
<Variant title="RTL Support">
<div dir="rtl">
<div class="w-full p-4 bg-white dark:bg-slate-900">
<div class="w-full p-4 bg-n-background">
<Breadcrumb :items="threeItems" count-label="articles" />
</div>
</div>

4
app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
View File

@@ -36,9 +36,7 @@ const onClick = event => {
icon="i-lucide-chevron-right"
class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
/>
<span
class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
>
<span class="text-sm truncate text-n-slate-12 max-w-56">
{{ item.emoji ? item.emoji : '' }} {{ item.label }}
</span>
</template>

20
app/javascript/dashboard/components-next/button/Button.story.vue
View File

@@ -11,7 +11,7 @@ const SIZES = ['default', 'sm', 'lg'];
<Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
<!-- Basic Variants -->
<Variant title="Basic Variants">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button
v-for="variant in VARIANTS"
:key="variant"
@@ -23,7 +23,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Colors -->
<Variant title="Color Variants">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button
v-for="color in COLORS"
:key="color"
@@ -35,16 +35,14 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Sizes -->
<Variant title="Size Variants">
<div
class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
>
<div class="flex flex-wrap items-center gap-2 p-4 bg-n-background">
<Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
</div>
</Variant>
<!-- Icons -->
<Variant title="Icons">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button label="Leading Icon" icon="i-lucide-plus" />
<Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
<Button icon="i-lucide-plus" />
@@ -53,7 +51,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Loading State -->
<Variant title="Loading State">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button label="Loading" is-loading />
<Button label="Loading" variant="outline" is-loading />
<Button is-loading icon="i-lucide-plus" />
@@ -62,7 +60,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Disabled State -->
<Variant title="Disabled State">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button label="Disabled" disabled />
<Button label="Disabled Outline" variant="outline" disabled />
<Button label="Disabled Icon" icon="delete" disabled />
@@ -78,7 +76,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Color Combinations -->
<Variant title="Color & Variant Combinations">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<template v-for="color in COLORS" :key="color">
<Button
v-for="variant in VARIANTS"
@@ -93,7 +91,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Icon Positions -->
<Variant title="Icon Positions & Sizes">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<template v-for="size in SIZES" :key="size">
<Button
:label="`${size} Leading`"
@@ -113,7 +111,7 @@ const SIZES = ['default', 'sm', 'lg'];
<!-- Ghost & Link Variants -->
<Variant title="Ghost & Link Variants">
<div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
<div class="flex flex-wrap gap-2 p-4 bg-n-background">
<Button label="Ghost Button" variant="ghost" color="slate" />
<Button
label="Ghost with Icon"

4
app/javascript/dashboard/components-next/button/ConfirmButton.story.vue
View File

@@ -15,7 +15,7 @@ const incrementCount = () => {
:layout="{ type: 'grid', width: '400px' }"
>
<Variant title="Basic">
<div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
<div class="grid gap-2 p-4 bg-n-background">
<p>{{ count }}</p>
<ConfirmButton
label="Delete"
@@ -26,7 +26,7 @@ const incrementCount = () => {
</Variant>
<Variant title="Color Change">
<div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
<div class="grid gap-2 p-4 bg-n-background">
<p>{{ count }}</p>
<ConfirmButton
label="Archive"

2
app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
View File

@@ -12,7 +12,7 @@ import { assistantsList } from 'dashboard/components-next/captain/pageComponents
<div
v-for="(assistant, index) in assistantsList"
:key="index"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<AssistantCard
:id="assistant.id"

2
app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
View File

@@ -12,7 +12,7 @@ import { documentsList } from 'dashboard/components-next/captain/pageComponents/
<div
v-for="(doc, index) in documentsList"
:key="index"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<DocumentCard
:id="doc.id"

2
app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
View File

@@ -12,7 +12,7 @@ import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyS
<div
v-for="inbox in inboxes"
:key="inbox.id"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<InboxCard :id="inbox.id" :inbox="inbox" />
</div>

2
app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
View File

@@ -12,7 +12,7 @@ import { responsesList } from 'dashboard/components-next/captain/pageComponents/
<div
v-for="(response, index) in responsesList"
:key="index"
class="px-20 py-4 bg-white dark:bg-slate-900"
class="px-20 py-4 bg-n-background"
>
<ResponseCard
:id="response.id"

2
app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
View File

@@ -159,7 +159,7 @@ watch(
variant="faded"
color="slate"
:label="t('CAPTAIN.FORM.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

2
app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue
View File

@@ -99,7 +99,7 @@ const handleSubmit = async () => {
variant="faded"
color="slate"
:label="t('CAPTAIN.FORM.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

2
app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue
View File

@@ -100,7 +100,7 @@ const handleSubmit = async () => {
variant="faded"
color="slate"
:label="t('CAPTAIN.FORM.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

2
app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue
View File

@@ -146,7 +146,7 @@ watch(
variant="faded"
color="slate"
:label="t('CAPTAIN.FORM.CANCEL')"
class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
@click="handleCancel"
/>
<Button

2
app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue
View File

@@ -90,7 +90,7 @@ const pickerRef = ref(null);
input,
.vc-input__input {
@apply bg-n-background text-slate-900 dark:text-slate-50 rounded-md shadow-none;
@apply bg-n-background text-n-slate-12 rounded-md shadow-none;
}
.vc-input__label {

4
app/javascript/dashboard/components-next/combobox/ComboBox.story.vue
View File

@@ -15,14 +15,14 @@ const selectedValue = ref('');
<template>
<Story title="Components/ComboBox" :layout="{ type: 'grid', width: '300px' }">
<Variant title="Default">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<ComboBox v-model="selectedValue" :options="options" />
<p class="mt-2">Selected value: {{ selectedValue }}</p>
</div>
</Variant>
<Variant title="Disabled">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<ComboBox :options="options" disabled />
</div>
</Variant>

7
app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue
View File

@@ -69,7 +69,7 @@ defineExpose({
:value="searchValue"
type="search"
:placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
@input="onInputSearch"
/>
</div>
@@ -102,10 +102,7 @@ defineExpose({
class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
/>
</li>
<li
v-if="options.length === 0"
class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
>
<li v-if="options.length === 0" class="px-3 py-2 text-sm text-n-slate-11">
{{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
</li>
</ul>

8
app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue
View File

@@ -20,14 +20,14 @@ const preselectedValues = ref([1, 2]);
:layout="{ type: 'grid', width: '300px' }"
>
<Variant title="Default">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<TagMultiSelectComboBox v-model="selectedValues" :options="options" />
<p class="mt-2">Selected values: {{ selectedValues }}</p>
</div>
</Variant>
<Variant title="With Preselected Values">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<TagMultiSelectComboBox
v-model="preselectedValues"
:options="options"
@@ -37,13 +37,13 @@ const preselectedValues = ref([1, 2]);
</Variant>
<Variant title="Disabled">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<TagMultiSelectComboBox :options="options" disabled />
</div>
</Variant>
<Variant title="With Error">
<div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
<div class="w-full p-4 bg-n-background h-80">
<TagMultiSelectComboBox
:options="options"
has-error

5
app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue
View File

@@ -49,7 +49,10 @@ const toggleSidebar = () => {
</script>
<template>
<div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
<div
v-if="showCopilotLauncher"
class="fixed bottom-4 ltr:right-4 rtl:left-4 z-50"
>
<div class="rounded-full bg-n-alpha-2 p-1">
<Button
icon="i-woot-captain"

8
app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue
View File

@@ -20,7 +20,7 @@ const handleAction = () => {
<template>
<Story title="Components/DropdownMenu" :layout="{ type: 'grid', width: 300 }">
<Variant title="Default">
<div class="p-4 bg-white h-72 dark:bg-slate-900">
<div class="p-4 bg-n-background h-72">
<div class="relative">
<Button label="Open Menu" size="sm" @click="toggleDropdown" />
<DropdownMenu
@@ -34,13 +34,13 @@ const handleAction = () => {
</Variant>
<Variant title="Always Open">
<div class="p-4 bg-white h-72 dark:bg-slate-900">
<div class="p-4 bg-n-background h-72">
<DropdownMenu :menu-items="menuItems" @action="handleAction" />
</div>
</Variant>
<Variant title="Custom Items">
<div class="p-4 bg-white h-72 dark:bg-slate-900">
<div class="p-4 bg-n-background h-72">
<DropdownMenu
:menu-items="[
{ label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
@@ -53,7 +53,7 @@ const handleAction = () => {
</Variant>
<Variant title="With search">
<div class="p-4 bg-white h-72 dark:bg-slate-900">
<div class="p-4 bg-n-background h-72">
<DropdownMenu
:menu-items="[
{ label: 'Custom 1', action: 'custom1', icon: 'file-upload' },

2
app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
View File

@@ -51,7 +51,7 @@ const menuItems = ref([
:layout="{ type: 'grid', width: 400, height: 800 }"
>
<Variant title="Profile Menu">
<div class="p-4 bg-white h-[500px] dark:bg-slate-900">
<div class="p-4 bg-n-background h-[500px]">
<DropdownContainer>
<template #trigger="{ toggle }">
<Button label="Open Menu" size="sm" @click="toggle" />

14
app/javascript/dashboard/components-next/inline-input/InlineInput.story.vue
View File

@@ -8,13 +8,13 @@ import InlineInput from './InlineInput.vue';
:layout="{ type: 'grid', width: '400' }"
>
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<InlineInput id="inline-input-1" placeholder="Default InlineInput" />
</div>
</Variant>
<Variant title="With Label">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<InlineInput
id="inline-input-2"
label="Username"
@@ -24,7 +24,7 @@ import InlineInput from './InlineInput.vue';
</Variant>
<Variant title="Disabled">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<InlineInput
id="inline-input-3"
label="Disabled InlineInput"
@@ -35,24 +35,24 @@ import InlineInput from './InlineInput.vue';
</Variant>
<Variant title="With Custom Classes">
<div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
<div class="flex flex-col gap-4 p-4 bg-n-background">
<InlineInput
id="inline-input-4"
label="Custom Input Class"
placeholder="Custom input style"
custom-input-class="placeholder:text-green-200 dark:placeholder:text-green-800"
custom-input-class="placeholder:text-n-teal-6 dark:placeholder:text-n-teal-6"
/>
<InlineInput
id="inline-input-5"
label="Custom Label Class"
placeholder="Custom label style"
custom-label-class="text-green-600 dark:text-green-400"
custom-label-class="text-n-teal-6 dark:text-n-teal-6"
/>
</div>
</Variant>
<Variant title="Different Types">
<div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
<div class="flex flex-col gap-4 p-4 bg-n-background">
<InlineInput
id="inline-input-6"
label="Text"

14
app/javascript/dashboard/components-next/input/Input.story.vue
View File

@@ -5,25 +5,25 @@ import Input from './Input.vue';
<template>
<Story title="Components/Input" :layout="{ type: 'grid', width: '400' }">
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<Input placeholder="Default Input" />
</div>
</Variant>
<Variant title="With Label">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<Input label="Username" placeholder="Enter your username" />
</div>
</Variant>
<Variant title="Disabled">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<Input label="Disabled Input" placeholder="Can't type here" disabled />
</div>
</Variant>
<Variant title="With Message">
<div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
<div class="flex flex-col gap-4 p-4 bg-n-background">
<Input
label="Email"
placeholder="Enter your email"
@@ -46,7 +46,7 @@ import Input from './Input.vue';
</Variant>
<Variant title="Different Types">
<div class="flex flex-col gap-4 p-4 bg-white dark:bg-slate-800">
<div class="flex flex-col gap-4 p-4 bg-n-background">
<Input label="Text" type="text" placeholder="Text input" />
<Input label="Number" type="number" placeholder="Number input" />
<Input label="Password" type="password" placeholder="Password input" />
@@ -56,11 +56,11 @@ import Input from './Input.vue';
</Variant>
<Variant title="Custom Input Class">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<Input
label="Custom Style"
placeholder="Custom input class"
custom-input-class="border-yellow-500 dark:border-yellow-700"
custom-input-class="border-n-amber-5 dark:border-n-amber-5"
/>
</div>
</Variant>

2
app/javascript/dashboard/components-next/input/Input.vue
View File

@@ -38,7 +38,7 @@ const messageClass = computed(() => {
case 'error':
return 'text-n-ruby-9 dark:text-n-ruby-9';
case 'success':
return 'text-green-500 dark:text-green-400';
return 'text-n-teal-10 dark:text-n-teal-10';
default:
return 'text-n-slate-11 dark:text-n-slate-11';
}

10
app/javascript/dashboard/components-next/message/bubbles/Dyte.vue
View File

@@ -74,7 +74,7 @@ const action = computed(() => ({
<style lang="scss">
.join-call-button {
margin: var(--space-small) 0;
margin: 0.5rem 0;
}
.video-call--container {
@@ -83,9 +83,9 @@ const action = computed(() => ({
right: 0;
width: 100%;
height: 100%;
z-index: var(--z-index-high);
padding: var(--space-smaller);
background: var(--b-800);
z-index: 1000;
padding: 0.25rem;
@apply bg-n-background;
iframe {
width: 100%;
@@ -95,7 +95,7 @@ const action = computed(() => ({
button {
position: absolute;
top: var(--space-smaller);
top: 0.25rem;
right: 10rem;
}
}

2
app/javascript/dashboard/components-next/message/chips/File.vue
View File

@@ -34,7 +34,7 @@ const displayFileName = computed(() => {
const textColorClass = computed(() => {
const colorMap = {
'7z': 'dark:text-[#EDEEF0] text-[#2F265F]',
csv: 'text-amber-12',
csv: 'text-n-amber-12',
doc: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
docx: 'dark:text-[#D6E1FF] text-[#1F2D5C]', // indigo-12
json: 'text-n-slate-12',

10
app/javascript/dashboard/components-next/pagination/PaginationFooter.story.vue
View File

@@ -23,7 +23,7 @@ const singlePageState = createPaginationState(1, 10, 16);
:layout="{ type: 'grid', width: '957' }"
>
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<PaginationFooter
:current-page="defaultState.currentPage.value"
:total-items="defaultState.totalItems"
@@ -34,7 +34,7 @@ const singlePageState = createPaginationState(1, 10, 16);
</Variant>
<Variant title="Middle Page">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<PaginationFooter
:current-page="middlePageState.currentPage.value"
:total-items="middlePageState.totalItems"
@@ -45,7 +45,7 @@ const singlePageState = createPaginationState(1, 10, 16);
</Variant>
<Variant title="Last Page">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<PaginationFooter
:current-page="lastPageState.currentPage.value"
:total-items="lastPageState.totalItems"
@@ -56,7 +56,7 @@ const singlePageState = createPaginationState(1, 10, 16);
</Variant>
<Variant title="Custom Items Per Page">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<PaginationFooter
:current-page="customItemsState.currentPage.value"
:total-items="customItemsState.totalItems"
@@ -67,7 +67,7 @@ const singlePageState = createPaginationState(1, 10, 16);
</Variant>
<Variant title="Single Page">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<PaginationFooter
:current-page="singlePageState.currentPage.value"
:total-items="singlePageState.totalItems"

3
app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue
View File

@@ -23,10 +23,11 @@ const showBadge = useMapGetter(props.getterKeys.badge);
:is="to ? 'router-link' : 'div'"
class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
role="button"
draggable="false"
:to="to"
:title="label"
:class="{
'n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
'text-n-blue-text bg-n-alpha-2 font-medium': isActive && !hasActiveChild,
'text-n-slate-12 font-medium': hasActiveChild,
'text-n-slate-11 hover:bg-n-alpha-2': !isActive && !hasActiveChild,
}"

2
app/javascript/dashboard/components-next/sidebar/SidebarGroupLeaf.vue
View File

@@ -33,7 +33,7 @@ const shouldRenderComponent = computed(() => {
:title="label"
class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
:class="{
'n-blue-text bg-n-alpha-2 active': active,
'text-n-blue-text bg-n-alpha-2 active': active,
}"
>
<component

6
app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
View File

@@ -111,11 +111,7 @@ const allowedMenuItems = computed(() => {
</script>
<template>
<DropdownContainer
class="relative w-full min-w-0"
:class="{ 'z-20': isOpen }"
@close="emit('close')"
>
<DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
<template #trigger="{ toggle, isOpen }">
<button
class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"

6
app/javascript/dashboard/components-next/switch/Switch.vue
View File

@@ -19,7 +19,7 @@ const updateValue = () => {
<template>
<button
type="button"
class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-primary-500 focus:ring-offset-n-slate-2 focus:ring-offset-2"
class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2"
:class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
role="switch"
:aria-checked="modelValue"
@@ -30,8 +30,8 @@ const updateValue = () => {
class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
:class="
modelValue
? 'translate-x-3 bg-white'
: 'translate-x-0 bg-white dark:bg-n-black'
? 'translate-x-3 bg-n-background'
: 'translate-x-0 bg-n-background'
"
/>
</button>

8
app/javascript/dashboard/components-next/tabbar/TabBar.story.vue
View File

@@ -25,13 +25,13 @@ const handleTabChanged = tab => {
<template>
<Story title="Components/TabBar" :layout="{ type: 'grid', width: '920px' }">
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<TabBar :tabs="defaultTabs" @tab-changed="handleTabChanged" />
</div>
</Variant>
<Variant title="Custom Tabs with Initial Tab">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<TabBar
:tabs="customTabs"
:initial-active-tab="1"
@@ -41,7 +41,7 @@ const handleTabChanged = tab => {
</Variant>
<Variant title="No Counts">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<TabBar
:tabs="[{ label: 'Tab 1' }, { label: 'Tab 2' }, { label: 'Tab 3' }]"
@tab-changed="handleTabChanged"
@@ -50,7 +50,7 @@ const handleTabChanged = tab => {
</Variant>
<Variant title="Single Tab">
<div class="p-4 bg-white dark:bg-slate-900">
<div class="p-4 bg-n-background">
<TabBar
:tabs="[{ label: 'Single Tab', count: 42 }]"
@tab-changed="handleTabChanged"

14
app/javascript/dashboard/components-next/textarea/TextArea.story.vue
View File

@@ -9,19 +9,19 @@ const description = ref('');
<template>
<Story title="Components/TextArea" :layout="{ type: 'grid', width: '400' }">
<Variant title="Default">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea placeholder="Default TextArea" />
</div>
</Variant>
<Variant title="With Label">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea label="Description" placeholder="Enter your description" />
</div>
</Variant>
<Variant title="Disabled">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea
label="Disabled TextArea"
placeholder="Can't type here"
@@ -31,7 +31,7 @@ const description = ref('');
</Variant>
<Variant title="With Character Count">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea
v-model="bio"
label="Bio"
@@ -43,7 +43,7 @@ const description = ref('');
</Variant>
<Variant title="Custom Max Length">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea
v-model="description"
label="Long Description"
@@ -55,11 +55,11 @@ const description = ref('');
</Variant>
<Variant title="Custom TextArea Class">
<div class="p-4 bg-white dark:bg-slate-800">
<div class="p-4 bg-n-background">
<TextArea
label="Custom Style"
placeholder="Custom textarea class"
custom-text-area-class="border-yellow-500 dark:border-yellow-700"
custom-text-area-class="border-n-amber-5 dark:border-n-amber-5"
/>
</div>
</Variant>

4
app/javascript/dashboard/components-next/textarea/TextArea.vue
View File

@@ -47,7 +47,7 @@ const messageClass = computed(() => {
case 'error':
return 'text-n-ruby-9 dark:text-n-ruby-9';
case 'success':
return 'text-green-500 dark:text-green-400';
return 'text-n-teal-10 dark:text-n-teal-10';
default:
return 'text-n-slate-11 dark:text-n-slate-11';
}
@@ -179,7 +179,7 @@ onMounted(() => {
}"
:disabled="disabled"
rows="1"
class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-25 dark:disabled:bg-slate-900"
class="flex w-full reset-base text-sm p-0 !rounded-none !bg-transparent dark:!bg-transparent !border-0 !outline-0 !mb-0 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 dark:text-n-slate-12 disabled:cursor-not-allowed disabled:opacity-50"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"