feat: Dark Mode (#7471)
This commit is contained in:
Sivin Varghese
@@ -445,69 +445,61 @@ export default {
|
||||
@import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
|
||||
|
||||
.ProseMirror-menubar-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@apply flex flex-col;
|
||||
.ProseMirror-menubar {
|
||||
min-height: var(--space-two) !important;
|
||||
margin-left: var(--space-minus-one);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
|
||||
|
||||
.ProseMirror-menu-active {
|
||||
@apply bg-slate-75 dark:bg-slate-800;
|
||||
}
|
||||
}
|
||||
> .ProseMirror {
|
||||
padding: 0;
|
||||
word-break: break-word;
|
||||
@apply p-0 break-words text-slate-800 dark:text-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-root {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
@apply w-full relative;
|
||||
}
|
||||
|
||||
.ProseMirror-woot-style {
|
||||
min-height: 5rem;
|
||||
max-height: 7.5rem;
|
||||
overflow: auto;
|
||||
@apply overflow-auto min-h-[5rem] max-h-[7.5rem];
|
||||
}
|
||||
|
||||
.ProseMirror-prompt {
|
||||
z-index: var(--z-index-highest);
|
||||
background: var(--color-background-light);
|
||||
border-radius: var(--border-radius-normal);
|
||||
border: 1px solid var(--color-border);
|
||||
@apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
|
||||
}
|
||||
|
||||
.is-private {
|
||||
.prosemirror-mention-node {
|
||||
font-weight: var(--font-weight-medium);
|
||||
background: var(--s-50);
|
||||
color: var(--s-900);
|
||||
padding: 0 var(--space-smaller);
|
||||
@apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
|
||||
}
|
||||
.ProseMirror-menubar {
|
||||
background: var(--y-50);
|
||||
|
||||
.ProseMirror-menubar-wrapper {
|
||||
.ProseMirror-menubar {
|
||||
@apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
|
||||
}
|
||||
|
||||
> .ProseMirror {
|
||||
@apply text-slate-800 dark:text-slate-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor-wrap {
|
||||
margin-bottom: var(--space-normal);
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.message-editor {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-normal);
|
||||
padding: 0 var(--space-slab);
|
||||
margin-bottom: 0;
|
||||
@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;
|
||||
}
|
||||
|
||||
.editor_warning {
|
||||
border: 1px solid var(--r-400);
|
||||
@apply border border-solid border-red-400 dark:border-red-400;
|
||||
}
|
||||
|
||||
.editor-warning__message {
|
||||
color: var(--r-400);
|
||||
font-weight: var(--font-weight-normal);
|
||||
padding: var(--space-smaller) 0 0 0;
|
||||
@apply text-red-400 dark:text-red-400 font-normal pt-1 pb-0 px-0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
class="modal-mask"
|
||||
>
|
||||
<fluent-icon icon="cloud-backup" />
|
||||
<h4 class="page-sub-title">
|
||||
<h4 class="page-sub-title text-slate-600 dark:text-slate-200">
|
||||
{{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
|
||||
</h4>
|
||||
</div>
|
||||
@@ -323,48 +323,35 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-slab) var(--space-normal);
|
||||
@apply flex justify-between py-3 px-4;
|
||||
|
||||
&.is-note-mode {
|
||||
background: var(--y-50);
|
||||
@apply bg-yellow-50 dark:bg-yellow-50;
|
||||
}
|
||||
}
|
||||
|
||||
.left-wrap .button {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.left-wrap {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
@apply items-center flex gap-2;
|
||||
}
|
||||
|
||||
.right-wrap {
|
||||
display: flex;
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
::v-deep .file-uploads {
|
||||
label {
|
||||
cursor: pointer;
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
&:hover .button {
|
||||
background: var(--s-100);
|
||||
@apply dark:bg-slate-800 bg-slate-100;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
color: var(--s-600);
|
||||
background: var(--white-transparent);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
color: var(--s-600);
|
||||
@apply text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent flex-col;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 5rem;
|
||||
@apply text-[5rem];
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="top-box">
|
||||
<div class="mode-wrap button-group">
|
||||
<div class="bg-black-50 flex justify-between dark:bg-slate-800">
|
||||
<div class="button-group">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
class="button--reply"
|
||||
@@ -20,8 +20,8 @@
|
||||
{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
<div class="action-wrap">
|
||||
<div v-if="isMessageLengthReachingThreshold" class="tabs-title">
|
||||
<div class="flex items-center my-0 mx-4">
|
||||
<div v-if="isMessageLengthReachingThreshold" class="text-xs">
|
||||
<span :class="charLengthClass">
|
||||
{{ characterLengthWarning }}
|
||||
</span>
|
||||
@@ -90,7 +90,7 @@ export default {
|
||||
};
|
||||
},
|
||||
charLengthClass() {
|
||||
return this.charactersRemaining < 0 ? 'message-error' : 'message-length';
|
||||
return this.charactersRemaining < 0 ? 'text-red-600' : 'text-slate-600';
|
||||
},
|
||||
characterLengthWarning() {
|
||||
return this.charactersRemaining < 0
|
||||
@@ -118,70 +118,34 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@apply bg-black-50 dark:bg-slate-800;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@apply flex border-0 p-0 m-0;
|
||||
|
||||
.button {
|
||||
font-size: var(--font-size-small);
|
||||
font-weight: var(--font-weight-medium);
|
||||
padding: var(--space-one) var(--space-normal);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
|
||||
&.is-active {
|
||||
background: white;
|
||||
@apply bg-white dark:bg-slate-900;
|
||||
}
|
||||
}
|
||||
|
||||
.button--reply {
|
||||
border-radius: 0;
|
||||
@apply border-r border-b-0 border-l-0 border-slate-50 dark:border-slate-700;
|
||||
|
||||
@apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply border-r border-slate-50 dark:border-slate-700;
|
||||
}
|
||||
}
|
||||
|
||||
.button--note {
|
||||
border-radius: 0;
|
||||
|
||||
@apply border-l-0 rounded-none;
|
||||
&.is-active {
|
||||
@apply border-r border-b-0 border-slate-50 dark:border-slate-700;
|
||||
background: var(--y-50);
|
||||
@apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 border-t-0 border-slate-50 dark:border-slate-700;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--y-700);
|
||||
@apply text-yellow-700 dark:text-yellow-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button--note {
|
||||
color: var(--y-600);
|
||||
}
|
||||
|
||||
.action-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 var(--space-normal);
|
||||
font-size: var(--font-size-mini);
|
||||
|
||||
.message-error {
|
||||
color: var(--r-600);
|
||||
}
|
||||
.message-length {
|
||||
color: var(--s-600);
|
||||
}
|
||||
@apply text-yellow-600 dark:text-yellow-600;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user