akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: More changes

Browse Source
This commit is contained in:
iamsivin
2024-12-08 20:41:11 +05:30
parent 919e080b83
commit d609889747
24 changed files with 59 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/assets/scss/plugins/_dropdown.scss
+2 -2
View File
@@ -1,7 +1,7 @@
.dropdown-pane {
@apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
@apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
&.dropdown-pane--open {
@apply bg-white absolute dark:bg-slate-800 block visible;
@apply bg-n-alpha-3 backdrop-blur-[100px] absolute block visible;
}
}
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+3 -3
View File
@@ -31,7 +31,7 @@ button {
}
.button {
@apply items-center bg-n-brand px-2.5 text-n-slate-12 dark:text-n-slate-12 inline-flex h-10 mb-0 gap-2 font-medium;
@apply items-center bg-n-brand px-2.5 text-white inline-flex h-10 mb-0 gap-2 font-medium;
.button__content {
@apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -43,7 +43,7 @@ button {
}
&:hover {
@apply bg-woot-600 dark:bg-woot-600;
@apply bg-n-brand/80 dark:bg-n-brand/80;
}
&:disabled,
@@ -137,7 +137,7 @@ button {
@apply hover:bg-n-brand/20 dark:hover:bg-n-brand/30 border-n-brand dark:border-n-brand/60;
&.secondary {
@apply border-n-strong text-n-slate-12 dark:text-n-slate-12;
@apply border-n-strong text-n-slate-12 dark:text-n-slate-12 hover:bg-n-slate-4 dark:hover:bg-n-solid-2;
}
&.success {
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
+4 -4
View File
@@ -3,7 +3,7 @@
}
.tabs--container--with-border {
@apply border-b border-slate-50 dark:border-slate-800/50;
@apply border-b border-n-weak/50 dark:border-n-weak/50;
}
.tabs {
@@ -34,7 +34,7 @@
@apply flex-shrink-0 my-0 mx-2;
.badge {
@apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@apply bg-n-slate-3 dark:bg-n-solid-3 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
}
&:first-child {
@@ -59,11 +59,11 @@
&.is-active {
a {
@apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
@apply border-b border-n-brand text-n-blue-text dark:text-n-blue-text;
}
.badge {
@apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
@apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text dark:text-n-blue-text dark:bg-opacity-40;
}
}
}
app/javascript/dashboard/components/Accordion/AccordionItem.vue
+2 -2
View File
@@ -35,13 +35,13 @@ const onToggle = () => {
<template>
<div class="-mt-px text-sm">
<button
class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
class="flex items-center justify-between w-full px-4 py-2 m-0 border border-l-0 border-r-0 border-solid rounded-none select-none bg-n-slate-3 dark:bg-n-solid-2 border-n-weak dark:border-n-weak cursor-grab drag-handle"
@click.stop="onToggle"
>
<div class="flex justify-between mb-0.5">
<EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
<h5
class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
class="py-0 pl-0 pr-2 mb-0 text-sm text-slate-800 dark:text-slate-100"
>
{{ title }}
</h5>
app/javascript/dashboard/components/ChatList.vue
+1 -1
View File
@@ -782,7 +782,7 @@ watch(conversationFilters, (newVal, oldVal) => {
<template>
<div
class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
class="flex flex-col flex-shrink-0 border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-n-weak/50 dark:border-n-weak/50"
:class="[
{ hidden: !showConversationList },
isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
app/javascript/dashboard/components/ChatListHeader.vue
+1 -1
View File
@@ -80,7 +80,7 @@ const toggleConversationLayout = () => {
</h1>
<span
v-if="!hasAppliedFiltersOrActiveFolders"
class="p-1 my-0.5 mx-1 rounded-md capitalize dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
class="p-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 dark:bg-n-solid-3 hover:bg-n-slate-3 text-xxs text-n-slate-11"
>
{{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
</span>
app/javascript/dashboard/components/CustomAttribute.vue
+2 -2
View File
@@ -273,13 +273,13 @@ export default {
:href="hrefURL"
target="_blank"
rel="noopener noreferrer"
class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
>
{{ urlValue }}
</a>
<p
v-else
class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
class="group-hover:bg-n-slate-3 group-hover:dark:bg-n-solid-3 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
>
{{ displayValue || '---' }}
</p>
app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+1 -1
View File
@@ -71,7 +71,7 @@ export default {
<template>
<div
class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
class="flex flex-col justify-between w-16 h-full border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak border-n-weak/50 rtl:border-l rtl:border-r-0"
>
<div class="flex flex-col items-center">
<Logo
app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+1 -1
View File
@@ -241,7 +241,7 @@ export default {
<template>
<div
class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm border-r bg-n-solid-2 dark:bg-n-solid-2 dark:border-n-weak/50 border-n-weak/50 rtl:border-r-0 rtl:border-l"
>
<AccountContext @toggle-accounts="toggleAccountModal" />
<transition-group
app/javascript/dashboard/components/widgets/Avatar.vue
+2 -2
View File
@@ -42,11 +42,11 @@ export default {
@tailwind components;
@layer components {
.avatar-color {
background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
background-image: linear-gradient(to top, #2781f619 0%, #2781f619 100%);
}
.dark-avatar-color {
background-image: linear-gradient(to top, #135899 0%, #135899 100%);
background-image: linear-gradient(to top, #2781f6 0%, #2781f6 100%);
}
}
.avatar-container {
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+4 -4
View File
@@ -74,7 +74,7 @@ export default {
</script>
<template>
<div class="flex justify-between bg-black-50 dark:bg-slate-800">
<div class="flex justify-between bg-n-slate-2 dark:bg-n-slate-2">
<div class="button-group">
<woot-button
variant="clear"
@@ -132,16 +132,16 @@ export default {
}
}
.button--reply {
@apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
@apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-n-strong dark:border-n-strong;
&:hover,
&:focus {
@apply border-r border-slate-50 dark:border-slate-700;
@apply border-r border-n-strong dark:border-n-strong;
}
}
.button--note {
@apply border-l-0 rounded-none;
&.is-active {
@apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
@apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-n-strong dark:border-n-strong;
}
&:hover,
&:active {
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+1 -1
View File
@@ -125,7 +125,7 @@ export default {
</woot-tabs>
<div
v-show="!activeIndex"
class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
class="flex h-full min-h-0 m-0 bg-n-slate-2 dark:bg-n-solid-2"
>
<MessagesView
v-if="currentChat.id"
app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue
+1 -1
View File
@@ -31,7 +31,7 @@ export default {
>
<div class="flex items-center gap-2">
<Hotkey
custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-7000 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
custom-class="w-8 h-6 text-sm font-medium border-b-2 text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-slate-300 dark:border-slate-500"
>
⌘
</Hotkey>
app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+1 -1
View File
@@ -40,7 +40,7 @@ export default {
<template>
<select
v-model="activeValue"
class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-strong text-n-slate-11"
@change="onTabChange()"
>
<option v-for="value in items" :key="value" :value="value">
app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+1 -1
View File
@@ -579,7 +579,7 @@ export default {
}
.reply-box {
@apply border border-solid border-slate-75 dark:border-slate-600 max-w-[75rem] w-[70%];
@apply border border-solid border-n-strong dark:border-n-strong max-w-[75rem] w-[70%];
}
.reply-box .reply-box__top {
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+2 -2
View File
@@ -1244,7 +1244,7 @@ export default {
box-shadow 0.35s cubic-bezier(0.37, 0, 0.63, 1),
height 2s cubic-bezier(0.37, 0, 0.63, 1);
@apply relative border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
@apply relative border-t border-n-strong dark:border-n-strong bg-white dark:bg-slate-900;
&.is-focused {
box-shadow:
@@ -1270,7 +1270,7 @@ export default {
}
.reply-box__top {
@apply relative py-0 px-4 -mt-px border-t border-solid border-slate-50 dark:border-slate-700;
@apply relative py-0 px-4 -mt-px border-t border-solid border-n-strong dark:border-n-strong;
textarea {
@apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+4 -4
View File
@@ -89,7 +89,7 @@ export default {
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
<woot-input
v-model="v$.toEmailsVal.$model"
type="text"
@@ -106,7 +106,7 @@ export default {
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
<woot-input
v-model="v$.ccEmailsVal.$model"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
@@ -134,7 +134,7 @@ export default {
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
</label>
<div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
<div class="flex-1 min-w-0 m-0 rounded-none whitespace-nowrap">
<woot-input
v-model="v$.bccEmailsVal.$model"
type="text"
@@ -159,7 +159,7 @@ export default {
@apply text-sm text-red-500 dark:text-red-500;
}
.input-group {
@apply border-b border-solid border-slate-75 dark:border-slate-700 my-1 flex items-center gap-2;
@apply border-b border-solid border-n-weak dark:border-n-weak my-1 flex items-center gap-2;
.input-group-label {
@apply border-transparent bg-transparent text-xs font-semibold pl-0;
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
+1 -1
View File
@@ -93,7 +93,7 @@ onMounted(() => {
<template>
<div
class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-slate-50 dark:border-slate-800/50 rtl:border-l-0 rtl:border-r contact--panel"
class="overflow-y-auto bg-white border-l dark:bg-slate-900 text-slate-900 dark:text-slate-300 border-n-weak/50 dark:border-n-weak/50 rtl:border-l-0 rtl:border-r contact--panel"
>
<ContactInfo
:contact="contact"
app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue
+3 -3
View File
@@ -56,9 +56,9 @@ export default {
<template>
<div
class="macro-preview absolute max-h-[22.5rem] w-64 rounded-md bg-white dark:bg-slate-800 shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
class="macro-preview absolute max-h-[22.5rem] z-50 w-64 rounded-md bg-n-alpha-3 backdrop-blur-[100px] shadow-lg bottom-8 right-8 overflow-y-auto p-4 text-left rtl:text-right"
>
<h6 class="text-sm text-slate-800 dark:text-slate-100 mb-4">
<h6 class="mb-4 text-sm text-slate-800 dark:text-slate-100">
{{ macro.name }}
</h6>
<div
@@ -73,7 +73,7 @@ export default {
<div
class="absolute -left-[0.21875rem] top-[0.2734375rem] w-2 h-2 rounded-full bg-white dark:bg-slate-200 border-2 border-solid border-slate-100 dark:border-slate-600"
/>
<p class="text-xs text-slate-500 dark:text-slate-400 mb-1">
<p class="mb-1 text-xs text-slate-500 dark:text-slate-400">
{{ action.actionName }}
</p>
<p class="text-slate-800 dark:text-slate-100">{{ action.actionValue }}</p>
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+1 -1
View File
@@ -171,7 +171,7 @@ export default {
</script>
<template>
<div class="relative items-center w-full p-4 bg-white dark:bg-slate-900">
<div class="relative items-center w-full p-4 bg-n-background">
<div class="flex flex-col w-full gap-2 text-left rtl:text-right">
<div class="flex flex-row justify-between">
<Thumbnail
app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+5 -5
View File
@@ -166,12 +166,12 @@ onMounted(() => {
});
const evenClass = [
'[&>*:nth-child(odd)]:!bg-white [&>*:nth-child(even)]:!bg-slate-25',
'dark:[&>*:nth-child(odd)]:!bg-slate-900 dark:[&>*:nth-child(even)]:!bg-slate-800/50',
'[&>*:nth-child(odd)]:!bg-n-background [&>*:nth-child(even)]:!bg-n-slate-2',
'dark:[&>*:nth-child(odd)]:!bg-n-background dark:[&>*:nth-child(even)]:!bg-n-solid-1',
];
const oddClass = [
'[&>*:nth-child(odd)]:!bg-slate-25 [&>*:nth-child(even)]:!bg-white',
'dark:[&>*:nth-child(odd)]:!bg-slate-800/50 dark:[&>*:nth-child(even)]:!bg-slate-900',
'[&>*:nth-child(odd)]:!bg-n-slate-2 [&>*:nth-child(even)]:!bg-n-background',
'dark:[&>*:nth-child(odd)]:!bg-n-solid-1 dark:[&>*:nth-child(even)]:!bg-n-background',
];
const wrapperClass = computed(() => {
@@ -195,7 +195,7 @@ const wrapperClass = computed(() => {
:attribute-regex="attribute.regex_pattern"
:regex-cue="attribute.regex_cue"
:contact-id="contactId"
class="border-b border-solid border-slate-50 dark:border-slate-700/50"
class="border-b border-solid border-n-weak/50 dark:border-n-weak/90"
@update="onUpdate"
@delete="onDelete"
@copy="onCopy"
app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue
+3 -3
View File
@@ -72,7 +72,7 @@ const openInNewTab = url => {
<slot name="actions" />
</div>
</div>
<div class="flex flex-col gap-3 text-slate-600 dark:text-slate-300 w-full">
<div class="flex flex-col w-full gap-3 text-slate-600 dark:text-slate-300">
<p
class="mb-0 text-base font-normal line-clamp-5 sm:line-clamp-none max-w-3xl tracking-[-0.1px]"
>
@@ -84,7 +84,7 @@ const openInNewTab = url => {
:href="helpURL"
target="_blank"
rel="noopener noreferrer"
class="sm:inline-flex hidden gap-1 w-fit items-center text-woot-500 dark:text-woot-500 text-sm font-medium hover:underline"
class="items-center hidden gap-1 text-sm font-medium sm:inline-flex w-fit text-n-brand dark:text-n-brand hover:underline"
>
{{ linkText }}
<fluent-icon
@@ -97,7 +97,7 @@ const openInNewTab = url => {
</CustomBrandPolicyWrapper>
</div>
<div
class="flex items-start justify-start w-full gap-3 sm:hidden flex-wrap"
class="flex flex-wrap items-start justify-start w-full gap-3 sm:hidden"
>
<slot name="actions" />
<CustomBrandPolicyWrapper :show-on-custom-branded-instance="false">
app/javascript/shared/components/ui/MultiselectDropdown.vue
+8 -8
View File
@@ -60,7 +60,7 @@ const hasValue = computed(() => {
<woot-button
variant="hollow"
color-scheme="secondary"
class="w-full border border-solid border-slate-100 dark:border-slate-700 px-2 hover:border-slate-75 dark:hover:border-slate-600"
class="w-full px-2 border border-solid !border-n-weak dark:!border-n-weak hover:!border-n-strong dark:hover:!border-n-strong"
@click="
() => toggleDropdown() // ensure that the event is not passed to the button
"
@@ -73,25 +73,25 @@ const hasValue = computed(() => {
:status="selectedItem.availability_status"
:username="selectedItem.name"
/>
<div class="flex justify-between w-full min-w-0 items-center">
<div class="flex items-center justify-between w-full min-w-0">
<h4
v-if="!hasValue"
class="text-ellipsis text-sm text-slate-800 dark:text-slate-100"
class="text-sm text-ellipsis text-slate-800 dark:text-slate-100"
>
{{ multiselectorPlaceholder }}
</h4>
<h4
v-else
class="items-center leading-tight overflow-hidden whitespace-nowrap text-ellipsis text-sm text-slate-800 dark:text-slate-100"
class="items-center overflow-hidden text-sm leading-tight whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
:title="selectedItem.name"
>
{{ selectedItem.name }}
</h4>
<i
v-if="showSearchDropdown"
class="icon i-lucide-chevron-up text-slate-600 mr-1"
class="mr-1 icon i-lucide-chevron-up text-slate-600"
/>
<i v-else class="icon i-lucide-chevron-down text-slate-600 mr-1" />
<i v-else class="mr-1 icon i-lucide-chevron-down text-slate-600" />
</div>
</div>
</woot-button>
@@ -99,9 +99,9 @@ const hasValue = computed(() => {
:class="{ 'dropdown-pane--open': showSearchDropdown }"
class="dropdown-pane"
>
<div class="flex justify-between items-center mb-1">
<div class="flex items-center justify-between mb-1">
<h4
class="text-sm text-slate-800 dark:text-slate-100 m-0 overflow-hidden whitespace-nowrap text-ellipsis"
class="m-0 overflow-hidden text-sm text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
>
{{ multiselectorTitle }}
</h4>
app/javascript/shared/components/ui/MultiselectDropdownItems.vue
+5 -9
View File
@@ -71,7 +71,7 @@ export default {
<template>
<div class="dropdown-wrap">
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
<div class="flex-auto flex-grow-0 flex-shrink-0 mb-2 max-h-8">
<input
ref="searchbar"
v-model="search"
@@ -81,7 +81,7 @@ export default {
:placeholder="inputPlaceholder"
/>
</div>
<div class="flex justify-start items-start flex-auto overflow-auto">
<div class="flex items-start justify-start flex-auto overflow-auto">
<div class="w-full max-h-[10rem]">
<WootDropdownMenu>
<WootDropdownItem v-for="option in filteredOptions" :key="option.id">
@@ -107,7 +107,7 @@ export default {
class="flex items-center justify-between w-full min-w-0 gap-2"
>
<span
class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
class="my-0 overflow-hidden text-sm leading-4 whitespace-nowrap text-ellipsis"
:title="option.name"
>
{{ option.name }}
@@ -142,15 +142,11 @@ export default {
@apply justify-between w-full;
&.active {
@apply bg-slate-25 dark:bg-slate-700 border-slate-50 dark:border-slate-900 font-medium;
}
&:focus {
@apply bg-slate-25 dark:bg-slate-700;
@apply bg-n-slate-2 dark:bg-n-solid-3 border-n-weak/50 dark:border-n-weak font-medium;
}
&:hover {
@apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100;
@apply bg-n-slate-2 dark:bg-n-solid-3 text-slate-800 dark:text-slate-100;
}
}
</style>