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

refactor: update component styles to use theme-aware colors and improve UI consistency

Browse Source
This commit is contained in:
asepharyana
2026-08-26 15:43:43 +07:00
parent a5f908dc06
commit 153e628aba
25 changed files with 141 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/app/(dashboard)/channels/view.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export function ChannelsView({
CHANNEL ROSTER · SIGNAL_MAP
</h1>
</div>
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
<div className="inline-flex items-center gap-1.5 rounded-md bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
<span className="text-ink-faint">NODES:</span>
<span className="font-bold text-signal">{cultures?.length ?? 0}</span>
</div>
services/frontend/src/app/(dashboard)/messages/view.tsx
+1 -1
View File
@@ -399,7 +399,7 @@ export function MessagesView({
<button
type="button"
onClick={loadOlder}
className="rounded-[5px] border border-hairline bg-surface-2 px-3 py-1 font-mono text-[10px] text-ink-muted transition-colors hover:bg-surface hover:text-ink"
className="rounded-md border border-hairline bg-surface-2 px-3 py-1 font-mono text-[10px] text-ink-muted transition-colors hover:bg-surface hover:text-ink"
>
↑ LOAD PREVIOUS BATCH
</button>
services/frontend/src/app/(dashboard)/recordings/view.tsx
+2 -2
View File
@@ -202,7 +202,7 @@ export function RecordingsView({
href={r.download_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 rounded-[5px] border border-hairline bg-surface-2 px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
className="inline-flex items-center gap-1 rounded-md border border-hairline bg-surface-2 px-2 py-1 font-mono text-[10px] text-ink-soft transition-colors hover:bg-surface hover:text-ink"
>
<Download className="size-3 text-signal" /> RAW
</a>
@@ -211,7 +211,7 @@ export function RecordingsView({
type="button"
onClick={() => onDelete(r.id)}
disabled={del.isPending}
className="inline-flex items-center gap-1 rounded-[5px] border border-vermilion/30 bg-vermilion/10 px-2 py-1 font-mono text-[10px] text-vermilion transition-colors hover:bg-vermilion/20"
className="inline-flex items-center gap-1 rounded-md border border-vermilion/30 bg-vermilion/10 px-2 py-1 font-mono text-[10px] text-vermilion transition-colors hover:bg-vermilion/20"
>
<Trash2 className="size-3" /> PURGE
</button>
services/frontend/src/app/globals.css
+92 -9
View File
@@ -166,14 +166,7 @@
border-color: var(--panel-border-hover);
}
.glass-2 {
background: var(--panel-bg-subtle);
border: 1px solid var(--panel-border);
border-radius: var(--radius-r);
}
/* HUD Tactical Card */
.linear-card,
.hud-card {
position: relative;
background: var(--panel-bg);
@@ -184,7 +177,6 @@
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.linear-card:hover,
.hud-card:hover {
border-color: var(--panel-border-hover);
transform: translateY(-1px);
@@ -263,14 +255,105 @@
100% { transform: scale(2.2); opacity: 0; }
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes eq {
0%, 100% { transform: scaleY(0.35); }
50% { transform: scaleY(1); }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scan {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
.animate-breathe { animation: breathe 2.5s ease-in-out infinite; }
.animate-spin-disc { animation: spin-disc 10s linear infinite; }
.animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
/* Skeleton shimmer — theme-aware base + moving highlight sheen. */
.animate-shimmer {
background-color: var(--panel-bg-subtle);
background-image: linear-gradient(
105deg,
transparent 40%,
color-mix(in oklab, var(--text-primary) 6%, transparent) 50%,
transparent 60%
);
background-size: 200% 100%;
animation: shimmer 1.6s ease-in-out infinite;
}
/* Live equalizer bars (mini-player / recording player). */
.animate-eq {
transform-origin: bottom;
animation: eq 0.9s ease-in-out infinite;
}
/* Entrance for popovers, toasts, mini-player. */
.animate-fade-up { animation: fade-up 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-toast-in { animation: toast-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
/* Sweeping glow line across a hero/placeholder panel. */
.scan-line {
position: absolute;
inset: 0;
height: 100%;
pointer-events: none;
background: linear-gradient(
180deg,
transparent,
var(--accent-signal-glow),
transparent
);
opacity: 0.5;
animation: scan 2.6s ease-in-out infinite;
}
/* Mobile nav hover/active sweep fill. */
.game-sweep {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: inherit;
pointer-events: none;
}
.game-sweep i {
position: absolute;
inset: 0;
background: var(--accent-signal-bg);
transform: translateY(100%);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.game-nav-item.is-active .game-sweep i,
.game-nav-item:hover .game-sweep i {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.animate-breathe,
.animate-spin-disc,
.animate-pulse-ring {
.animate-pulse-ring,
.animate-shimmer,
.animate-eq,
.animate-fade-up,
.animate-toast-in,
.scan-line {
animation: none !important;
}
*,