scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-10-30 18:47:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update color palette [CW-2293] (#7617)

Browse Source
This commit is contained in:
Shivam Mishra
2023-08-01 21:34:10 +05:30
committed by GitHub
parent e052a061f4
commit 62e9fc1bc5
38 changed files with 241 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View File

@@ -26,6 +26,7 @@ code {
background: $color-background;
border-radius: var(--border-radius-large);
padding: $space-two;
@apply bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100;
}
}

1
app/javascript/dashboard/assets/scss/_woot.scss
View File

@@ -72,7 +72,6 @@
@import '~shared/assets/stylesheets/ionicons';
@import 'utility-helpers';
.tooltip {
@apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
}

5
app/javascript/dashboard/assets/scss/app.scss
View File

@@ -1 +1,6 @@
// scss-lint:disable PropertySpelling
:root {
color-scheme: light dark;
}
@import 'woot';

12
app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
View File

@@ -18,7 +18,15 @@
}
&.multiselect--disabled {
@apply opacity-80;
@apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
.multiselect__select {
@apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
}
.multiselect__tags {
@apply border-0;
}
}
.multiselect--active {
@@ -36,7 +44,7 @@
}
.multiselect__content-wrapper {
@apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
}
.multiselect__content {

22
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View File

@@ -49,7 +49,7 @@
}
&.success {
@apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
@apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800 ;
}
&.alert {
@@ -64,19 +64,19 @@
@apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
&.secondary {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
}
&.success {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
}
&.alert {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
}
&.warning {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
}
}
}
@@ -90,7 +90,7 @@
}
&.success {
@apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
@apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
}
&.alert {
@@ -110,7 +110,7 @@
}
&.success {
@apply text-green-700 dark:text-green-100;
@apply text-green-700 dark:text-green-100 ;
}
&.alert {
@@ -125,19 +125,19 @@
@apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
&.secondary {
@apply hover:bg-slate-50 dark:hover:bg-slate-700;
@apply hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100;
}
&.success {
@apply hover:bg-green-50 dark:hover:bg-green-800;
@apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
}
&.alert {
@apply hover:bg-red-50 dark:hover:bg-red-800;
@apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
}
&.warning {
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
}
}

2
app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
View File

@@ -129,7 +129,7 @@
@apply ml-auto break-words rounded-l-lg rounded-r;
&.is-private {
@apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
@apply text-black-900 dark:text-black-900 relative border border-solid bg-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
}
&.is-image {

4
app/javascript/dashboard/assets/scss/widgets/_tabs.scss
View File

@@ -31,7 +31,7 @@
}
.tabs-title {
@apply flex-shrink-0 my-0 mx-2;
@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;
@@ -53,7 +53,7 @@
}
a {
@apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
@apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
transition: border-color 0.15s $swift-ease-out-function;
}

2
app/javascript/dashboard/components/ChatList.vue
View File

@@ -15,7 +15,7 @@
>
<div class="flex max-w-[85%] justify-center items-center">
<h1
class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
:title="pageTitle"
>
{{ pageTitle }}

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

@@ -2,7 +2,7 @@
<div
class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
:class="{
'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
}"
>
<div class="w-[30%] min-w-0 max-w-[30%] pr-12">

8
app/javascript/dashboard/components/buttons/FormSubmitButton.vue
View File

@@ -51,7 +51,7 @@ export default {
},
computed: {
computedClass() {
return `button nice ${this.buttonClass || ' '}`;
return `button nice gap-2 ${this.buttonClass || ' '}`;
},
},
methods: {
@@ -63,11 +63,9 @@ export default {
</script>
<style lang="scss" scoped>
button:disabled {
opacity: 1;
background-color: var(--w-100);
@apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
&:hover {
background-color: var(--w-100);
@apply bg-woot-100 dark:bg-woot-500/25;
}
}
</style>

8
app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="showShowCurrentAccountContext"
class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
@mouseover="setShowSwitch"
@mouseleave="resetShowSwitch"
>
@@ -14,7 +14,7 @@
<transition name="fade">
<div
v-if="showSwitchButton"
class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full justify-end absolute top-0 right-0 w-full"
class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
>
<div class="my-0 mx-2">
<woot-button
@@ -71,7 +71,7 @@ export default {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgb(55, 84, 109) 50%
rgb(21, 23, 24) 50%
);
}
@@ -87,7 +87,7 @@ export default {
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0%,
rgb(55, 84, 109) 50%
rgb(21, 23, 24) 50%
);
}
}

