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

12
app/javascript/dashboard/components/ui/Banner.vue
View File

@@ -118,13 +118,13 @@ export default {
<style lang="scss" scoped>
.banner {
&.primary {
@apply bg-woot-500 dark:bg-woot-500;
@apply bg-n-brand;
}
&.secondary {
@apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
a {
@apply text-slate-800 dark:text-slate-800;
@apply text-n-slate-12;
}
}
@@ -137,18 +137,18 @@ export default {
}
&.warning {
@apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
@apply bg-n-amber-5 text-n-amber-12;
a {
@apply text-yellow-500 dark:text-yellow-500;
@apply text-n-amber-12;
}
}
&.gray {
@apply text-black-500 dark:text-black-500;
@apply text-n-gray-10 dark:text-n-gray-10;
}
a {
@apply ml-1 underline text-white dark:text-white text-xs;
@apply ml-1 underline text-n-amber-12 text-xs;
}
.banner-message {

2
app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue
View File

@@ -55,7 +55,7 @@ const validateDate = () => {
<template>
<div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
<span class="text-sm font-medium text-slate-800 dark:text-slate-50">
<span class="text-sm font-medium text-n-slate-12">
{{
calendarType === START_CALENDAR
? $t('DATE_PICKER.DATE_RANGE_INPUT.START')

16
app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue
View File

@@ -51,21 +51,13 @@ const openDatePicker = () => {
class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-n-alpha-2 hover:bg-n-alpha-1 active:bg-n-alpha-1"
@click="openDatePicker"
>
<fluent-icon
class="text-slate-800 dark:text-slate-50"
icon="calendar"
size="16"
/>
<span class="text-sm font-medium text-slate-800 dark:text-slate-50">
<fluent-icon class="text-n-slate-12" icon="calendar" size="16" />
<span class="text-sm font-medium text-n-slate-12">
{{ $t(activeDateRange) }}
</span>
<span class="text-sm font-medium text-slate-600 dark:text-slate-200">
<span class="text-sm font-medium text-n-slate-11">
{{ formatDateRange }}
</span>
<fluent-icon
class="text-slate-800 dark:text-slate-50"
icon="chevron-down"
size="14"
/>
<fluent-icon class="text-n-slate-12" icon="chevron-down" size="14" />
</button>
</template>

6
app/javascript/dashboard/components/ui/HelperTextPopup.vue
View File

@@ -12,12 +12,12 @@ defineProps({
<fluent-icon
icon="info"
size="14"
class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
class="mt-0.5 text-n-slate-11 absolute"
/>
<div
class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
class="bg-n-background w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-n-weak rounded-lg shadow-md"
>
<p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
<p class="text-n-slate-12 mb-0 text-xs">
{{ message }}
</p>
</div>

42
app/javascript/dashboard/components/ui/Label.vue
View File

@@ -113,7 +113,7 @@ export default {
<style scoped lang="scss">
.label {
@apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-n-strong h-6;
@apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-n-slate-3 text-n-slate-12 border border-solid border-n-strong h-6;
&.small {
@apply text-xs py-0.5 px-1 leading-tight h-5;
@@ -133,67 +133,71 @@ export default {
/* Color Schemes */
&.primary {
@apply bg-woot-100 dark:bg-woot-100 text-woot-900 dark:text-woot-900 border border-solid border-woot-200;
@apply bg-n-blue-5 text-n-blue-12 border border-solid border-n-blue-7;
a {
@apply text-woot-900 dark:text-woot-900;
@apply text-n-blue-12;
}
.label-color-dot {
@apply bg-woot-600 dark:bg-woot-600;
@apply bg-n-blue-9;
}
}
&.secondary {
@apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-n-weak;
@apply bg-n-slate-5 text-n-slate-12 border border-solid border-n-slate-7;
a {
@apply text-slate-900 dark:text-slate-100;
@apply text-n-slate-12;
}
.label-color-dot {
@apply bg-slate-600 dark:bg-slate-600;
@apply bg-n-slate-9;
}
}
&.success {
@apply bg-green-100 dark:bg-green-700 text-green-900 dark:text-green-100 border border-solid border-green-200 dark:border-green-600;
@apply bg-n-teal-5 text-n-teal-12 border border-solid border-n-teal-7;
a {
@apply text-green-900 dark:text-green-100;
@apply text-n-teal-12;
}
.label-color-dot {
@apply bg-green-600 dark:bg-green-600;
@apply bg-n-teal-9;
}
}
&.alert {
@apply bg-red-100 dark:bg-red-700 text-red-900 dark:text-red-100 border border-solid border-red-200 dark:border-red-600;
@apply bg-n-ruby-5 text-n-ruby-12 border border-solid border-n-ruby-7;
a {
@apply text-red-900 dark:text-red-100;
@apply text-n-ruby-12;
}
.label-color-dot {
@apply bg-red-600 dark:bg-red-600;
@apply bg-n-ruby-9;
}
}
&.warning {
@apply bg-yellow-100 dark:bg-yellow-700 text-yellow-900 dark:text-yellow-100 border border-solid border-yellow-200 dark:border-yellow-600;
@apply bg-n-amber-5 text-n-amber-12 border border-solid border-n-amber-7;
a {
@apply text-yellow-900 dark:text-yellow-100;
@apply text-n-amber-12;
}
.label-color-dot {
@apply bg-yellow-900 dark:bg-yellow-900;
@apply bg-n-amber-9;
}
}
&.smooth {
@apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-n-strong;
@apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-solid border-n-strong;
}
&.dashed {
@apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-n-strong;
@apply bg-transparent text-n-slate-11 dark:text-n-slate-12 border border-dashed border-n-strong;
}
}
.label-close--button {
@apply text-slate-800 dark:text-slate-100 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-slate-100 dark:hover:bg-slate-700;
@apply text-n-slate-11 -mb-0.5 rounded-sm cursor-pointer flex items-center justify-center hover:bg-n-slate-3;
svg {
@apply text-n-slate-11;
}
}
.label-action--button {

23
app/javascript/dashboard/components/ui/PreviewCard.vue
View File

@@ -23,16 +23,17 @@ export default {
<template>
<div
class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid"
:class="{
'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
active,
'bg-n-blue-1 dark:bg-n-solid-2 border-n-blue-4': active,
'border-n-weak': !active,
}"
>
<div
class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
class="flex justify-between items-center rounded-t-md px-2 w-full h-10 border-b border-solid"
:class="{
'bg-woot-50 border-b border-solid border-n-blue-border': active,
'bg-n-blue-2 border-n-blue-4': active,
'bg-n-slate-2 border-n-weak': !active,
}"
>
<div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
@@ -41,23 +42,19 @@ export default {
icon="checkmark-circle"
type="solid"
size="24"
class="text-woot-500 dark:text-woot-500"
class="text-n-brand"
/>
</div>
<div
class="text-slate-700 dark:text-slate-200 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
class="text-n-slate-11 text-xs leading-[1.4] px-3 pt-3 pb-0 text-start"
>
{{ content }}
</div>
<div v-if="src" class="p-3">
<img
:src="src"
class="border border-solid rounded-md"
:class="
active
? 'border-woot-75 dark:border-woot-700'
: 'border-slate-50 dark:border-slate-600'
"
class="border rounded-md"
:class="active ? 'border-n-blue-border' : 'border-n-weak'"
/>
</div>
<slot v-else />

21
app/javascript/dashboard/components/ui/Switch.vue
View File

@@ -29,11 +29,11 @@ export default {
<style lang="scss" scoped>
.toggle-button {
@apply bg-slate-200 dark:bg-slate-600;
@apply bg-n-slate-5;
--toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
border-radius: var(--border-radius-large);
border-radius: 0.5625rem;
border: 2px solid transparent;
cursor: pointer;
display: flex;
@@ -46,7 +46,7 @@ export default {
width: 2.125rem;
&.active {
background-color: var(--w-500);
@apply bg-n-brand;
}
&.small {
@@ -54,30 +54,29 @@ export default {
height: 0.875rem;
span {
height: var(--space-one);
width: var(--space-one);
@apply size-2.5;
&.active {
transform: translate(var(--space-small), var(--space-zero));
@apply ltr:translate-x-[0.5rem] ltr:translate-y-0 rtl:translate-x-[-0.5rem] rtl:translate-y-0;
}
}
}
span {
@apply bg-white dark:bg-slate-900;
--space-one-point-five: 0.9375rem;
@apply bg-n-background;
border-radius: 100%;
box-shadow: var(--toggle-button-box-shadow);
display: inline-block;
height: var(--space-one-point-five);
height: 0.9375rem;
transform: translate(0, 0);
transition-duration: 200ms;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: var(--space-one-point-five);
width: 0.9375rem;
&.active {
transform: translate(var(--space-one-point-five), var(--space-zero));
@apply ltr:translate-x-[0.9375rem] ltr:translate-y-0 rtl:translate-x-[-0.9375rem] rtl:translate-y-0;
}
}
}

23
app/javascript/dashboard/components/ui/Tabs/Tabs.vue
View File

@@ -11,10 +11,6 @@ const props = defineProps({
type: Boolean,
default: true,
},
isCompact: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['change']);
@@ -70,25 +66,28 @@ watch(
<template>
<div
ref="tabsContainer"
:class="{
'tabs--container--with-border': border,
'tabs--container--compact': isCompact,
}"
class="tabs--container"
class="flex"
:class="[border && 'border-b border-b-n-weak']"
>
<button
v-if="hasScroll"
class="tabs--scroll-button button clear secondary button--only-icon"
class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
@click="onScrollClick('left')"
>
<fluent-icon icon="chevron-left" :size="16" />
</button>
<ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
<ul
ref="tabsList"
class="border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0"
:class="
hasScroll ? 'overflow-hidden py-0 px-1 max-w-[calc(100%-64px)]' : ''
"
>
<slot />
</ul>
<button
v-if="hasScroll"
class="tabs--scroll-button button clear secondary button--only-icon"
class="items-center rounded-none cursor-pointer flex h-auto justify-center min-w-8"
@click="onScrollClick('right')"
>
<fluent-icon icon="chevron-right" :size="16" />

30
app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
View File

@@ -22,6 +22,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isCompact: {
type: Boolean,
default: false,
},
});
const activeIndex = inject('activeIndex');
@@ -40,14 +44,28 @@ const onTabClick = event => {
<template>
<li
class="tabs-title"
:class="{
'is-active': active,
}"
class="flex-shrink-0 my-0 mx-2 ltr:first:ml-0 rtl:first:mr-0 ltr:last:mr-0 rtl:last:ml-0 hover:text-n-slate-12"
>
<a @click="onTabClick">
<a
class="flex items-center flex-row border-b select-none cursor-pointer text-sm relative top-[1px] transition-[border-color] duration-[150ms] ease-[cubic-bezier(0.37,0,0.63,1)]"
:class="[
active
? 'border-b border-n-brand text-n-blue-text'
: 'border-transparent text-n-slate-11',
isCompact ? 'py-2 text-sm' : 'text-base py-3',
]"
@click="onTabClick"
>
{{ name }}
<div v-if="showBadge" class="badge min-w-[20px]">
<div
v-if="showBadge"
class="rounded-md h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0 min-w-[20px]"
:class="[
active
? 'bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text'
: 'bg-n-alpha-black2 dark:bg-n-solid-3 text-n-slate-11',
]"
>
<span>
{{ getItemCount }}
</span>

2
app/javascript/dashboard/components/ui/TimeAgo.vue
View File

@@ -113,7 +113,7 @@ export default {
delay: { show: 1000, hide: 0 },
hideOnClick: true,
}"
class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-slate-11"
class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
>
<span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
</div>

13
app/javascript/dashboard/components/ui/Wizard.vue
View File

@@ -44,21 +44,18 @@ export default {
>
<div class="flex items-center">
<h3
class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
>
{{ item.title }}
</h3>
<span
v-if="isOver(item)"
class="ml-1 text-green-500 dark:text-green-500"
>
<span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
<fluent-icon icon="checkmark" />
</span>
</div>
<span class="step">
{{ items.indexOf(item) + 1 }}
</span>
<p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
<p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
{{ item.body }}
</p>
</div>
@@ -68,7 +65,7 @@ export default {
<style lang="scss" scoped>
.wizard-box {
.item {
@apply cursor-pointer after:bg-slate-75 before:bg-slate-75 dark:after:bg-slate-600 dark:before:bg-slate-600 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
@apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
&.active {
h3 {
@@ -97,7 +94,7 @@ export default {
}
.step {
@apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
@apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
}
}
}