scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 03:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Dark mode improvements (#7658)

Browse Source
This commit is contained in:
Sivin Varghese
2023-08-04 00:35:22 +05:30
committed by GitHub
parent 0921a7c817
commit 69d46f278a
13 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/App.vue
View File

@@ -112,9 +112,11 @@ export default {
) {
this.theme = 'dark';
document.body.classList.add('dark');
document.documentElement.setAttribute('style', 'color-scheme: dark;');
} else {
this.theme = 'light ';
document.body.classList.remove('dark');
document.documentElement.setAttribute('style', 'color-scheme: light;');
}
},
listenToThemeChanges() {

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

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

14
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 {
@@ -110,7 +110,7 @@
}
&.success {
@apply text-green-700 dark:text-green-100 ;
@apply text-green-700 dark:text-green-100;
}
&.alert {
@@ -118,26 +118,26 @@
}
&.warning {
@apply text-yellow-700 dark:text-yellow-700;
@apply text-yellow-700 dark:text-yellow-600;
}
&:hover {
@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 text-slate-800 dark:text-slate-100;
@apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
}
&.success {
@apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
@apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
}
&.alert {
@apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
@apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
}
&.warning {
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
@apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
}
}

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

@@ -1,34 +1,45 @@
// scss-lint:disable MergeableSelector
@mixin bubble-with-types {
@apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
.message-text__wrap {
@apply relative;
.link {
@apply text-white dark:text-white underline;
}
@tailwind utilities;
@layer utilities {
.custom-gradient {
background-image: linear-gradient(
-180deg,
transparent 3%,
rgb(76 81 85) 130%
);
}
.image,
.video {
@apply cursor-pointer relative;
.bubble-with-types {
@apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
.modal-container {
@apply text-center;
.message-text__wrap {
@apply relative;
.link {
@apply text-white dark:text-white underline;
}
}
.modal-image {
@apply max-h-[76vh] max-w-[76vw];
}
.image,
.video {
@apply cursor-pointer relative;
.modal-video {
@apply max-h-[76vh] max-w-[76vw];
}
.modal-container {
@apply text-center;
}
&::before {
@apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
.modal-image {
@apply max-h-[76vh] max-w-[76vw];
}
.modal-video {
@apply max-h-[76vh] max-w-[76vw];
}
&::before {
@apply custom-gradient bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
}
}
}
}
@@ -55,8 +66,7 @@
}
.bubble {
@include bubble-with-types;
@apply text-left break-words;
@apply bubble-with-types text-left break-words;
.aplayer {
@apply shadow-none;
@@ -129,7 +139,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-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
@apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
}
&.is-image {

8
app/javascript/dashboard/assets/scss/widgets/_reply-box.scss
View File

@@ -1,6 +1,6 @@
.reply-box {
transition: box-shadow 0.35s $swift-ease-out-function,
height 2s $swift-ease-out-function;
height 2s $swift-ease-out-function;
&.is-focused {
box-shadow: var(--shadow);
@@ -47,13 +47,13 @@
}
&.is-private {
background: var(--y-50);
@apply bg-yellow-100 dark:bg-yellow-800;
.reply-box__top {
background: var(--y-50);
@apply bg-yellow-100 dark:bg-yellow-800;
> input {
background: var(--y-50);
@apply bg-yellow-100 dark:bg-yellow-800;
}
}
}

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

@@ -96,87 +96,67 @@ export default {
<style lang="scss" scoped>
.banner {
--x-padding: var(--space-normal);
--y-padding: var(--space-slab);
display: flex;
gap: var(--x-padding);
color: var(--white);
font-size: var(--font-size-mini);
padding: var(--y-padding) var(--x-padding);
justify-content: center;
@apply flex items-center gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center;
&.primary {
background: var(--w-500);
@apply bg-woot-500 dark:bg-woot-500;
.banner-action__button {
background: var(--w-600);
border: none;
color: var(--white);
@apply bg-woot-600 dark:bg-woot-600 border-none text-white;
&:hover {
background: var(--w-800);
@apply bg-woot-700 dark:bg-woot-700;
}
}
}
&.secondary {
background: var(--s-200);
color: var(--s-800);
@apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
a {
color: var(--s-800);
@apply text-slate-800 dark:text-slate-800;
}
}
&.alert {
background: var(--r-500);
@apply bg-red-500 dark:bg-red-500;
.banner-action__button {
background: var(--r-700);
border: none;
color: var(--white);
@apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
&:hover {
background: var(--r-800);
@apply bg-red-800 dark:bg-red-800;
}
}
}
&.warning {
background: var(--y-600);
color: var(--y-500);
@apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
a {
color: var(--y-500);
@apply text-yellow-500 dark:text-yellow-500;
}
}
&.gray {
background: var(--b-500);
@apply text-black-500 dark:text-black-500;
.banner-action__button {
color: var(--white);
@apply text-white dark:text-white;
}
}
a {
margin-left: var(--space-smaller);
text-decoration: underline;
color: var(--white);
font-size: var(--font-size-mini);
@apply ml-1 underline text-white dark:text-white text-xs;
}
.banner-action__button {
::v-deep .button__content {
white-space: nowrap;
@apply whitespace-nowrap;
}
}
.banner-message {
display: flex;
align-items: center;
@apply flex items-center;
}
.actions {
display: flex;
gap: var(--space-smaller);
right: var(--y-padding);
@apply flex gap-1 right-3;
}
}
</style>

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

@@ -462,10 +462,7 @@ export default {
h3,
h4,
h5,
h6 {
@apply text-slate-800 dark:text-slate-100;
}
h6,
p {
@apply text-slate-800 dark:text-slate-100;
}
@@ -498,16 +495,20 @@ export default {
.is-private {
.prosemirror-mention-node {
@apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
@apply font-medium bg-yellow-100 dark:bg-yellow-800 text-slate-900 dark:text-slate-25 py-0 px-1;
}
.ProseMirror-menubar-wrapper {
.ProseMirror-menubar {
@apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
@apply bg-yellow-100 dark:bg-yellow-800 text-slate-700 dark:text-slate-25;
}
> .ProseMirror {
@apply text-slate-800 dark:text-slate-800;
@apply text-slate-800 dark:text-slate-25;
p {
@apply text-slate-800 dark:text-slate-25;
}
}
}
}

2
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View File

@@ -326,7 +326,7 @@ export default {
@apply flex justify-between py-3 px-4;
&.is-note-mode {
@apply bg-yellow-50 dark:bg-yellow-50;
@apply bg-yellow-100 dark:bg-yellow-800;
}
}

2
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
View File

@@ -137,7 +137,7 @@ export default {
.button--note {
@apply border-l-0 rounded-none;
&.is-active {
@apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 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-slate-50 dark:border-slate-700;
}
&:hover,
&:active {

12
app/javascript/dashboard/components/widgets/conversation/Message.vue
View File

@@ -555,7 +555,7 @@ export default {
@apply text-woot-700 dark:text-woot-700;
}
&.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
@apply font-bold bg-none rounded-sm p-0 text-slate-700 dark:text-slate-700 underline;
@apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
}
&.is-from-bot {
@@ -651,6 +651,10 @@ li.right {
@apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
}
ol li {
@apply list-item list-decimal;
}
pre {
@apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
@@ -660,7 +664,11 @@ li.right {
}
blockquote {
@apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-700 text-slate-800 dark:text-slate-100;
@apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-600 text-slate-800 dark:text-slate-100;
p {
@apply text-slate-800 dark:text-slate-300;
}
}
}

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

@@ -2,8 +2,9 @@
<div class="reply-box" :class="replyBoxClass">
<banner
v-if="showSelfAssignBanner"
action-button-variant="link"
action-button-variant="clear"
color-scheme="secondary"
class="banner--self-assign"
:banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
:has-action-button="true"
:action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -1094,6 +1095,10 @@ export default {
@apply mb-0;
}
.banner--self-assign {
@apply py-2;
}
.message-signature-wrap {
@apply my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto;
}
@@ -1110,7 +1115,7 @@ export default {
@apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
&.is-private {
@apply bg-yellow-50 dark:bg-yellow-50;
@apply bg-yellow-50 dark:bg-yellow-200;
}
}
.send-button {

4
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
View File

@@ -97,7 +97,6 @@
<woot-button
v-tooltip="$t('CONTACT_PANEL.NEW_MESSAGE')"
title="$t('CONTACT_PANEL.NEW_MESSAGE')"
class="mr-2 rtl:ml-2 rtl:mr-0"
icon="chat"
size="small"
@click="toggleConversationModal"
@@ -105,7 +104,6 @@
<woot-button
v-tooltip="$t('EDIT_CONTACT.BUTTON_LABEL')"
title="$t('EDIT_CONTACT.BUTTON_LABEL')"
class="mr-2 rtl:ml-2 rtl:mr-0"
icon="edit"
variant="smooth"
size="small"
@@ -114,7 +112,6 @@
<woot-button
v-tooltip="$t('CONTACT_PANEL.MERGE_CONTACT')"
title="$t('CONTACT_PANEL.MERGE_CONTACT')"
class="mr-2 rtl:ml-2 rtl:mr-0"
icon="merge"
variant="smooth"
size="small"
@@ -126,7 +123,6 @@
v-if="isAdmin"
v-tooltip="$t('DELETE_CONTACT.BUTTON_LABEL')"
title="$t('DELETE_CONTACT.BUTTON_LABEL')"
class="mr-2 rtl:ml-2 rtl:mr-0"
icon="delete"
variant="smooth"
size="small"

8
tailwind.config.js
View File

@@ -64,15 +64,15 @@ module.exports = {
},
yellow: {
50: yellow.yellow2,
100: yellow.yellow4,
100: yellow.yellow3,
200: yellow.yellow5,
300: yellowDark.yellow10,
400: yellowDark.yellow9,
500: yellowDark.yellow11,
600: yellow.yellow8,
700: yellow.yellow11,
800: yellowDark.yellow8,
900: yellowDark.yellow7,
700: yellowDark.yellow7,
800: yellowDark.yellow2,
900: yellowDark.yellow1,
},
slate: {
25: slate.slate2,