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

chore: Update styles in settings pages (#11070)

Browse Source 
---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
2025-03-19 03:10:02 +05:30
committed by GitHub
parent 9d49b69f2e
commit 8066b36ebf
101 changed files with 1320 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/dashboard/components/SettingsSection.vue
View File

@@ -28,8 +28,8 @@ export default {
'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
}"
>
<div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
<div class="col-span-2 xl:col-span-1">
<div class="grid grid-cols-1 lg:grid-cols-8 gap-6">
<div class="col-span-2">
<p
v-if="title"
class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
@@ -48,7 +48,7 @@ export default {
{{ note }}
</p>
</div>
<div class="col-span-4 lg:col-span-4 2xl:col-span-3">
<div class="col-span-6 xl:col-span-5">
<slot />
</div>
</div>

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

@@ -68,7 +68,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 pr-4 pl-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;
@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;
&.active {
h3 {

15
app/javascript/dashboard/components/widgets/AutomationActionInput.vue
View File

@@ -177,6 +177,7 @@ export default {
icon="dismiss"
variant="clear"
color-scheme="secondary"
class="flex-shrink-0"
@click="removeAction"
/>
</div>
@@ -201,10 +202,10 @@ export default {
<style lang="scss" scoped>
.filter {
@apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
@apply bg-n-background p-2 border border-solid border-n-strong dark:border-n-strong rounded-lg mb-2;
&.is-a-macro {
@apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
@apply mb-0 bg-n-background dark:bg-n-solid-1 p-0 border-0 rounded-none;
}
}
@@ -213,15 +214,19 @@ export default {
}
.filter.has-error {
@apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
@apply bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5;
&.is-a-macro {
@apply bg-transparent;
}
}
.filter-inputs {
@apply flex;
@apply flex gap-1;
}
.filter-error {
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
@apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
}
.action__question,

2
app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
View File

@@ -29,7 +29,7 @@ export default {
<template>
<div>
<div class="multiselect-wrap--small">
<div class="multiselect-wrap--small flex flex-col gap-1 mt-1">
<multiselect
v-model="selectedTeams"
track-by="id"

4
app/javascript/dashboard/components/widgets/EmptyState.vue
View File

@@ -11,13 +11,13 @@ export default {
<div class="empty-state py-16 px-1 ml-0 mr-0">
<h3
v-if="title"
class="text-slate-700 dark:text-slate-200 block text-center w-full text-xl font-thin"
class="text-n-slate-12 block text-center w-full text-xl font-medium"
>
{{ title }}
</h3>
<p
v-if="message"
class="block text-center text-slate-500 dark:text-slate-400 my-4 mx-auto w-[90%]"
class="block text-center text-n-slate-11 dark:text-slate-400 my-4 mx-auto w-[90%]"
>
{{ message }}
</p>

23
app/javascript/dashboard/components/widgets/FilterInput/Index.vue
View File

@@ -127,8 +127,8 @@ export default {
},
getInputErrorClass(errorMessage) {
return errorMessage
? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
: 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
? 'bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5'
: 'bg-n-background border-n-weak dark:border-n-weak';
},
},
};
@@ -138,14 +138,14 @@ export default {
<template>
<div>
<div
class="p-2 border border-solid rounded-md"
class="p-2 border border-solid rounded-lg"
:class="getInputErrorClass(errorMessage)"
>
<div class="flex">
<div class="flex gap-1">
<select
v-if="groupedFilters"
v-model="attributeKey"
class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
class="max-w-[30%] mb-0 mr-1"
@change="resetFilter()"
>
<optgroup
@@ -166,7 +166,7 @@ export default {
<select
v-else
v-model="attributeKey"
class="bg-white max-w-[30%] dark:bg-slate-900 mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
class="max-w-[30%] mb-0 mr-1"
@change="resetFilter()"
>
<option
@@ -179,10 +179,7 @@ export default {
</option>
</select>
<select
v-model="filterOperator"
class="bg-white dark:bg-slate-900 max-w-[20%] mb-0 mr-1 text-slate-800 dark:text-slate-100 border-slate-75 dark:border-slate-600"
>
<select v-model="filterOperator" class="max-w-[20%] mb-0 mr-1">
<option
v-for="(operator, o) in operators"
:key="o"
@@ -234,14 +231,14 @@ export default {
v-model="values"
type="date"
:editable="false"
class="mb-0 datepicker"
class="!mb-0 datepicker"
/>
</div>
<input
v-else
v-model="values"
type="text"
class="mb-0"
class="!mb-0"
:placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
/>
</div>
@@ -287,7 +284,7 @@ export default {
}
.filter-error {
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
@apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
}
.multiselect {

90
app/javascript/dashboard/components/widgets/LabelSelector.vue
View File

@@ -1,90 +0,0 @@
<script setup>
import { ref, computed } from 'vue';
import { useAdmin } from 'dashboard/composables/useAdmin';
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
const props = defineProps({
allLabels: {
type: Array,
default: () => [],
},
savedLabels: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['add', 'remove']);
const { isAdmin } = useAdmin();
const showSearchDropdownLabel = ref(false);
const selectedLabels = computed(() => {
return props.savedLabels.map(label => label.title);
});
const addItem = label => {
emit('add', label);
};
const removeItem = label => {
emit('remove', label);
};
const toggleLabels = () => {
showSearchDropdownLabel.value = !showSearchDropdownLabel.value;
};
const closeDropdownLabel = () => {
showSearchDropdownLabel.value = false;
};
const keyboardEvents = {
KeyL: {
action: e => {
toggleLabels();
e.preventDefault();
},
},
Escape: {
action: () => closeDropdownLabel(),
allowOnFocusedInput: true,
},
};
useKeyboardEvents(keyboardEvents);
</script>
<template>
<div v-on-clickaway="closeDropdownLabel" class="relative leading-6">
<AddLabel @add="toggleLabels" />
<woot-label
v-for="label in savedLabels"
:key="label.id"
:title="label.title"
:description="label.description"
show-close
:color="label.color"
variant="smooth"
@remove="removeItem"
/>
<div class="absolute w-full top-7">
<div
:class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
class="!box-border !w-full dropdown-pane"
>
<LabelDropdown
v-if="showSearchDropdownLabel"
:account-labels="allLabels"
:selected-labels="selectedLabels"
:allow-creation="isAdmin"
@add="addItem"
@remove="removeItem"
/>
</div>
</div>
</div>
</template>

24
app/javascript/dashboard/components/widgets/SettingIntroBanner.vue
View File

@@ -14,16 +14,18 @@ export default {
</script>
<template>
<div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
<h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
{{ headerTitle }}
</h2>
<p
v-if="headerContent"
class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
>
{{ headerContent }}
</p>
<slot />
<div class="border-b border-solid border-n-weak/60">
<div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-8">
<h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
{{ headerTitle }}
</h2>
<p
v-if="headerContent"
class="w-full text-slate-600 dark:text-slate-300 text-sm mb-2"
>
{{ headerContent }}
</p>
<slot />
</div>
</div>
</template>

10
app/javascript/dashboard/components/widgets/WootWriter/Editor.vue
View File

@@ -783,15 +783,15 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
.is-private {
.prosemirror-mention-node {
@apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-slate-900 dark:text-slate-25 py-0 px-1;
@apply font-medium bg-n-amber-2/80 dark:bg-n-amber-2/80 text-n-slate-12 py-0 px-1;
}
.ProseMirror-menubar-wrapper {
> .ProseMirror {
@apply text-slate-800 dark:text-slate-25;
@apply text-n-slate-12;
p {
@apply text-slate-800 dark:text-slate-25;
@apply text-n-slate-12;
}
}
}
@@ -802,11 +802,11 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
}
.message-editor {
@apply border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md py-0 px-1 mb-0;
@apply rounded-lg outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 bg-n-alpha-black2 py-0 px-1 mb-0;
}
.editor_warning {
@apply border border-solid border-red-400 dark:border-red-400;
@apply outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9;
}
.editor-warning__message {

2
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View File

@@ -1253,7 +1253,7 @@ export default {
@apply relative py-0 px-4 -mt-px;
textarea {
@apply shadow-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
@apply shadow-none outline-none border-transparent bg-transparent m-0 max-h-60 min-h-[3rem] pt-4 pb-0 px-0 resize-none;
}
}

6
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
View File

@@ -97,7 +97,7 @@ export default {
<woot-input
v-model="v$.toEmailsVal.$model"
type="text"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
:class="{ error: v$.toEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
@@ -113,7 +113,7 @@ export default {
<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 [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
type="text"
:class="{ error: v$.ccEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -142,7 +142,7 @@ export default {
<woot-input
v-model="v$.bccEmailsVal.$model"
type="text"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:!outline-none [&>input]:h-8 [&>input]:!text-sm [&>input]:!border-0 [&>input]:border-none [&>input]:!bg-transparent dark:[&>input]:!bg-transparent"
:class="{ error: v$.bccEmailsVal.$error }"
:placeholder="
$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')

3
app/javascript/dashboard/components/widgets/forms/Input.vue
View File

@@ -63,7 +63,6 @@ export default {
<label class="input-container">
<span v-if="label">{{ label }}</span>
<input
class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600"
:value="modelValue"
:type="type"
:placeholder="placeholder"
@@ -82,7 +81,7 @@ export default {
<style scoped lang="scss">
.help-text {
@apply mt-0.5 text-xs not-italic text-slate-600 dark:text-slate-400;
@apply mt-0.5 text-xs not-italic text-n-slate-11;
}
.message {

34
app/javascript/dashboard/components/widgets/forms/PhoneInput.vue
View File

@@ -175,15 +175,15 @@ export default {
<template>
<div class="relative phone-input--wrap">
<div
class="flex items-center justify-start border border-solid rounded-md dark:bg-slate-900"
class="flex items-center justify-start border-none outline outline-1 rounded-lg bg-n-alpha-black2"
:class="
error
? 'border border-solid border-red-400 dark:border-red-400 mb-1'
: 'mb-4 border-slate-200 dark:border-slate-600'
? 'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 mb-1'
: 'mb-4 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6'
"
>
<div
class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-lg rounded-bl-lg flex items-center justify-center gap-1.5 bg-n-solid-3 h-10 w-14"
@click.prevent="toggleCountryDropdown"
>
<h5 v-if="activeCountry" class="mb-0">
@@ -194,7 +194,7 @@ export default {
</div>
<span
v-if="activeDialCode"
class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
class="flex py-2 pl-2 pr-0 text-base font-normal leading-normal text-n-slate-12"
>
{{ activeDialCode }}
</span>
@@ -202,7 +202,7 @@ export default {
ref="phoneNumberInput"
:value="phoneNumber"
type="tel"
class="!mb-0 !rounded-tl-none !rounded-bl-none !border-0 font-normal !w-full dark:!bg-slate-900 text-base !px-1.5 placeholder:font-normal"
class="no-margin !rounded-tl-none !rounded-bl-none !outline-none !border-0 font-normal !w-full !bg-transparent text-base !px-1.5 placeholder:font-normal"
:placeholder="placeholder"
:readonly="readonly"
:style="styles"
@@ -215,20 +215,22 @@ export default {
ref="dropdown"
v-on-clickaway="onOutsideClick"
tabindex="0"
class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded px-0 pt-0 pb-1 bg-white dark:bg-slate-900"
class="z-10 absolute h-60 w-[12.5rem] shadow-md overflow-y-auto top-10 rounded-lg px-0 pt-0 pb-1 bg-n-alpha-3 backdrop-blur-[100px]"
@keydown.prevent.up="moveUp"
@keydown.prevent.down="moveDown"
@keydown.prevent.enter="
onSelectCountry(filteredCountriesBySearch[selectedIndex])
"
>
<div class="sticky top-0 p-1 bg-white dark:bg-slate-900">
<div
class="sticky top-0 p-1 bg-white dark:bg-transparent backdrop-blur-[100px]"
>
<input
ref="searchbar"
v-model="searchCountry"
type="text"
:placeholder="$t('GENERAL.PHONE_INPUT.PLACEHOLDER')"
class="!h-8 !mb-0 !text-sm !border !border-solid !border-slate-2000 dark:!border-slate-6000"
class="!h-8 !mb-0 !text-sm !outline-n-brand dark:!outline-n-brand"
@input="onSearchCountry"
/>
</div>
@@ -236,10 +238,10 @@ export default {
v-for="(country, index) in filteredCountriesBySearch"
ref="dropdownItem"
:key="index"
class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-slate-50 dark:hover:bg-slate-700"
class="flex items-center px-1 py-0 cursor-pointer h-7 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2"
:class="{
'bg-slate-50 dark:bg-slate-700': country.id === activeCountryCode,
'bg-slate-25 dark:bg-slate-800': index === selectedIndex,
'bg-n-alpha-1 dark:bg-n-alpha-2': country.id === activeCountryCode,
'bg-n-alpha-1 dark:bg-n-alpha-2': index === selectedIndex,
}"
@click="onSelectCountry(country)"
>
@@ -250,13 +252,13 @@ export default {
>
{{ country.name }}
</span>
<span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
country.dial_code
}}</span>
<span class="ml-1 text-xs text-n-slate-11">
{{ country.dial_code }}
</span>
</div>
<div v-if="filteredCountriesBySearch.length === 0">
<span
class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
class="flex items-center justify-center mt-4 text-sm text-n-slate-10"
>
{{ $t('GENERAL.PHONE_INPUT.EMPTY_STATE') }}
</span>