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

feat: update colors for v4 (#10660)

Browse Source 
Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Shivam Mishra
2025-01-15 17:13:03 +05:30
committed by GitHub
parent a4c0c76fa5
commit 7fd8b4d03a
79 changed files with 660 additions and 795 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,7 @@ import SearchTabs from './SearchTabs.vue';
import SearchResultConversationsList from './SearchResultConversationsList.vue';
import SearchResultMessagesList from './SearchResultMessagesList.vue';
import SearchResultContactsList from './SearchResultContactsList.vue';
import ButtonV4 from 'dashboard/components-next/button/Button.vue';
import { useTrack } from 'dashboard/composables';
import Policy from 'dashboard/components/policy.vue';
import {
@@ -27,6 +28,7 @@ export default {
SearchResultConversationsList,
SearchResultMessagesList,
Policy,
ButtonV4,
},
data() {
return {
@@ -201,19 +203,20 @@ export default {
</script>
<template>
<div class="search-page">
<div class="page-header">
<woot-button
icon="chevron-left"
variant="smooth"
size="small "
class="back-button"
<div class="flex flex-col w-full bg-n-background">
<div class="flex p-4">
<ButtonV4
:label="$t('GENERAL_SETTINGS.BACK')"
icon="i-lucide-chevron-left"
faded
primary
sm
@click="onBack"
>
{{ $t('GENERAL_SETTINGS.BACK') }}
</woot-button>
/>
</div>
<section class="search-root">
<section
class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
>
<header>
<SearchHeader @search="onSearch" />
<SearchTabs
@@ -223,7 +226,7 @@ export default {
@tab-change="tab => (selectedTab = tab)"
/>
</header>
<div class="search-results">
<div class="flex-grow h-full px-2 py-0 overflow-y-auto">
<div v-if="showResultsSection">
<Policy :permissions="[...rolePermissions, contactPermissions]">
<SearchResultContactsList
@@ -259,17 +262,23 @@ export default {
/>
</Policy>
</div>
<div v-else-if="showEmptySearchResults" class="empty">
<fluent-icon icon="info" size="16px" class="icon" />
<p class="empty-state__text">
<div
v-else-if="showEmptySearchResults"
class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
>
<fluent-icon icon="info" size="16px" class="text-n-slate-11" />
<p class="m-2 text-center text-n-slate-11">
{{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
</p>
</div>
<div v-else class="text-center empty">
<div
v-else
class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
>
<p class="text-center margin-bottom-0">
<fluent-icon icon="search" size="24px" class="icon" />
<fluent-icon icon="search" size="24px" class="text-n-slate-11" />
</p>
<p class="empty-state__text">
<p class="m-2 text-center text-n-slate-11">
{{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
</p>
</div>
@@ -277,29 +286,3 @@ export default {
</section>
</div>
</template>
<style lang="scss" scoped>
.search-page {
@apply flex flex-col w-full bg-white dark:bg-slate-900;
}
.page-header {
@apply flex p-4;
}
.search-root {
@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 {
@apply flex-grow h-full overflow-y-auto py-0 px-2;
}
}
.empty {
@apply flex flex-col items-center justify-center py-6 px-4 rounded-md mt-8;
.icon {
@apply text-slate-500 dark:text-slate-400;
}
.empty-state__text {
@apply text-center text-slate-500 dark:text-slate-400 m-2;
}
}
</style>