LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Add support for dark mode in dashboard (#7460)

Browse Source 
- Add config for TailwindCSS
- Enable HMR
- Add a config in LocalStorage for Dark Mode

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2023-07-06 00:43:32 +05:30
committed by GitHub
parent 71837bedf9
commit 3054a4cb59
64 changed files with 390 additions and 854 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/dashboard/assets/scss/_foundation-custom.scss
View File

@@ -20,15 +20,6 @@ select {
margin-left: var(--space-normal);
}
.tooltip {
background-color: var(--black-transparent);
border-radius: $space-smaller;
font-size: $font-size-mini;
max-width: var(--space-giga);
padding: $space-smaller $space-small;
z-index: 999;
}
code {
border: 0;
font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',

2
app/javascript/dashboard/assets/scss/_helper-classes.scss
View File

@@ -1,5 +1,5 @@
.bg-light {
@include background-light;
@apply bg-slate-25 dark:bg-slate-800;
}
.flex-center {

24
app/javascript/dashboard/assets/scss/_mixins.scss
View File

@@ -22,43 +22,43 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
}
@mixin border-normal() {
border: 1px solid $color-border;
@apply border border-slate-50 dark:border-slate-700;
}
@mixin border-normal-left() {
border-left: 1px solid $color-border;
@apply border-l border-slate-50 dark:border-slate-700;
}
@mixin border-normal-top() {
border-top: 1px solid $color-border;
@apply border-t border-slate-50 dark:border-slate-700;
}
@mixin border-normal-right() {
border-right: 1px solid $color-border;
@apply border-r border-slate-50 dark:border-slate-700;
}
@mixin border-normal-bottom() {
border-bottom: 1px solid $color-border;
@apply border-b border-slate-50 dark:border-slate-700;
}
@mixin border-light() {
border: 1px solid $color-border-light;
@apply border border-slate-25 dark:border-slate-700;
}
@mixin border-light-left() {
border-left: 1px solid $color-border-light;
@apply border-l border-slate-25 dark:border-slate-700;
}
@mixin border-light-top() {
border-top: 1px solid $color-border-light;
@apply border-t border-slate-25 dark:border-slate-700;
}
@mixin border-light-right() {
border-right: 1px solid $color-border-light;
@apply border-r border-slate-25 dark:border-slate-700;
}
@mixin border-light-bottom() {
border-bottom: 1px solid $color-border-light;
@apply border-b border-slate-25 dark:border-slate-700;
}
// background
@@ -67,11 +67,11 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
}
@mixin background-light() {
background: $color-background-light;
@apply bg-slate-50 dark:bg-slate-800;
}
@mixin background-white() {
background: $color-white;
@apply bg-white dark:bg-slate-900;
}
// input form

12
app/javascript/dashboard/assets/scss/_rtl.scss
View File

@@ -3,9 +3,6 @@
// Primary sidebar
.primary--sidebar {
border-left: 1px solid var(--s-50);
border-right: 0;
.options-menu.dropdown-pane {
right: var(--space-smaller);
@@ -42,15 +39,6 @@
margin-right: unset;
}
.account-context--group .account-context--switch-group {
--overlay-shadow: linear-gradient(
to left,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 50%
);
background-image: var(--overlay-shadow);
}
// Help center sidebar
.sidebar-header--wrap .header-title--wrap {
margin-left: unset;

6
app/javascript/dashboard/assets/scss/_utility-helpers.scss
View File

@@ -43,17 +43,13 @@
}
.border-right {
border-right: 1px solid var(--color-border);
@apply border-r border-slate-50 dark:border-slate-700;
}
.border-left {
border-left: 1px solid var(--color-border);
}
.bg-white {
background-color: var(--white);
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;

9
app/javascript/dashboard/assets/scss/_woot.scss
View File

@@ -1,3 +1,7 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'shared/assets/fonts/plus-jakarta';
@import 'shared/assets/stylesheets/animations';
@import 'shared/assets/stylesheets/colors';
@@ -67,3 +71,8 @@
@import 'plugins/dropdown';
@import '~shared/assets/stylesheets/ionicons';
@import 'utility-helpers';
.tooltip {
@apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
}

4
app/javascript/dashboard/assets/scss/views/settings/inbox.scss
View File

@@ -4,10 +4,8 @@
// Conversation header - Light BG
.settings-header {
@include background-white;
@include flex;
@include flex-align($x: justify, $y: middle);
border-bottom: 1px solid var(--s-50);
height: $header-height;
min-height: $header-height;
padding: $space-small $space-normal;
@@ -128,8 +126,8 @@
}
.wizard-body {
@include background-white;
@include border-light;
@include background-white;
@include full-height();
padding: $space-medium;

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

@@ -8,6 +8,11 @@ $default-button-height: 2.5rem;
.button__content {
width: 100%;
img,
svg {
display: inline-block;
}
}
.spinner {

5
app/javascript/dashboard/assets/scss/widgets/_conv-header.scss
View File

@@ -59,11 +59,6 @@ $resolve-button-width: 8.25rem;
flex-direction: row;
flex-grow: 1;
justify-content: flex-end;
margin-top: var(--space-small);
@include breakpoint(medium up) {
margin-top: 0;
}
&.has-open-sidebar {
justify-content: flex-end;

5
app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss
View File

@@ -82,6 +82,11 @@
text-overflow: ellipsis;
white-space: nowrap;
width: 16.875rem;
img,
svg {
display: inline-block;
}
}
.conversation--meta {

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

@@ -390,3 +390,42 @@
margin-bottom: 0;
}
}
.conversation-sidebar-wrap {
flex: 0 0;
flex-basis: 100%;
height: auto;
overflow: auto;
z-index: var(--z-index-low);
@include breakpoint(medium up) {
flex-basis: 17.5rem;
}
@include breakpoint(large up) {
flex-basis: 18.75rem;
}
@include breakpoint(xlarge up) {
flex-basis: 19.375rem;
}
@include breakpoint(xxlarge up) {
flex-basis: 20.625rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 25rem;
}
}
.activity-wrap {
.message-text--metadata {
.time {
@include breakpoint(xlarge up) {
margin-left: var(--space-small);
}
}
}
}

4
app/javascript/dashboard/assets/scss/widgets/_forms.scss
View File

@@ -61,3 +61,7 @@ input {
border-color: var(--r-400);
}
}
label {
@apply dark:text-slate-300;
}

1
app/javascript/dashboard/assets/scss/widgets/_modal.scss
View File

@@ -34,7 +34,6 @@
.modal-container {
@include normal-shadow;
background-color: $color-white;
border-radius: $space-smaller;
max-height: 100%;
overflow: auto;

2
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);

15
app/javascript/dashboard/assets/scss/widgets/_states.scss
View File

@@ -1,18 +1,3 @@
.loading-state {
padding: $space-jumbo $space-smaller;
.message {
color: $color-gray;
display: block;
text-align: center;
width: 100%;
}
.spinner {
float: none;
top: -$space-smaller;
}
}
// EMPTY STATES
.empty-state {

0
app/javascript/dashboard/assets/scss/widgets/_widget_builder.scss Normal file
View File

6
app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss
View File

@@ -4,15 +4,13 @@ table {
thead {
th {
font-weight: var(--font-weight-bold);
text-align: left;
text-transform: uppercase;
@apply font-medium text-left uppercase text-slate-900 dark:text-slate-200;
}
}
tbody {
tr {
border-bottom: 1px solid var(--color-border-light);
@apply border-b border-slate-50 dark:border-slate-700;
}
td {