fix tailwind colors; gradients work now!
This commit is contained in:
parent
e94e20db08
commit
6283c76861
8 changed files with 282 additions and 145 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
|
|
@ -70,108 +71,108 @@
|
|||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-background {
|
||||
background-color: hsl(var(--background));
|
||||
background-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
.bg-foreground {
|
||||
background-color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--foreground) / <alpha-value>);
|
||||
}
|
||||
.bg-card {
|
||||
background-color: hsl(var(--card));
|
||||
background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-card-foreground {
|
||||
background-color: hsl(var(--card-foreground));
|
||||
background-color: hsl(var(--card-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-popover {
|
||||
background-color: hsl(var(--popover));
|
||||
background-color: hsl(var(--popover) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-popover-foreground {
|
||||
background-color: hsl(var(--popover-foreground));
|
||||
background-color: hsl(var(--popover-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: hsl(var(--primary));
|
||||
background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-primary-foreground {
|
||||
background-color: hsl(var(--primary-foreground));
|
||||
background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: hsl(var(--secondary));
|
||||
background-color: hsl(var(--secondary) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-secondary-foreground {
|
||||
background-color: hsl(var(--secondary-foreground));
|
||||
background-color: hsl(var(--secondary-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-muted {
|
||||
background-color: hsl(var(--muted));
|
||||
background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-muted-foreground {
|
||||
background-color: hsl(var(--muted-foreground));
|
||||
background-color: hsl(var(--muted-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: hsl(var(--accent));
|
||||
background-color: hsl(var(--accent) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-accent-foreground {
|
||||
background-color: hsl(var(--accent-foreground));
|
||||
background-color: hsl(var(--accent-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-destructive {
|
||||
background-color: hsl(var(--destructive));
|
||||
background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-destructive-foreground {
|
||||
background-color: hsl(var(--destructive-foreground));
|
||||
background-color: hsl(var(--destructive-foreground) / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.text-background {
|
||||
color: hsl(var(--background));
|
||||
color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
.text-foreground {
|
||||
color: hsl(var(--foreground));
|
||||
color: hsl(var(--foreground) / <alpha-value>);
|
||||
}
|
||||
.text-card {
|
||||
color: hsl(var(--card));
|
||||
color: hsl(var(--card) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-card-foreground {
|
||||
color: hsl(var(--card-foreground));
|
||||
color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-popover {
|
||||
color: hsl(var(--popover));
|
||||
color: hsl(var(--popover) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-popover-foreground {
|
||||
color: hsl(var(--popover-foreground));
|
||||
color: hsl(var(--popover-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-primary {
|
||||
color: hsl(var(--primary));
|
||||
color: hsl(var(--primary) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-primary-foreground {
|
||||
color: hsl(var(--primary-foreground));
|
||||
color: hsl(var(--primary-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-secondary {
|
||||
color: hsl(var(--secondary));
|
||||
color: hsl(var(--secondary) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-secondary-foreground {
|
||||
color: hsl(var(--secondary-foreground));
|
||||
color: hsl(var(--secondary-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-muted {
|
||||
color: hsl(var(--muted));
|
||||
color: hsl(var(--muted) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-muted-foreground {
|
||||
color: hsl(var(--muted-foreground));
|
||||
color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-accent {
|
||||
color: hsl(var(--accent));
|
||||
color: hsl(var(--accent) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-accent-foreground {
|
||||
color: hsl(var(--accent-foreground));
|
||||
color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-destructive {
|
||||
color: hsl(var(--destructive));
|
||||
color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-destructive-foreground {
|
||||
color: hsl(var(--destructive-foreground));
|
||||
color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
|
|
@ -180,3 +181,29 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for ring colors */
|
||||
@layer utilities {
|
||||
.ring-border {
|
||||
--tw-ring-color: hsl(var(--border) / <alpha-value>);
|
||||
}
|
||||
.ring-primary {
|
||||
--tw-ring-color: hsl(var(--primary) / <alpha-value>);
|
||||
}
|
||||
.ring-background {
|
||||
--tw-ring-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for border colors */
|
||||
@layer utilities {
|
||||
.box-border {
|
||||
border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.border-primary {
|
||||
border-color: hsl(var(--primary) / <alpha-value>);
|
||||
}
|
||||
.border-background {
|
||||
border-color: hsl(var(--background) / <alpha-value>);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -126,25 +126,25 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
|
||||
<template>
|
||||
<Card
|
||||
class="flex flex-col h-full 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-card to-background border-border 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">
|
||||
class="flex-shrink-0 flex flex-row items-center justify-between px-6 py-4 border-b border-border/50 bg-background/95 backdrop-blur-md relative z-50">
|
||||
<!-- Left side with avatar and name -->
|
||||
<div class="flex items-center gap-5 flex-shrink-0">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute -inset-0.5 bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
|
||||
class="absolute -inset-0.5 bg-gradient-to-r from-primary to-primary/50 rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200">
|
||||
</div>
|
||||
<Avatar
|
||||
class="relative h-11 w-11 bg-[#313244] ring-2 ring-[#cba6f7] ring-offset-2 ring-offset-[#181825] shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
|
||||
<AvatarFallback class="text-base font-semibold text-[#cdd6f4]">SA</AvatarFallback>
|
||||
class="relative h-11 w-11 bg-muted ring-2 ring-ring ring-offset-2 ring-offset-background shadow-md transition-all duration-200 hover:shadow-lg group-hover:scale-105">
|
||||
<AvatarFallback class="text-base font-semibold text-foreground">SA</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="font-semibold leading-none text-[#cdd6f4] tracking-tight">Support Agent</p>
|
||||
<p class="font-semibold leading-none text-foreground tracking-tight">Support Agent</p>
|
||||
<div class="flex items-center gap-1.5 mt-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-[#a6e3a1] animate-pulse"></div>
|
||||
<p class="text-sm text-[#a6adc8]">Online</p>
|
||||
<div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
|
||||
<p class="text-sm text-muted-foreground">Online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -152,7 +152,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
<!-- Center badge -->
|
||||
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<div
|
||||
class="text-xs font-medium text-[#cdd6f4] bg-gradient-to-r from-[#313244]/80 to-[#45475a]/80 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-[#45475a]/50">
|
||||
class="text-xs font-medium text-foreground bg-gradient-to-r from-muted/80 to-muted/50 backdrop-blur-sm px-4 py-2 rounded-full whitespace-nowrap shadow-lg border border-border/50">
|
||||
Customer Support
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,7 +167,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-[#1e1e2e] to-[#181825] overflow-hidden">
|
||||
<CardContent class="flex-1 min-h-0 p-0 bg-gradient-to-b from-card to-background overflow-hidden">
|
||||
<ScrollArea class="h-full" type="hover">
|
||||
<div class="flex flex-col gap-4 px-6 py-4">
|
||||
<template v-for="(group, groupIndex) in groupedMessages" :key="groupIndex">
|
||||
|
|
@ -176,7 +176,7 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
formatDate(group.timestamp) !== formatDate(groupedMessages[groupIndex - 1].timestamp)"
|
||||
class="flex justify-center my-8">
|
||||
<div
|
||||
class="px-4 py-1.5 rounded-full bg-gradient-to-r from-[#313244]/30 to-[#45475a]/30 text-xs font-medium text-[#a6adc8] shadow-lg backdrop-blur-sm border border-[#45475a]/20">
|
||||
class="px-4 py-1.5 rounded-full bg-gradient-to-r from-muted/30 to-muted/30 text-xs font-medium text-muted-foreground shadow-lg backdrop-blur-sm border border-border/20">
|
||||
{{ formatDate(group.timestamp) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,15 +203,15 @@ const getMessageGroupClasses = (sent: boolean) => {
|
|||
</CardContent>
|
||||
|
||||
<CardFooter
|
||||
class="flex-shrink-0 border-t border-[#313244]/50 bg-[#181825]/95 backdrop-blur-md p-4 shadow-xl">
|
||||
class="flex-shrink-0 border-t border-border/50 bg-background/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"
|
||||
class="flex-1 bg-card/90 border-border text-foreground placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus:border-ring transition-all duration-300 shadow-lg hover:border-border/60 rounded-xl h-11"
|
||||
autocomplete="off" />
|
||||
<Button type="submit" size="icon" :disabled="inputLength === 0 || isSending"
|
||||
class="bg-gradient-to-r from-[#cba6f7] to-[#89b4fa] text-[#11111b] hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
|
||||
class="bg-gradient-to-r from-primary to-primary/80 text-primary-foreground hover:brightness-110 active:brightness-90 transition-all duration-300 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:hover:shadow-lg h-11 w-11 rounded-xl flex-shrink-0">
|
||||
<Send v-if="!isSending" class="h-4 w-4" />
|
||||
<div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-[#11111b] border-r-transparent" />
|
||||
<div v-else class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-r-transparent" />
|
||||
<span class="sr-only">{{ isSending ? 'Sending...' : 'Send' }}</span>
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@ const copiedValues = ref(new Set<string>())
|
|||
|
||||
const bubbleClasses = computed(() => {
|
||||
return cn(
|
||||
'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm',
|
||||
'relative flex flex-col break-words min-w-[120px] max-w-[90%] md:max-w-[75%] text-sm shadow-sm',
|
||||
props.sent
|
||||
? 'bg-gradient-to-br from-purple-300 to-purple-400 text-gray-900'
|
||||
: 'bg-gradient-to-br from-gray-700 to-gray-800 text-gray-100',
|
||||
? 'bg-gradient-to-br from-primary/90 via-primary/80 to-primary/70 text-primary-foreground ring-1 ring-primary/10'
|
||||
: 'bg-gradient-to-br from-muted/90 via-muted/80 to-muted/70 text-muted-foreground ring-1 ring-border/10',
|
||||
// First message in group
|
||||
props.isFirst && (props.sent ? 'rounded-t-xl rounded-l-xl' : 'rounded-t-xl rounded-r-xl'),
|
||||
// Last message in group
|
||||
|
|
@ -60,7 +60,7 @@ const copyToClipboard = async (text: string) => {
|
|||
|
||||
const formatSpecialContent = (type: 'address' | 'txid' | 'invoice', value: string) => {
|
||||
const isCopied = copiedValues.value.has(value)
|
||||
const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-gray-800/20 hover:bg-gray-800/30 transition-colors'
|
||||
const buttonClasses = 'inline-flex items-center gap-1 px-2 h-[22px] text-[11px] font-medium rounded bg-background/10 hover:bg-background/20 transition-colors ring-1 ring-border/5'
|
||||
|
||||
if (type === 'txid') {
|
||||
return `<div class="font-mono text-[11px] leading-normal break-all opacity-90">${value}</div><div class="flex flex-wrap items-center gap-1.5 mt-1.5"><button data-copy="${value}" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${isCopied ? '<path d="M20 6 9 17l-5-5"/>' : '<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M15 2H9a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1Z"/>'}</svg>Copy txid</button><a href="https://mempool.space/tx/${value}" target="_blank" rel="noopener noreferrer" class="${buttonClasses}"><svg class="h-3 w-3 mr-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 7h10v10M7 17 17 7"/></svg>mempool.space</a></div>`
|
||||
|
|
@ -133,12 +133,15 @@ const handleClick = async (event: MouseEvent) => {
|
|||
<div :class="bubbleClasses" @click="handleClick">
|
||||
<div class="px-3 py-2 break-words whitespace-pre-wrap">
|
||||
<span v-if="isJson" class="font-mono text-[11px]">
|
||||
<pre class="select-text p-2 rounded">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
|
||||
<pre class="select-text p-2 rounded bg-background/10">{{ JSON.stringify(JSON.parse(content), null, 2) }}</pre>
|
||||
</span>
|
||||
<span v-else class="select-text text-[13px] leading-relaxed" v-html="formattedContent"></span>
|
||||
</div>
|
||||
<span v-if="showTimestamp && isLast" class="text-[10px] text-gray-500/80 px-3 pb-1 select-none"
|
||||
:class="{ 'self-end': sent }">{{ formatTime(timestamp) }}</span>
|
||||
<span v-if="showTimestamp && isLast"
|
||||
class="text-[10px] px-3 pb-1 select-none opacity-70"
|
||||
:class="{ 'self-end': sent }">
|
||||
{{ formatTime(timestamp) }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -164,7 +167,6 @@ const handleClick = async (event: MouseEvent) => {
|
|||
}
|
||||
|
||||
:deep(pre) {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
|
|
@ -181,11 +183,6 @@ const handleClick = async (event: MouseEvent) => {
|
|||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Dark theme adjustments for JSON */
|
||||
:deep(pre) {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Special content container styles */
|
||||
:deep(.special-content) {
|
||||
margin: 0.5rem 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue