MythEclipse/GMW
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: update UI components for consistency and improved styling

Browse Source 
- Refactored ChannelCultureGlossary, LiveModerationFeed, TermGlossary, and Chatbot components to use new design tokens and styles.
- Updated button, badge, and section components to align with the new design system.
- Enhanced the visual hierarchy and accessibility of various UI elements.
- Improved responsiveness and hover states across components.
- Replaced hardcoded colors with design tokens for better maintainability.
This commit is contained in:
asepharyana committed 2026-08-26 14:57:08 +07:00
1 parent 7fc36170c8
commit a5f908dc06
18 files changed
+565 -535
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

services/frontend/src/app/(dashboard)/media/view.tsx
+16 -18
View File
@@ -98,26 +98,26 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<PageTransition>
<div ref={mediaRef} className="space-y-4">
{/* Precision Sub-Header Bar */}
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
<div className="flex items-center gap-2.5">
<span
className={`h-2 w-2 rounded-full ${
playing
? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
: "bg-[#8a8f98]"
? "bg-signal shadow-[0_0_8px_var(--color-signal-glow)]"
: "bg-ink-muted"
}`}
/>
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
<h1 className="font-mono text-xs font-semibold tracking-wide text-ink uppercase">
Audio Engine · Media Gateway
</h1>
</div>
<div className="flex items-center gap-2 font-mono text-[11px]">
<span className="text-[#8a8f98]">ENGINE:</span>
<span className="text-ink-muted">ENGINE:</span>
<span
className={`rounded px-1.5 py-0.5 font-medium border ${
playing
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
? "border-signal/30 bg-signal/10 text-signal"
: "border-hairline bg-surface-2 text-ink-muted"
}`}
>
{playing ? "STREAMING" : "IDLE"}
@@ -130,16 +130,16 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
<GlassPanel className="p-5">
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3.5">
<div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
<div className="flex size-11 items-center justify-center rounded-[8px] border border-hairline bg-surface-2 text-signal">
<Disc
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
className={`size-6 ${playing ? "animate-spin-disc text-signal" : "text-ink-muted"}`}
/>
</div>
<div>
<div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
<div className="text-sm font-semibold tracking-tight text-ink">
{current?.title ?? "No Active Media Stream"}
</div>
<div className="font-mono text-[11px] text-[#8a8f98]">
<div className="font-mono text-[11px] text-ink-muted">
{current
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
: "Queue a track via URL below"}
@@ -153,9 +153,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
variant="ghost"
size="sm"
onClick={() => loop.mutateAsync()}
className={
media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""
}
className={media?.loop ? "border-signal text-signal" : ""}
>
<Repeat className="size-3.5" />
</Button>
@@ -177,7 +175,7 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
</div>
{/* Quick URL Input */}
<div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
<div className="mt-4 flex gap-2 border-t border-hairline pt-4">
<Input
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
value={url}
@@ -211,19 +209,19 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
/>
<div className="mt-3 space-y-2">
{queueList.length === 0 ? (
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
<div className="py-8 text-center font-mono text-xs text-ink-muted">
QUEUE EMPTY
</div>
) : (
queueList.map((item, idx) => (
<div
key={item.id ?? idx}
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
className="flex items-center justify-between rounded-[6px] border border-hairline bg-surface-2 p-2.5 text-xs text-ink-soft"
>
<span className="truncate pr-2 font-medium">
{item.title}
</span>
<span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
<span className="font-mono text-[10px] text-ink-muted shrink-0">
{formatDuration(item.durationMs ?? 0)}
</span>
</div>