2
app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="mb-4">
<button
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
:class="{
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
}"

2
app/javascript/dashboard/components/layout/sidebarComponents/PrimaryNavItem.vue
View File

@@ -3,7 +3,7 @@
<a
v-tooltip.right="$t(`SIDEBAR.${name}`)"
:href="href"
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
:class="{
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
isActive || isChildMenuActive,

8
app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
View File

@@ -22,7 +22,7 @@
class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
>
<fluent-icon
class="text-xxs text-slate-600 dark:text-slate-200"
class="text-xxs text-slate-700 dark:text-slate-200"
:class="{
'text-woot-500 dark:text-woot-500': isActive,
}"
@@ -41,7 +41,7 @@
>
<span
:title="menuTitle"
class="text-sm text-slate-600 dark:text-slate-100"
class="text-sm text-slate-700 dark:text-slate-100"
:class="{
'text-woot-500 dark:text-woot-500': isActive,
'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
@@ -54,8 +54,8 @@
class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
:class="
isCountZero
? `text-slate-300 dark:text-slate-600`
: `text-slate-600 dark:text-slate-50`
? `text-slate-300 dark:text-slate-700`
: `text-slate-700 dark:text-slate-50`
"
>
{{ childItemCount }}

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

@@ -213,7 +213,7 @@ export default {
}
.filter.has-error {
@apply bg-red-50 dark:bg-red-100;
@apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
}
.filter-inputs {
@@ -221,7 +221,7 @@ export default {
}
.filter-error {
@apply text-red-500 dark:text-red-600 block my-1 mx-0;
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
}
.action__question,

19
app/javascript/dashboard/components/widgets/ColorPicker.vue
View File

@@ -61,21 +61,16 @@ export default {
}
.colorpicker--selected {
border: 1px solid var(--color-border-light);
border-radius: $space-smaller;
cursor: pointer;
height: $space-large;
margin-bottom: $space-normal;
width: $space-large;
@apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
}
.colorpicker--chrome.vc-chrome {
@include elegant-card;
@apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
border: 1px solid $color-border;
border-radius: $space-smaller;
margin-top: -$space-one;
position: absolute;
z-index: 9999;
::v-deep {
input {
@apply bg-white dark:bg-white;
}
}
}
</style>

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

@@ -114,10 +114,7 @@
@click="removeFilter"
/>
</div>
<p
v-if="v.values.$dirty && v.values.$error"
class="text-red-500 dark:text-red-600 block my-1 mx-0"
>
<p v-if="v.values.$dirty && v.values.$error" class="filter-error">
{{ $t('FILTER.EMPTY_VALUE_ERROR') }}
</p>
</div>
@@ -127,7 +124,7 @@
class="flex items-center justify-center relative my-2.5 mx-0"
>
<hr
class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
/>
<select
v-model="query_operator"
@@ -273,8 +270,8 @@ export default {
},
getInputErrorClass(isDirty, hasError) {
return isDirty && hasError
? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
},
},
};
@@ -286,6 +283,10 @@ export default {
}
}
.filter-error {
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
}
.multiselect {
@apply mb-0;
}

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

@@ -456,6 +456,31 @@ export default {
}
> .ProseMirror {
@apply p-0 break-words text-slate-800 dark:text-slate-100;
h1,
h2,
h3,
h4,
h5,
h6 {
@apply text-slate-800 dark:text-slate-100;
}
p {
@apply text-slate-800 dark:text-slate-100;
}
blockquote {
@apply border-slate-400 dark:border-slate-500;
p {
@apply text-slate-600 dark:text-slate-400;
}
}
ol li {
@apply list-item list-decimal;
}
}
}

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

