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

25
app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="conversation-details-wrap"
class="conversation-details-wrap bg-slate-25 dark:bg-slate-800"
:class="{ 'with-border-right': !isOnExpandedLayout }"
>
<conversation-header
@@ -23,7 +23,10 @@
:show-badge="false"
/>
</woot-tabs>
<div v-show="!activeIndex" class="messages-and-sidebar">
<div
v-show="!activeIndex"
class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
>
<messages-view
v-if="currentChat.id"
:inbox-id="inboxId"
@@ -139,16 +142,14 @@ export default {
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/woot';
.conversation-details-wrap {
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
background: var(--color-background-light);
&.with-border-right {
border-right: 1px solid var(--color-border);
@apply border-r border-slate-50 dark:border-slate-700;
}
}
@@ -158,20 +159,8 @@ export default {
min-height: var(--dashboard-app-tabs-height);
}
.messages-and-sidebar {
display: flex;
background: var(--color-background-light);
margin: 0;
height: 100%;
min-height: 0;
}
.conversation-sidebar-wrap {
border-right: 1px solid var(--color-border);
height: auto;
flex: 0 0;
z-index: var(--z-index-low);
overflow: auto;
@apply border-r border-slate-50 dark:border-slate-700;
background: white;
flex-basis: 100%;

26
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View File

@@ -1,6 +1,8 @@
<template>
<div class="conv-header">
<div class="conversation-header--details">
<div class="conv-header flex-col md:flex-row">
<div
class="flex-1 w-100 flex flex-col md:flex-row items-center justify-center"
>
<div class="user">
<back-button v-if="showBackButton" :back-url="backButtonUrl" />
<Thumbnail
@@ -44,7 +46,7 @@
</div>
</div>
<div
class="header-actions-wrap"
class="header-actions-wrap mt-3 lg:mt-0"
:class="{ 'has-open-sidebar': isContactPanelOpen }"
>
<more-actions :conversation-id="currentChat.id" />
@@ -159,27 +161,9 @@ export default {
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/woot';
.conv-header {
flex: 0 0 var(--space-jumbo);
flex-direction: row;
@include breakpoint(medium up) {
flex-direction: column;
}
}
.conversation-header--details {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
@include breakpoint(medium up) {
flex-direction: row;
}
}
.option__desc {

8
app/javascript/dashboard/components/widgets/conversation/OnboardingView.vue
View File

@@ -30,7 +30,7 @@
</p>
</div>
<div class="features-item">
<h2 class="block-title">
<h2 class="block-title text-black-900 dark:text-slate-200">
<span class="emoji">💬</span>
<span class="conversation--title">{{
$t('ONBOARDING.ALL_CONVERSATION.TITLE')
@@ -41,7 +41,7 @@
</p>
</div>
<div class="features-item">
<h2 class="block-title">
<h2 class="block-title text-black-900 dark:text-slate-200">
<span class="emoji">👥</span>
{{ $t('ONBOARDING.TEAM_MEMBERS.TITLE') }}
</h2>
@@ -53,7 +53,7 @@
</router-link>
</div>
<div class="features-item">
<h2 class="block-title">
<h2 class="block-title text-black-900 dark:text-slate-200">
<span class="emoji">📥</span>{{ $t('ONBOARDING.INBOXES.TITLE') }}
</h2>
<p class="intro-body">
@@ -64,7 +64,7 @@
</router-link>
</div>
<div class="features-item">
<h2 class="block-title">
<h2 class="block-title text-black-900 dark:text-slate-200">
<span class="emoji">🔖</span>{{ $t('ONBOARDING.LABELS.TITLE') }}
</h2>
<p class="intro-body">

28
app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
View File

@@ -6,8 +6,11 @@
delay: { show: 1500, hide: 0 },
hideOnClick: true,
}"
class="conversation-priority-mark"
:class="{ urgent: priority === CONVERSATION_PRIORITY.URGENT }"
class="shrink-0 rounded-xs inline-flex w-3 h-3 "
:class="{
'bg-red-50 text-red-500': isUrgent,
'bg-slate-50 text-slate-600': !isUrgent,
}"
>
<fluent-icon
:icon="`priority-${priority.toLowerCase()}`"
@@ -41,24 +44,9 @@ export default {
`CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
);
},
isUrgent() {
return this.priority === CONVERSATION_PRIORITY.URGENT;
},
},
};
</script>
<style scoped lang="scss">
.conversation-priority-mark {
align-items: center;
flex-shrink: 0;
background: var(--s-50);
border-radius: var(--border-radius-small);
color: var(--s-600);
display: inline-flex;
width: var(--space-snug);
height: var(--space-snug);
&.urgent {
background: var(--r-50);
color: var(--r-500);
}
}
</style>

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

@@ -1144,8 +1144,7 @@ export default {
}
.reply-box {
border-top: 1px solid var(--color-border);
background: white;
@apply border-r border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
&.is-private {
background: var(--y-50);

6
app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
View File

@@ -254,8 +254,6 @@ export default {
</script>
<style lang="scss" scoped>
@import '~dashboard/assets/scss/woot';
.right {
.message-text--metadata {
align-items: center;
@@ -319,10 +317,6 @@ export default {
text-align: center;
font-size: var(--font-size-micro);
margin-left: 0;
@include breakpoint(xlarge up) {
margin-left: var(--space-small);
}
}
}
}