feat: update color palette [CW-2293] (#7617)
This commit is contained in:
Shivam Mishra
@@ -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,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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
}"
|
||||
|
||||
@@ -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,
|
||||
|
||||
+4
-4
@@ -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 }}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
@@ -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,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">
|
||||
|
||||
Reference in New Issue
Block a user