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

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

@@ -50,14 +50,28 @@ export default {
</script>
<template>
<div class="input-container" :class="{ 'is-focused': isInputFocused }">
<div class="icon-container">
<fluent-icon icon="search" class="icon" aria-hidden="true" />
<div
class="input-container rounded-xl transition-[border-bottom] duration-[0.2s] ease-[ease-in-out] relative flex items-center py-2 px-4 h-14 gap-2 border border-solid"
:class="{
'border-n-brand': isInputFocused,
'border-n-weak': !isInputFocused,
}"
>
<div class="flex items-center">
<fluent-icon
icon="search"
class="icon"
aria-hidden="true"
:class="{
'text-n-blue-text': isInputFocused,
'text-n-slate-10': !isInputFocused,
}"
/>
</div>
<input
ref="searchInput"
type="search"
class="dark:bg-slate-900"
class="w-full m-0 bg-transparent border-transparent shadow-none text-n-slate-12 dark:text-n-slate-12 active:border-transparent active:shadow-none hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none"
:placeholder="$t('SEARCH.INPUT_PLACEHOLDER')"
:value="searchQuery"
@focus="onFocus"
@@ -68,37 +82,7 @@ export default {
:title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"
:show-close="false"
small
class="helper-label"
class="!m-0 whitespace-nowrap !bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong"
/>
</div>
</template>
<style lang="scss" scoped>
.input-container {
transition: border-bottom 0.2s ease-in-out;
@apply relative flex items-center py-2 px-4 h-14 gap-2 rounded-sm border border-solid border-slate-100 dark:border-slate-800;
input[type='search'] {
@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 {
@apply border-woot-100 dark:border-woot-600;
.icon {
color: var(--w-400);
@apply text-woot-400 dark:text-woot-500;
}
}
}
.icon-container {
@apply flex items-center;
.icon {
@apply text-slate-400;
}
}
.helper-label {
@apply m-0 whitespace-nowrap;
}
</style>