rodrigo/iachat
1
0
Fork 0
Code Issues Pull Requests Actions 3 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 96 additions and 99 deletions
Show Stats 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'; this.theme = 'dark';
document.body.classList.add('dark'); document.body.classList.add('dark');
document.documentElement.setAttribute('style', 'color-scheme: dark;');
} else { } else {
this.theme = 'light '; this.theme = 'light ';
document.body.classList.remove('dark'); document.body.classList.remove('dark');
document.documentElement.setAttribute('style', 'color-scheme: light;');
} }
}, },
listenToThemeChanges() { 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'; @import 'woot';

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

@ -49,7 +49,7 @@
} }
&.success { &.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 { &.alert {
@ -110,7 +110,7 @@
} }
&.success { &.success {
@apply text-green-700 dark:text-green-100 ; @apply text-green-700 dark:text-green-100;
} }
&.alert { &.alert {
@ -118,26 +118,26 @@
} }
&.warning { &.warning {
@apply text-yellow-700 dark:text-yellow-700; @apply text-yellow-700 dark:text-yellow-600;
} }
&:hover { &:hover {
@apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100; @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
&.secondary { &.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 { &.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 { &.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 { &.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 // scss-lint:disable MergeableSelector
@mixin bubble-with-types { @tailwind utilities;
@apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white; @layer utilities {
.custom-gradient {
.message-text__wrap { background-image: linear-gradient(
@apply relative; -180deg,
transparent 3%,
.link { rgb(76 81 85) 130%
@apply text-white dark:text-white underline; );
}
} }
.image, .bubble-with-types {
.video { @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
@apply cursor-pointer relative;
.modal-container { .message-text__wrap {
@apply text-center; @apply relative;
.link {
@apply text-white dark:text-white underline;
}
} }
.modal-image { .image,
@apply max-h-[76vh] max-w-[76vw]; .video {
} @apply cursor-pointer relative;
.modal-video { .modal-container {
@apply max-h-[76vh] max-w-[76vw]; @apply text-center;
} }
&::before { .modal-image {
@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; @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 { .bubble {
@include bubble-with-types; @apply bubble-with-types text-left break-words;
@apply text-left break-words;
.aplayer { .aplayer {
@apply shadow-none; @apply shadow-none;
@ -129,7 +139,7 @@
@apply ml-auto break-words rounded-l-lg rounded-r; @apply ml-auto break-words rounded-l-lg rounded-r;
&.is-private { &.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 { &.is-image {

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

@ -1,6 +1,6 @@
.reply-box { .reply-box {
transition: box-shadow 0.35s $swift-ease-out-function, transition: box-shadow 0.35s $swift-ease-out-function,
height 2s $swift-ease-out-function; height 2s $swift-ease-out-function;
&.is-focused { &.is-focused {
box-shadow: var(--shadow); box-shadow: var(--shadow);
@ -47,13 +47,13 @@
} }
&.is-private { &.is-private {
background: var(--y-50); @apply bg-yellow-100 dark:bg-yellow-800;
.reply-box__top { .reply-box__top {
background: var(--y-50); @apply bg-yellow-100 dark:bg-yellow-800;
> input { > 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> <style lang="scss" scoped>
.banner { .banner {
--x-padding: var(--space-normal); @apply flex items-center gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center;
--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;
&.primary { &.primary {
background: var(--w-500); @apply bg-woot-500 dark:bg-woot-500;
.banner-action__button { .banner-action__button {
background: var(--w-600); @apply bg-woot-600 dark:bg-woot-600 border-none text-white;
border: none;
color: var(--white);
&:hover { &:hover {
background: var(--w-800); @apply bg-woot-700 dark:bg-woot-700;
} }
} }
} }
&.secondary { &.secondary {
background: var(--s-200); @apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
color: var(--s-800);
a { a {
color: var(--s-800); @apply text-slate-800 dark:text-slate-800;
} }
} }
&.alert { &.alert {
background: var(--r-500); @apply bg-red-500 dark:bg-red-500;
.banner-action__button { .banner-action__button {
background: var(--r-700); @apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
border: none;
color: var(--white);
&:hover { &:hover {
background: var(--r-800); @apply bg-red-800 dark:bg-red-800;
} }
} }
} }
&.warning { &.warning {
background: var(--y-600); @apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
color: var(--y-500);
a { a {
color: var(--y-500); @apply text-yellow-500 dark:text-yellow-500;
} }
} }
&.gray { &.gray {
background: var(--b-500); @apply text-black-500 dark:text-black-500;
.banner-action__button { .banner-action__button {
color: var(--white); @apply text-white dark:text-white;
} }
} }
a { a {
margin-left: var(--space-smaller); @apply ml-1 underline text-white dark:text-white text-xs;
text-decoration: underline;
color: var(--white);
font-size: var(--font-size-mini);
} }
.banner-action__button { .banner-action__button {
::v-deep .button__content { ::v-deep .button__content {
white-space: nowrap; @apply whitespace-nowrap;
} }
} }
.banner-message { .banner-message {
display: flex; @apply flex items-center;
align-items: center;
} }
.actions { .actions {
display: flex; @apply flex gap-1 right-3;
gap: var(--space-smaller);
right: var(--y-padding);
} }
} }
</style> </style>

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

@ -462,10 +462,7 @@ export default {
h3, h3,
h4, h4,
h5, h5,
h6 { h6,
@apply text-slate-800 dark:text-slate-100;
}
p { p {
@apply text-slate-800 dark:text-slate-100; @apply text-slate-800 dark:text-slate-100;
} }
@ -498,16 +495,20 @@ export default {
.is-private { .is-private {
.prosemirror-mention-node { .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-wrapper {
.ProseMirror-menubar { .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 { > .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; @apply flex justify-between py-3 px-4;
&.is-note-mode { &.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 { .button--note {
@apply border-l-0 rounded-none; @apply border-l-0 rounded-none;
&.is-active { &.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, &:hover,
&:active { &: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; @apply text-woot-700 dark:text-woot-700;
} }
&.is-private.is-text > .message-text__wrap .prosemirror-mention-node { &.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 { &.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; @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
} }
ol li {
@apply list-item list-decimal;
}
pre { 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; @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 { 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"> <div class="reply-box" :class="replyBoxClass">
<banner <banner
v-if="showSelfAssignBanner" v-if="showSelfAssignBanner"
action-button-variant="link" action-button-variant="clear"
color-scheme="secondary" color-scheme="secondary"
class="banner--self-assign"
:banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')" :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
:has-action-button="true" :has-action-button="true"
:action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')" :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@ -1094,6 +1095,10 @@ export default {
@apply mb-0; @apply mb-0;
} }
.banner--self-assign {
@apply py-2;
}
.message-signature-wrap { .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; @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; @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
&.is-private { &.is-private {
@apply bg-yellow-50 dark:bg-yellow-50; @apply bg-yellow-50 dark:bg-yellow-200;
} }
} }
.send-button { .send-button {

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

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

8
tailwind.config.js
View File

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