padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui improvements

Browse source
This commit is contained in:
padreug 2025-02-11 15:37:15 +01:00
parent b230e22ed1
commit fcf052bf8a
3 changed files with 41 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/SupportChat.vue
View file

@ -133,7 +133,7 @@ const getMessageGroupClasses = (sent: boolean) => {
<template>
<Card
class="flex flex-col h-[calc(100vh-2rem)] bg-gradient-to-b from-[#1e1e2e] to-[#181825] border-[#313244] shadow-2xl overflow-hidden relative z-0">
class="flex flex-col h-full bg-gradient-to-b from-[#1e1e2e] to-[#181825] border-[#313244] shadow-2xl overflow-hidden relative z-0">
<CardHeader
class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md relative z-50">
<!-- Left side with avatar and name -->
@ -176,7 +176,7 @@ const getMessageGroupClasses = (sent: boolean) => {
<CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-[#1e1e2e] to-[#181825] overflow-hidden">
<ScrollArea class="h-full" type="hover">
<div class="flex flex-col gap-4 p-6">
<div class="flex flex-col gap-4 px-6 py-4">
<template v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
<!-- Date separator -->
<div v-if="groupIndex === 0 ||
@ -210,7 +210,7 @@ const getMessageGroupClasses = (sent: boolean) => {
</CardContent>
<CardFooter
class="flex-shrink-0 mt-auto border-t border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md p-6 shadow-xl">
class="flex-shrink-0 border-t border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md p-4 shadow-xl">
<form @submit="sendMessage" class="flex w-full items-center gap-4">
<Input id="message" v-model="input" placeholder="Type your message..."
class="flex-1 bg-[#1e1e2e]/90 border-[#313244] text-[#cdd6f4] placeholder:text-[#6c7086] focus:ring-2 focus:ring-[#cba6f7] focus:border-[#cba6f7] transition-all duration-300 shadow-lg hover:border-[#45475a] rounded-xl h-11"
@ -279,21 +279,15 @@ const getMessageGroupClasses = (sent: boolean) => {
}
:deep(.scrollarea-viewport) {
height: 100%;
height: 100% !important;
scroll-behavior: smooth;
}
:deep(.scrollarea-thumb-y) {
z-index: 30;
width: 5px !important;
background: #45475a !important;
border-radius: 9999px !important;
transition: all 0.2s ease-in-out;
}
:deep(.scrollarea-thumb-y:hover) {
background: #585b70 !important;
width: 6px !important;
/* Ensure the scroll area takes up all available space */
:deep(.scrollarea-viewport > div) {
height: 100%;
display: flex;
flex-direction: column;
}
/* Improved focus styles */