From 1b1df955734cfb5f7f2ec78a2435defe895b909e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C4=B0pek?= Date: Sat, 11 Oct 2025 23:15:52 +0300 Subject: [PATCH] style: update overlay component styles for improved layout and visual consistency --- client/app/globals.css | 108 ++++++++++++++++++++---------------- client/app/overlay/page.tsx | 4 -- 2 files changed, 61 insertions(+), 51 deletions(-) diff --git a/client/app/globals.css b/client/app/globals.css index 1dd8c70..6119ac0 100644 --- a/client/app/globals.css +++ b/client/app/globals.css @@ -965,11 +965,11 @@ main { .overlay__card { background: #1f1f1f; border: 1px solid #3a3a3a; - border-radius: 16px; - padding: 1rem 1.5rem; + border-radius: 12px; + padding: 0; display: flex; flex-direction: column; - gap: 0.75rem; + gap: 0; width: min(100% - 2rem, 600px); max-width: 95vw; animation: fadeIn 0.4s ease-out; @@ -983,37 +983,45 @@ main { .overlay__header { display: flex; - gap: 0.75rem; + gap: 0.625rem; align-items: center; + padding: 0.75rem 1rem; + background: rgba(255, 255, 255, 0.03); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .overlay__avatar { - width: 40px; - height: 40px; + width: 36px; + height: 36px; border-radius: 50%; object-fit: cover; - border: 2px solid #3a3a3a; + border: 2px solid rgba(255, 255, 255, 0.1); + flex-shrink: 0; } .overlay__authorLine { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.375rem; + flex-wrap: wrap; + flex: 1; + min-width: 0; } .overlay__author { - font-size: 1rem; + font-size: 0.95rem; font-weight: 600; color: #e5e7eb; + margin-right: 0.25rem; } .overlay__badge { - font-size: 0.9rem; + font-size: 0.75rem; } .overlay__badge--image { - width: 20px; - height: 20px; + width: 16px; + height: 16px; border-radius: 2px; } @@ -1149,49 +1157,50 @@ main { } .overlay__superchat-header { - padding: 1rem 1.5rem; - border-radius: 12px 12px 0 0; + padding: 0.875rem 1rem; color: #fff; display: flex; align-items: center; - gap: 0.5rem; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + gap: 0.625rem; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .overlay__superchat-avatar { - width: 48px; - height: 48px; + width: 40px; + height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); + flex-shrink: 0; } .overlay__superchat-name { - font-size: 1.6rem; + font-size: 1.35rem; font-weight: 700; } .overlay__superchat-separator { - font-size: 1.4rem; + font-size: 1.15rem; font-weight: 600; - opacity: 0.9; + opacity: 0.85; + margin: 0 0.125rem; } .overlay__superchat-amount { - font-size: 1.6rem; + font-size: 1.35rem; font-weight: 700; } .overlay__superchat-text { - padding: 1rem 1.5rem; - font-size: 1.1rem; - line-height: 1.6; + padding: 0.75rem 1rem; + font-size: 1.05rem; + line-height: 1.4; color: #e5e7eb; font-weight: 400; text-align: left; word-break: break-word; - background: rgba(0, 0, 0, 0.3); - border-radius: 0 0 12px 12px; + background: rgba(0, 0, 0, 0.25); + border-top: 1px solid rgba(0, 0, 0, 0.2); margin: 0; } @@ -1200,72 +1209,77 @@ main { } .overlay__membership-header { - padding: 1rem 1.5rem; - border-radius: 12px 12px 0 0; + padding: 0.875rem 1rem; background: linear-gradient(135deg, #10b981, #059669); color: #fff; display: flex; align-items: center; - gap: 0.5rem; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); + gap: 0.625rem; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .overlay__membership-avatar { - width: 48px; - height: 48px; + width: 40px; + height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); + flex-shrink: 0; } .overlay__membership-info { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.375rem; flex-wrap: wrap; + flex: 1; + min-width: 0; } .overlay__membership-name { - font-size: 1.6rem; + font-size: 1.35rem; font-weight: 700; } .overlay__membership-separator { - font-size: 1.4rem; + font-size: 1.15rem; font-weight: 600; - opacity: 0.9; + opacity: 0.85; + margin: 0 0.125rem; } .overlay__membership-level { - font-size: 1.6rem; + font-size: 1.35rem; font-weight: 700; } .overlay__membership-text { - padding: 1rem 1.5rem; - font-size: 1.1rem; - line-height: 1.6; + padding: 0.75rem 1rem; + font-size: 1.05rem; + line-height: 1.4; color: #e5e7eb; font-weight: 400; text-align: left; word-break: break-word; - background: rgba(0, 0, 0, 0.3); - border-radius: 0 0 12px 12px; + background: rgba(0, 0, 0, 0.25); + border-top: 1px solid rgba(0, 0, 0, 0.2); margin: 0; } .overlay__text { - font-size: 1.1rem; - line-height: 1.5; + font-size: 1.05rem; + line-height: 1.4; color: #d1d5db; font-weight: 400; text-align: left; word-break: break-word; + padding: 0.75rem 1rem; + margin: 0; } .overlay__timestamp { - font-size: 0.8rem; - color: rgba(255, 255, 255, 0.7); + font-size: 0.7rem; + color: rgba(255, 255, 255, 0.5); font-weight: 400; margin-left: auto; white-space: nowrap; diff --git a/client/app/overlay/page.tsx b/client/app/overlay/page.tsx index fb27a98..3c0c516 100644 --- a/client/app/overlay/page.tsx +++ b/client/app/overlay/page.tsx @@ -2,8 +2,6 @@ import { useEffect, useState, useRef } from 'react'; import type { ChatMessage } from '@shared/chat'; -import { useTimezone } from '../../lib/TimezoneContext'; -import { formatTimestamp } from '../../lib/timezone'; import { proxyImageUrl } from '../../lib/imageProxy'; const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL ?? 'http://localhost:4100'; @@ -17,7 +15,6 @@ export default function OverlayPage() { const [connected, setConnected] = useState(false); const [fadingOut, setFadingOut] = useState(false); const connectionRef = useRef(null); - const { timezone } = useTimezone(); useEffect(() => { // Prevent multiple connections @@ -147,7 +144,6 @@ export default function OverlayPage() { ) ))} -