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

feat: Dark Mode (#7471)

Browse Source
This commit is contained in:
Sivin Varghese
2023-07-21 22:10:25 +05:30
committed by GitHub
parent 480f34803b
commit 40ec0d109a
264 changed files with 2935 additions and 6817 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/javascript/dashboard/modules/search/components/MessageContent.vue
View File

@@ -1,10 +1,10 @@
<template>
<blockquote
ref="messageContainer"
class="message border-l-2 border-slate-100"
class="message border-l-2 border-slate-100 dark:border-slate-800"
>
<p class="header">
<strong class="author">
<strong class="text-slate-700 dark:text-slate-100">
{{ author }}
</strong>
{{ $t('SEARCH.WROTE') }}
@@ -83,29 +83,22 @@ export default {
<style scoped lang="scss">
.message {
padding: 0 var(--space-small);
margin-top: var(--space-small);
@apply py-0 px-2 mt-2;
}
.message-content::v-deep p,
.message-content::v-deep li::marker {
color: var(--s-700);
margin-bottom: var(--space-smaller);
}
.author {
color: var(--s-700);
@apply text-slate-700 dark:text-slate-100 mb-1;
}
.header {
color: var(--s-500);
margin-bottom: var(--space-smaller);
@apply text-slate-500 dark:text-slate-300 mb-1;
}
.message-content {
overflow-wrap: break-word;
@apply break-words text-slate-600 dark:text-slate-200;
}
.message-content::v-deep .searchkey--highlight {
color: var(--w-600);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
@apply text-woot-600 dark:text-woot-500 text-sm font-semibold;
}
</style>

22
app/javascript/dashboard/modules/search/components/SearchHeader.vue
View File

@@ -71,39 +71,31 @@ export default {
</script>
<style lang="scss" scoped>
@import 'app/javascript/dashboard/assets/scss/_mixins.scss';
.input-container {
position: relative;
display: flex;
align-items: center;
padding: var(--space-small) var(--space-normal);
border: 1px solid var(--s-100);
border-radius: var(--border-radius-small);
transition: border-bottom 0.2s ease-in-out;
@apply relative flex items-center py-2 px-4 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
input[type='search'] {
@include ghost-input;
width: 100%;
margin: 0;
@apply w-full m-0 shadow-none border-transparent active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none;
}
&.is-focused {
border-color: var(--w-100);
@apply border-woot-100 dark:border-woot-600;
.icon {
color: var(--w-400);
@apply text-woot-400 dark:text-woot-500;
}
}
}
.icon-container {
display: flex;
align-items: center;
@apply flex items-center;
.icon {
color: var(--s-400);
@apply text-slate-400;
}
}
.helper-label {
margin: 0;
@apply m-0;
}
</style>

12
app/javascript/dashboard/modules/search/components/SearchInput.vue
View File

@@ -32,20 +32,16 @@ export default {
</script>
<style lang="scss" scoped>
.search-input-box {
padding: var(--space-small);
@apply p-2;
}
.search--icon {
flex-shrink: 0;
color: var(--s-500);
@apply flex-shrink-0 text-slate-500 dark:text-slate-300;
}
.search-placeholder {
color: var(--s-500);
@apply text-slate-500 dark:text-slate-300;
}
.search-input {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-smaller);
@apply flex justify-center items-center gap-1;
}
</style>

22
app/javascript/dashboard/modules/search/components/SearchResultContactItem.vue
View File

@@ -53,31 +53,19 @@ export default {
<style scoped lang="scss">
.contact-item {
cursor: pointer;
display: flex;
align-items: center;
padding: var(--space-small);
border-radius: var(--border-radius-small);
&:hover {
background-color: var(--s-25);
}
@apply cursor-pointer flex items-center p-2 rounded-sm hover:bg-slate-25 dark:hover:bg-slate-800;
}
.contact-details {
margin-left: var(--space-small);
@apply ml-2 rtl:mr-2 rtl:ml-0;
}
.name {
margin: 0;
@apply m-0;
}
.details-meta {
margin: 0;
color: var(--s-600);
font-size: var(--font-size-small);
display: flex;
align-items: center;
@apply m-0 text-slate-600 dark:text-slate-200 text-sm flex items-center;
span {
margin-right: var(--space-smaller);
@apply ml-1 rtl:mr-1 rtl:ml-0;
}
}
</style>

2
app/javascript/dashboard/modules/search/components/SearchResultContactsList.vue
View File

@@ -6,7 +6,7 @@
:show-title="showTitle"
:is-fetching="isFetching"
>
<ul class="search-list">
<ul v-if="contacts.length" class="search-list">
<li v-for="contact in contacts" :key="contact.id">
<search-result-contact-item
:id="contact.id"

55
app/javascript/dashboard/modules/search/components/SearchResultConversationItem.vue
View File

@@ -13,7 +13,7 @@
small
/>
<div class="inbox-name-wrap">
<inbox-name :inbox="inbox" class="margin-right-1" />
<inbox-name :inbox="inbox" class="mr-2 rtl:mr-0 rtl:ml-2" />
</div>
</div>
<div>
@@ -25,7 +25,10 @@
<span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
{{ name }}
</h5>
<h5 v-if="email" class="text-block-title email text-truncate">
<h5
v-if="email"
class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
{{ email }}
</h5>
@@ -95,67 +98,37 @@ export default {
<style scoped lang="scss">
.conversation-item {
cursor: pointer;
display: flex;
padding: var(--space-small);
border-radius: var(--border-radius-small);
&:hover {
background-color: var(--s-25);
}
@apply cursor-pointer flex p-2 rounded hover:bg-slate-25 dark:hover:bg-slate-800;
}
.meta-wrap {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-smaller);
@apply flex items-center justify-between mb-1;
}
.icon-wrap {
width: var(--space-medium);
height: var(--space-medium);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--w-600);
border-radius: var(--border-radius-small);
background-color: var(--w-75);
@apply w-6 h-6 flex-shrink-0 bg-woot-75 dark:bg-woot-600/50 flex items-center justify-center rounded text-woot-600 dark:text-woot-500;
}
.inbox-name-wrap {
background-color: var(--s-25);
height: var(--space-two);
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--border-radius-small);
width: fit-content;
margin-left: var(--space-smaller);
@apply bg-slate-25 dark:bg-slate-800 h-5 flex justify-center items-center rounded w-fit ml-1 rtl:ml-0 rtl:mr-1;
}
.conversation-details {
margin-left: var(--space-small);
flex-grow: 1;
min-width: 0;
@apply ml-2 flex-grow min-w-0;
}
.name {
flex-shrink: 0;
@apply flex-shrink-0;
}
.conversation-id,
.name,
.email {
margin: 0;
@apply m-0;
}
.created-at,
.pre-text {
color: var(--s-600);
font-size: var(--font-size-mini);
font-weight: var(--font-weight-normal);
@apply text-slate-600 dark:text-slate-100 text-xs font-normal;
}
.user-details {
display: flex;
gap: var(--space-small);
@apply flex gap-2;
}
</style>

2
app/javascript/dashboard/modules/search/components/SearchResultConversationsList.vue
View File

@@ -6,7 +6,7 @@
:show-title="showTitle || isFetching"
:is-fetching="isFetching"
>
<ul class="search-list">
<ul v-if="conversations.length" class="search-list">
<li v-for="conversation in conversations" :key="conversation.id">
<search-result-conversation-item
:id="conversation.id"

2
app/javascript/dashboard/modules/search/components/SearchResultMessagesList.vue
View File

@@ -6,7 +6,7 @@
:show-title="showTitle"
:is-fetching="isFetching"
>
<ul class="search-list">
<ul v-if="messages.length" class="search-list">
<li v-for="message in messages" :key="message.id">
<search-result-conversation-item
:id="message.conversation_id"

29
app/javascript/dashboard/modules/search/components/SearchResultSection.vue
View File

@@ -1,7 +1,7 @@
<template>
<section class="result-section">
<div v-if="showTitle" class="header">
<h3 class="text-block-title">{{ title }}</h3>
<h3 class="text-sm text-slate-800 dark:text-slate-100">{{ title }}</h3>
</div>
<woot-loading-state v-if="isFetching" :message="'Searching'" />
<slot v-else />
@@ -48,37 +48,22 @@ export default {
<style scoped lang="scss">
.result-section {
margin: var(--space-small) 0;
@apply my-2 mx-0;
}
.search-list {
list-style: none;
margin: 0;
padding: var(--spacing-normal) 0;
@apply m-0 py-4 px-0 list-none;
}
.header {
position: sticky;
top: 0;
padding: var(--space-small);
z-index: 50;
background: var(--white);
margin-bottom: var(--space-micro);
@apply sticky top-0 p-2 z-50 bg-white dark:bg-slate-900 mb-0.5;
}
.empty {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-medium) var(--space-normal);
margin: var(--space-small);
background: var(--s-25);
border-radius: var(--border-radius-medium);
@apply flex items-center justify-center py-6 px-4 m-2 bg-slate-25 dark:bg-slate-800 rounded-md;
.icon {
color: var(--s-500);
@apply text-slate-500 dark:text-slate-300;
}
.empty-state__text {
text-align: center;
color: var(--s-500);
margin: 0 var(--space-small);
@apply text-slate-500 dark:text-slate-300 text-center my-0 mx-2;
}
}
</style>

3
app/javascript/dashboard/modules/search/components/SearchTabs.vue
View File

@@ -45,7 +45,6 @@ export default {
</script>
<style lang="scss" scoped>
.tab-container {
margin-top: var(--space-smaller);
border-bottom: 1px solid var(--s-100);
@apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
}
</style>

38
app/javascript/dashboard/modules/search/components/SearchView.vue
View File

@@ -212,50 +212,26 @@ export default {
<style lang="scss" scoped>
.search-page {
display: flex;
flex-direction: column;
width: 100%;
@apply flex flex-col w-full bg-white dark:bg-slate-900;
}
.page-header {
display: flex;
padding: var(--space-normal);
@apply flex p-4;
}
.search-root {
margin: 0 auto;
max-width: 45rem;
min-height: 20rem;
width: 100%;
height: 100%;
padding: var(--space-normal);
display: flex;
position: relative;
flex-direction: column;
background: white;
margin-top: var(--space-medium);
@apply flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-white dark:bg-slate-900;
.search-results {
flex-grow: 1;
height: 100%;
overflow-y: auto;
padding: 0 var(--space-small);
@apply flex-grow h-full overflow-y-auto py-0 px-2;
}
}
.empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-medium) var(--space-normal);
border-radius: var(--border-radius-medium);
margin-top: var(--space-large);
@apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
.icon {
color: var(--s-500);
@apply text-slate-500 dark:text-slate-400;
}
.empty-state__text {
text-align: center;
color: var(--s-500);
margin: var(--space-small);
@apply text-center text-slate-500 dark:text-slate-400 m-2;
}
}
</style>