@@ -23,7 +23,7 @@
</label>
</div>
<div
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
>
<filter-input-box
v-for="(filter, i) in appliedFilters"

4
app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
View File

@@ -1,8 +1,8 @@
<template>
<div
class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
:class="{
'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
'unread-chat': hasUnread,
'has-inbox-name': showInboxName,
'conversation-selected': selected,

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

@@ -2,7 +2,7 @@
<div class="phone-input--wrap relative">
<div class="phone-input" :class="{ 'has-error': error }">
<div
class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
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"
@click="toggleCountryDropdown"
>
<h5 v-if="activeCountry.emoji" class="mb-0">

14
app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
View File

@@ -2,11 +2,17 @@
<router-link :to="navigateTo" class="contact-item">
<woot-thumbnail :src="thumbnail" :username="name" size="24px" />
<div class="contact-details">
<h5 class="text-block-title name">{{ name }}</h5>
<h5 class="text-block-title name text-slate-800 dark:text-slate-200">
{{ name }}
</h5>
<p class="details-meta">
<span v-if="email" class="email">{{ email }}</span>
<span v-if="phone" class="separator">•</span>
<span v-if="phone" class="phone">
<span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
email
}}</span>
<span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
•
</span>
<span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
{{ phone }}
</span>
</p>

7
app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
View File

@@ -21,13 +21,16 @@
</div>
</div>
<div class="user-details">
<h5 v-if="name" class="text-block-title name">
<h5
v-if="name"
class="text-block-title name text-slate-800 dark:text-slate-100"
>
<span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
{{ name }}
</h5>
<h5
v-if="email"
class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
class="text-block-title email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
{{ email }}

13
app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
View File

@@ -60,10 +60,21 @@ export default {
};
</script>
<style>
<style lang="scss">
ninja-keys {
--ninja-accent-color: var(--w-500);
--ninja-font-family: 'PlusJakarta';
z-index: 9999;
@media (prefers-color-scheme: dark) {
--ninja-overflow-background: rgba(26, 29, 30, 0.5);
--ninja-modal-background: #151718;
--ninja-secondary-background-color: #26292b;
--ninja-selected-background: #26292b;
--ninja-footer-background: #2b2f31;
--ninja-text-color: #f8faf9;
--ninja-icon-color: #f8faf9;
--ninja-secondary-text-color: #c2c9c6;
}
}
</style>

2
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
View File

@@ -23,7 +23,7 @@
</label>
</div>
<div
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
>
<filter-input-box
v-for="(filter, i) in appliedFilters"

2
app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
View File

@@ -6,7 +6,7 @@
<div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
<woot-sidemenu-icon />
<h1
class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
class="m-0 text-xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
>
{{ headerTitle }}
</h1>

6
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/DefaultPortalArticles.vue
View File

@@ -1,5 +1,9 @@
<template>
<div>Loading...</div>
<div
class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
>
Loading...
</div>
</template>
<script>
import uiSettingsMixin from 'dashboard/mixins/uiSettings';

26
app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container overflow-auto">
<div class="py-0 px-4 w-full max-w-full overflow-auto">
<article-header
:header-title="headerTitle"
:count="meta.count"
@@ -13,9 +13,14 @@
@page-change="onPageChange"
@reorder="onReorder"
/>
<div v-if="shouldShowLoader" class="articles--loader">
<div
v-if="shouldShowLoader"
class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
>
<spinner />
<span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
<span class="text-slate-600 dark:text-slate-200">{{
$t('HELP_CENTER.TABLE.LOADING_MESSAGE')
}}</span>
</div>
<empty-state
v-else-if="shouldShowEmptyState"
@@ -148,18 +153,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.container {
padding: 0 var(--space-normal);
width: 100%;
overflow: auto;
.articles--loader {
align-items: center;
display: flex;
font-size: var(--font-size-default);
justify-content: center;
padding: var(--space-big);
}
}
</style>

