scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-10-29 18:22:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Update the design for the reply box banner UI (#10678)

Browse Source
This commit is contained in:
Shivam Mishra
2025-01-14 02:42:43 +05:30
committed by GitHub
parent c75ed1ef69
commit 35ca67c9ba
3 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/dashboard/components-next/message/MessageError.vue
View File

@@ -1,11 +1,15 @@
<script setup>
import Icon from 'next/icon/Icon.vue';
import { useI18n } from 'vue-i18n';
import { useMessageContext } from './provider.js';
import { ORIENTATION } from './constants';
defineProps({
error: { type: String, required: true },
});
const { orientation } = useMessageContext();
const { t } = useI18n();
</script>
@@ -22,7 +26,11 @@ const { t } = useI18n();
/>
</div>
<div
class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 right-0 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
class="absolute bg-n-alpha-3 px-4 py-3 border rounded-xl border-n-strong text-n-slate-12 bottom-6 w-52 text-xs backdrop-blur-[100px] shadow-[0px_0px_24px_0px_rgba(0,0,0,0.12)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all"
:class="{
'left-0': orientation === ORIENTATION.LEFT,
'right-0': orientation === ORIENTATION.RIGHT,
}"
>
{{ error }}
</div>

2
app/javascript/dashboard/components/ui/Banner.vue
View File

@@ -116,7 +116,7 @@ export default {
}
&.secondary {
@apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
@apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
a {
@apply text-slate-800 dark:text-slate-800;
}

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

@@ -1071,17 +1071,17 @@ export default {
</script>
<template>
<Banner
v-if="showSelfAssignBanner"
action-button-variant="clear"
color-scheme="secondary"
class="banner--self-assign mx-2 mb-2 rounded-lg"
:banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
has-action-button
:action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@primary-action="onClickSelfAssign"
/>
<div class="reply-box" :class="replyBoxClass">
<Banner
v-if="showSelfAssignBanner"
action-button-variant="clear"
color-scheme="secondary"
class="banner--self-assign"
:banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
has-action-button
:action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@primary-action="onClickSelfAssign"
/>
<ReplyTopPanel
:mode="replyType"
:is-message-length-reaching-threshold="isMessageLengthReachingThreshold"