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

8
app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
View File

@@ -4,11 +4,11 @@
:header-title="$t('CUSTOM_ATTRIBUTES.ADD.TITLE')"
:header-content="$t('CUSTOM_ATTRIBUTES.ADD.DESC')"
/>
<form class="row" @submit.prevent="addCustomAttribute">
<form class="w-full" @submit.prevent="addCustomAttribute">
<woot-input
v-model.trim="attributeName"
:class="{ error: $v.attributeName.$error }"
class="medium-12 columns"
class="w-full"
:error="attributeNameError"
:label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
@@ -16,11 +16,11 @@
/>
<woot-input
v-model.trim="attributeValue"
class="medium-12 columns"
class="w-full"
:label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"
/>
<div class="modal-footer">
<div class="flex justify-end items-center py-2 px-0 gap-2">
<woot-button
:is-disabled="$v.attributeName.$invalid || isCreating"
:is-loading="isCreating"

34
app/javascript/dashboard/modules/contact/components/ContactDropdownItem.vue
View File

@@ -57,52 +57,36 @@ export default {
<style lang="scss" scoped>
.option-item--user {
display: flex;
align-items: center;
@apply flex items-center;
}
.user-identifier {
font-size: var(--font-size-mini);
margin-left: var(--space-micro);
color: var(--s-700);
@apply text-xs ml-0.5 text-slate-700 dark:text-slate-100;
}
.option__user-data {
display: flex;
flex-direction: column;
flex-grow: 1;
margin-left: var(--space-small);
margin-right: var(--space-small);
@apply flex flex-col flex-grow ml-2 mr-2;
}
.option__body,
.option__title {
display: flex;
align-items: center;
justify-content: flex-start;
line-height: 1.2;
font-size: var(--font-size-small);
@apply flex items-center justify-start leading-[1.2] text-sm;
}
.option__body .icon {
position: relative;
top: 1px;
margin-right: var(--space-micro);
@apply relative top-px mr-0.5 rtl:mr-0 rtl:ml-0.5;
}
.option__title {
font-weight: var(--font-weight-medium);
margin-bottom: var(--space-micro);
@apply text-slate-800 dark:text-slate-100 font-medium mb-0.5;
}
.option__body {
font-size: var(--font-size-mini);
color: var(--s-700);
@apply text-xs text-slate-700 dark:text-slate-100 mt-1;
}
.option__user-data .option__body {
> .phone-icon-wrap,
> .email-icon-wrap {
width: auto;
@apply w-auto flex items-center;
}
}
.merge-contact--icon {
margin-bottom: var(--space-minus-micro);
margin-right: var(--space-micro);
@apply -mb-0.5 mr-0.5;
}
</style>

52
app/javascript/dashboard/modules/contact/components/MergeContact.vue
View File

@@ -173,62 +173,52 @@ export default {
<style lang="scss" scoped>
.child-contact-wrap {
display: flex;
width: 100%;
@apply flex w-full;
}
.child-contact {
flex: 1 0 0;
min-width: 0;
@apply min-w-0 flex-grow flex-shrink-0;
}
.child-arrow {
width: var(--space-larger);
position: relative;
font-size: var(--font-size-default);
color: var(--color-border-dark);
@apply w-8 relative text-base text-slate-100 dark:text-slate-600;
}
.multiselect {
margin-bottom: var(--space-small);
@apply mb-2;
}
.child-contact {
margin-top: var(--space-smaller);
@apply mt-1;
}
.child-arrow::after {
content: '';
height: var(--space-larger);
width: 0;
left: var(--space-two);
position: absolute;
border-left: 1px solid var(--color-border-dark);
@apply content-[''] h-12 w-0 left-5 absolute border-l border-solid border-slate-100 dark:border-slate-600;
}
.child-arrow::before {
content: '';
height: 0;
width: var(--space-normal);
left: var(--space-two);
top: var(--space-larger);
position: absolute;
border-bottom: 1px solid var(--color-border-dark);
@apply content-[''] h-0 w-4 left-5 top-12 absolute border-b border-solid border-slate-100 dark:border-slate-600;
}
.up {
position: absolute;
top: var(--space-minus-smaller);
left: var(--space-slab);
@apply absolute -top-1 left-3;
}
.footer {
margin-top: var(--space-medium);
display: flex;
justify-content: flex-end;
@apply mt-6 flex justify-end;
}
/* TDOD: Clean errors in forms style */
.error .message {
margin-top: 0;
@apply mt-0;
}
.label--merge-warning {
margin-left: var(--space-small);
@apply ml-2;
}
::v-deep {
.multiselect {
@apply rounded-md;
}
.multiselect__tags {
@apply h-[52px];
}
}
</style>

17
app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
View File

@@ -234,34 +234,29 @@ export default {
</script>
<style lang="scss" scoped>
.menu-container {
padding: var(--space-smaller);
background-color: var(--white);
box-shadow: var(--shadow-context-menu);
border-radius: var(--border-radius-normal);
@apply p-1 bg-white dark:bg-slate-900 shadow-xl rounded-md;
hr:first-child {
display: none;
@apply hidden;
}
hr {
border-bottom: 1px solid var(--color-border-light);
margin: var(--space-smaller);
@apply m-1 border-b border-solid border-slate-50 dark:border-slate-800/50;
}
}
.context-menu--delete-modal {
::v-deep {
.modal-container {
max-width: 30rem;
@apply max-w-[30rem];
h2 {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-default);
@apply font-medium text-base;
}
}
.modal-footer {
padding: var(--space-normal) var(--space-large) var(--space-large);
@apply pt-4 pb-8 px-8;
}
}
}

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>