2
app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="container py-2 px-4 w-full">
<div class="py-2 px-4 w-full max-w-full">
<div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
<div class="flex items-center">
<woot-sidemenu-icon />

2
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
>
<settings-header
button-route="new"

2
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
View File

@@ -2,7 +2,7 @@
<div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
<form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
<div
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
>
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"

5
app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue
View File

@@ -11,7 +11,10 @@
</woot-tabs>
<div class="w-full">
<p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
<p
v-if="!uiFlags.isFetching && !attributes.length"
class="mt-12 flex items-center justify-center"
>
{{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
</p>
<woot-loading-state

2
app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue
View File

@@ -2,7 +2,7 @@
<div class="flex-1 overflow-auto p-4">
<router-link
:to="addAccountScoping('settings/macros/new')"
class="button success button--fixed-top"
class="button success button--fixed-top flex gap-1"
>
<fluent-icon icon="add-circle" />
<span class="button__content">

2
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
View File

@@ -116,7 +116,7 @@ export default {
&.has-error {
animation: shake 0.3s ease-in-out 0s 2;
@apply bg-red-50 dark:bg-red-100;
@apply bg-red-50 dark:bg-red-800;
}
}
}

4
app/javascript/shared/components/emoji/EmojiInput.vue
View File

@@ -173,7 +173,7 @@ export default {
}
.box-shadow-blue-dark {
box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #37546d;
box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #4c5155;
}
}
</style>
@@ -185,7 +185,7 @@ export default {
$space-slab: 12px;
@media (prefers-color-scheme: dark) {
$color-bg-dark: #293f51;
$color-bg-dark: #26292b;
@include arrow(bottom, $color-bg-dark, $space-slab);
}
@media (prefers-color-scheme: light) {

4
package.json
View File

@@ -18,7 +18,8 @@
"prepare": "husky install",
"size": "size-limit"
},
"size-limit": [{
"size-limit": [
{
"path": "public/packs/js/widget-*.js",
"limit": "270 KB"
},
@@ -33,6 +34,7 @@
"@chatwoot/utils": "^0.0.16",
"@hcaptcha/vue-hcaptcha": "^0.3.2",
"@june-so/analytics-next": "^1.36.5",
"@radix-ui/colors": "^1.0.1",
"@rails/actioncable": "6.1.3",
"@rails/ujs": "^7.0.3-1",
"@rails/webpacker": "5.4.4",

164
tailwind.config.js
View File

@@ -1,3 +1,17 @@
const {
blue,
blueDark,
green,
greenDark,
yellow,
yellowDark,
slate,
slateDark,
red,
redDark,
violet,
violetDark,
} = require('@radix-ui/colors');
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
darkMode: 'class',
@@ -23,94 +37,94 @@ module.exports = {
modal: 'rgba(0, 0, 0, 0.4)',
current: 'currentColor',
woot: {
25: '#F5FAFF',
50: '#EBF5FF',
75: '#D6EBFF',
100: '#C2E1FF',
200: '#99CEFF',
300: '#70BAFF',
400: '#47A6FF',
500: '#1F93FF',
600: '#1976CC',
700: '#135899',
800: '#0C3B66',
900: '#061D33',
25: blue.blue2,
50: blue.blue3,
75: blue.blue4,
100: blue.blue5,
200: blue.blue7,
300: blue.blue8,
400: blueDark.blue11,
500: blueDark.blue10,
600: blueDark.blue9,
700: blueDark.blue8,
800: blueDark.blue6,
900: blueDark.blue2,
},
green: {
50: '#E6F8E6',
100: '#C4EEC2',
200: '#9DE29A',
300: '#6FD86F',
400: '#44CE4B',
500: '#00C41D',
600: '#00B412',
700: '#00A200',
800: '#009000',
900: '#007000',
50: greenDark.green12,
100: green.green6,
200: green.green7,
300: green.green8,
400: greenDark.green10,
500: greenDark.green9,
600: green.green10,
700: green.green11,
800: greenDark.green7,
900: greenDark.green6,
},
yellow: {
50: '#FEFDE8',
100: '#FDFCC4',
200: '#FCF68C',
300: '#F9E736',
400: '#F6D819',
500: '#E6C00C',
600: '#C69608',
700: '#9E6b0A',
800: '#835510',
900: '#6F4514',
50: yellow.yellow2,
100: yellow.yellow4,
200: yellow.yellow5,
300: yellowDark.yellow10,
400: yellowDark.yellow9,
500: yellowDark.yellow11,
600: yellow.yellow8,
700: yellow.yellow11,
800: yellowDark.yellow8,
900: yellowDark.yellow7,
},
slate: {
25: '#F8FAFC',
50: '#F1F5F8',
75: '#EBF0F5',
100: ' #E4EBF1',
200: ' #C9D7E3',
300: ' #AEC3D5',
400: ' #93AFC8',
500: ' #779BBB',
600: ' #446888',
700: ' #37546D',
800: ' #293F51',
900: ' #1B2836',
25: slate.slate2,
50: slate.slate3,
75: slate.slate4,
100: slate.slate5,
200: slate.slate7,
300: slate.slate8,
400: slateDark.slate11,
500: slateDark.slate10,
600: slate.slate11,
700: slateDark.slate8,
800: slateDark.slate4,
900: slateDark.slate1,
},
black: {
50: '#F7F7F7',
100: '#ECECED',
200: '#DDDDE0',
300: '#C6C7CA',
400: '#ABACAF',
500: '#96979C',
600: '#6E6F73',
700: '#5A5B5F',
800: '#3C3D40',
900: '#1B1C1F',
50: slate.slate2,
100: slateDark.slate12,
200: slate.slate7,
300: slate.slate8,
400: slateDark.slate11,
500: slate.slate9,
600: slateDark.slate9,
700: slateDark.slate8,
800: slateDark.slate7,
900: slateDark.slate2,
},
red: {
50: '#FFEBEE',
100: '#FFCCD1',
200: '#F69898',
300: '#EF6F6F',
400: '#F94B4A',
500: '#FF382D',
600: '#F02B2D',
700: '#DE1E27',
800: '#D11320',
900: '#C30011',
50: redDark.red12,
100: red.red6,
200: red.red8,
300: redDark.red11,
400: redDark.red10,
500: red.red9,
600: red.red10,
700: red.red11,
800: redDark.red8,
900: red.red12,
},
violet: {
50: '#FFFFFF',
100: '#F5EBFF',
200: '#DDB8FF',
300: '#C585FF',
400: '#AC52FF',
500: '#941FFF',
600: '#7B00EB',
700: '#6000B8',
800: '#450085',
900: '#2B0052',
50: violet.violet1,
100: violetDark.violet12,
200: violet.violet6,
300: violet.violet8,
400: violet.violet11,
500: violet.violet9,
600: violetDark.violet8,
700: violetDark.violet7,
800: violetDark.violet6,
900: violet.violet12,
},
body: '#2f3b49',
body: slateDark.slate7,
},
keyframes: {
...defaultTheme.keyframes,

5
yarn.lock
View File

@@ -3780,6 +3780,11 @@
mkdirp "^1.0.4"
rimraf "^3.0.2"
"@radix-ui/colors@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-1.0.1.tgz#e9703d6e1b6f3ace1855e5d784353327a548042c"
integrity sha512-xySw8f0ZVsAEP+e7iLl3EvcBXX7gsIlC1Zso/sPBW9gIWerBTgz6axrjU+MZ39wD+WFi5h5zdWpsg3+hwt2Qsg==
"@rails/actioncable@6.1.3":
version "6.1.3"
resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-6.1.3.tgz#c8a67ec4d22ecd6931f7ebd98143fddbc815419a"