senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): migrate arbitrary values to layout tokens

Browse source 
- AstralBackground: w-[60%] h-[60%] → w-3/5 h-3/5
- ChatInput/ChatMessage: h-[28rem]/h-[25rem] → h-96 max-h-layout-list
- ChatMessage: max-w-[80%] → max-w-4/5
This commit is contained in:
senke 2026-02-17 17:05:08 +01:00
parent 53ab42ffba
commit 774f282f11
3 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/web/src/components/ui/AstralBackground.tsx
View file

@ -120,9 +120,9 @@ export function AstralBackground() {
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/20 dark:to-black/80" />
{/* Nebulas - Optimized opacity for themes */}
<div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] rounded-full bg-cyan/5 dark:bg-cyan/5 blur-[120px] animate-pulse" />
<div className="absolute top-[-20%] left-[-10%] w-3/5 h-3/5 rounded-full bg-cyan/5 dark:bg-cyan/5 blur-[120px] animate-pulse" />
<div
className="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] rounded-full bg-magenta/5 dark:bg-magenta/5 blur-[120px] animate-pulse"
className="absolute bottom-[-20%] right-[-10%] w-3/5 h-3/5 rounded-full bg-magenta/5 dark:bg-magenta/5 blur-[120px] animate-pulse"
style={{ animationDelay: '2s' }}
/>

2
apps/web/src/features/chat/components/ChatInput.tsx
View file

@ -192,7 +192,7 @@ export const ChatInput: React.FC = () => {
<div className="relative shadow-2xl rounded-xl overflow-hidden border border-white/10">
<Suspense
fallback={
<div className="w-[21.875rem] h-[28rem] bg-card flex items-center justify-center">
<div className="w-[21.875rem] h-96 max-h-layout-list bg-card flex items-center justify-center">
<LoadingSpinner />
</div>
}

4
apps/web/src/features/chat/components/ChatMessage.tsx
View file

@ -42,7 +42,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
return (
<div
className={cn(
'group flex flex-col gap-1 max-w-[80%] mb-4 relative',
'group flex flex-col gap-1 max-w-4/5 mb-4 relative',
isMe ? 'ml-auto items-end' : 'mr-auto items-start',
)}
>
@ -155,7 +155,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
<div className="relative shadow-2xl rounded-xl overflow-hidden border border-white/10 animate-scaleIn">
<Suspense
fallback={
<div className="w-[18.75rem] h-[25rem] bg-card flex items-center justify-center">
<div className="w-[18.75rem] h-96 max-h-layout-list bg-card flex items-center justify-center">
<LoadingSpinner size="sm" />
</div>
}