LeadMagnet/leadchat
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
13 changed files with 96 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;
}
}
}