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

feat(ui): overhaul frontend with IMPHNEN visual identity

Browse Source 
- Update CSS foundation: HSL→oklch color tokens, Poppins font, new utilities
- Replace Three.js sakura particles with CSS glow orbs
- Rebrand Header with IMPHNEN logo and gradient text
- Update all UI components (Button, Card, Badge, Input, Select, Tabs, Toast)
- Apply IMPHNEN design patterns (glass, gradient, grid) to layout
- Remove all hardcoded #7EC8E3/#FFB7C5/#FCA5A5 references
- Standardize rounded-xl across all components
- Replace emoji toasts with Lucide icons

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
MythEclipse
2026-06-12 23:00:52 +07:00
co-authored by Claude
parent 7f3eb7b9ac
commit 5c00c9f60b
34 changed files with 341 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/widgets/DashboardLayout.tsx
+5 -1
View File
@@ -31,8 +31,12 @@ export function DashboardLayout({
}: DashboardLayoutProps) {
return (
<div className="relative min-h-screen bg-background text-foreground">
{/* Sakura particle layer */}
{/* Background layers */}
<ParticleBackground />
<div
className="fixed inset-0 pointer-events-none grid-pattern opacity-[0.03]"
aria-hidden="true"
/>
<div className="relative flex min-h-screen">
<Sidebar
services/frontend/src/widgets/Header.tsx
+17 -14
View File
@@ -8,7 +8,7 @@ import { Badge } from "../shared/ui";
import type { WsStatus } from "../shared/ws/socket";
const titles: Record<DashboardTab, string> = {
live: "Voice, Media & Recordings",
live: "Voice & Media",
messages: "Messages & Moderation",
tuner: "Prompt Tuner",
};
@@ -51,7 +51,7 @@ function WsIndicator({ status }: { status: WsStatus }) {
/** Voice status indicator dot */
function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
const isConnected = voiceStatus.connected;
const dot = isConnected ? "bg-[#7EC8E3]" : "bg-gray-300";
const dot = isConnected ? "bg-primary" : "bg-gray-300";
const label = isConnected
? voiceStatus.activeChannelName || "connected"
: "idle";
@@ -65,9 +65,9 @@ function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
return (
<header className="sticky top-0 z-10 border-b border-[#7EC8E3]/20 bg-white/70 px-4 py-4 backdrop-blur-md md:px-8">
<header className="sticky top-0 z-10 border-b border-border/50 bg-background/70 px-4 py-4 backdrop-blur-sm md:px-8">
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
{/* Left: animated tab title + subtitle */}
{/* Left: IMPHNEN brand + tab title */}
<motion.div
key={activeTab}
variants={fadeSlideUp}
@@ -75,16 +75,21 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
animate="animate"
className="flex items-center gap-3"
>
<div>
<div className="flex items-center gap-3">
<img
src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
alt="IMPHNEN"
className="h-7 w-7"
/>
<h1 className="text-xl font-bold tracking-tight">
<span className="text-[#7EC8E3]">GMW</span>
<span className="gradient-text">IMPHNEN</span>
<span className="mx-2 text-muted-foreground">·</span>
{titles[activeTab]}
</h1>
<p className="text-sm text-muted-foreground">
{subtitles[activeTab]}
</p>
</div>
<p className="text-sm text-muted-foreground hidden md:block">
{subtitles[activeTab]}
</p>
</motion.div>
{/* Right: status badges */}
@@ -92,7 +97,7 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
{/* WS Badge */}
<Badge
variant="outline"
className="border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs text-muted-foreground"
className="border-border bg-card/50 px-3 py-1.5 text-xs text-muted-foreground"
>
{wsStatus === "connected" ? (
<Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
@@ -106,10 +111,8 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
<Badge
variant="outline"
className={cn(
"border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs",
voiceStatus.connected
? "text-[#7EC8E3]"
: "text-muted-foreground",
"border-border bg-card/50 px-3 py-1.5 text-xs",
voiceStatus.connected ? "text-primary" : "text-muted-foreground",
)}
>
<VoiceIndicator voiceStatus={voiceStatus} />
services/frontend/src/widgets/Sidebar.tsx
+6 -13
View File
@@ -45,7 +45,7 @@ export function Sidebar({
<>
<motion.nav
className={cn(
"relative hidden shrink-0 flex-col overflow-visible border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
"relative hidden shrink-0 flex-col overflow-visible border-r border-border/50 bg-background/70 backdrop-blur-sm transition-all duration-300 md:flex",
collapsed ? "w-16" : "w-64",
)}
layout
@@ -60,7 +60,7 @@ export function Sidebar({
>
<img
src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
alt="GMW"
alt="IMPHNEN"
className="h-8 w-8 rounded-xl"
/>
@@ -88,16 +88,9 @@ export function Sidebar({
"group relative flex items-center rounded-xl p-2.5 text-sm font-medium transition-all duration-200 ease-out",
collapsed ? "justify-center" : "gap-3",
isActive
? "bg-primary-soft text-primary ring-2 ring-primary/20"
: "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
? "bg-primary/10 text-primary ring-1 ring-primary/20"
: "text-muted-foreground hover:bg-primary/5 hover:text-primary/70",
)}
onMouseEnter={(e) => {
e.currentTarget.style.transform =
"translateX(2px) scale(1.1)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = "translateX(0) scale(1)";
}}
>
<Icon className="h-4 w-4 shrink-0" />
{!collapsed && <span>{item.label}</span>}
@@ -114,7 +107,7 @@ export function Sidebar({
<button
type="button"
onClick={() => mascotChat.setIsOpen(!mascotChat.isOpen)}
className="relative z-50 rounded-2xl p-1 transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
className="relative z-50 rounded-xl p-1 transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/40"
title="Chat dengan mascot"
>
<MascotImage size="sm" />
@@ -125,7 +118,7 @@ export function Sidebar({
isOpen={mascotChat.isOpen}
onClose={() => mascotChat.setIsOpen(false)}
onSendMessage={mascotChat.handleSendMessage}
mascotName="Discord Watcher"
mascotName="IMPHNEN Mascot"
className="fixed bottom-[170px] left-[80px] z-[9999]"
/>
</>
services/frontend/src/widgets/mascot/MascotChatbot.tsx
+6 -6
View File
@@ -106,7 +106,7 @@ export function MascotChatbot({
animate={{ opacity: 1, y: 0, scale: 1 }}
exit={{ opacity: 0, y: 20, scale: 0.95 }}
className={cn(
"w-96 bg-white rounded-2xl shadow-2xl border border-primary/10 overflow-hidden flex flex-col",
"w-96 bg-card rounded-xl shadow-2xl border border-border overflow-hidden flex flex-col",
isMinimized ? "h-16" : "h-[520px]",
className,
)}
@@ -155,7 +155,7 @@ export function MascotChatbot({
{/* Messages */}
{!isMinimized && (
<>
<div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gradient-to-b from-white to-primary/5">
<div className="flex-1 overflow-y-auto p-4 space-y-3 bg-card">
{messages.map((message) => (
<motion.div
key={message.id}
@@ -177,7 +177,7 @@ export function MascotChatbot({
className={cn(
"max-w-xs px-3 py-2 rounded-xl text-sm break-words",
message.role === "user"
? "bg-primary text-white rounded-br-none"
? "bg-primary text-primary-foreground rounded-br-none"
: "bg-muted text-foreground rounded-bl-none",
)}
>
@@ -231,7 +231,7 @@ export function MascotChatbot({
{/* Input */}
<form
onSubmit={handleSendMessage}
className="border-t border-primary/10 p-3 bg-white"
className="border-t border-border p-3 bg-card"
>
<div className="flex gap-2">
<input
@@ -240,14 +240,14 @@ export function MascotChatbot({
onChange={(e) => setInput(e.target.value)}
placeholder="Tanya mascot..."
disabled={loading}
className="flex-1 px-3 py-2 rounded-lg border border-primary/20 focus:outline-none focus:border-primary/50 text-sm disabled:opacity-50"
className="flex-1 px-3 py-2 rounded-lg border border-input bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm disabled:opacity-50"
/>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
type="submit"
disabled={loading || !input.trim()}
className="p-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="p-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<Send className="h-4 w-4" />
</motion.button>
services/frontend/src/widgets/mascot/MascotImage.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export function MascotImage({
>
<div className="relative">
{/* Chat bubble */}
<div className="bg-gradient-to-br from-primary/90 to-primary/80 text-white rounded-2xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/50">
<div className="bg-primary/90 text-primary-foreground rounded-xl px-4 py-2.5 shadow-lg backdrop-blur-sm border border-primary/30">
<div className="flex items-start gap-2">
<MessageCircle className="h-4 w-4 shrink-0 mt-0.5 text-white/80" />
<p className="text-xs leading-relaxed font-medium line-clamp-3">
services/frontend/src/widgets/particles/ParticleBackground.tsx
+10 -167
View File
@@ -1,160 +1,4 @@
import { Sparkles } from "@react-three/drei";
import { Canvas, useFrame } from "@react-three/fiber";
import { useEffect, useMemo, useRef, useState } from "react";
// ─── Particle count by viewport ──────────────────────────────────────────────
function getPetalCount(width: number) {
if (width < 640) return 10;
if (width < 1024) return 20;
return 35;
}
function getSparkleCount(width: number) {
if (width < 640) return 15;
return 30;
}
// ─── Sakura petal mesh ───────────────────────────────────────────────────────
interface PetalData {
x: number;
y: number;
z: number;
rotSpeed: number;
driftX: number;
driftZ: number;
hue: number;
sat: number;
light: number;
scale: number;
}
function createPetals(count: number): PetalData[] {
return Array.from({ length: count }, () => ({
x: (Math.random() - 0.5) * 20,
y: Math.random() * 20 - 5,
z: (Math.random() - 0.5) * 10 - 2,
rotSpeed: (Math.random() - 0.5) * 2,
driftX: (Math.random() - 0.5) * 0.005,
driftZ: (Math.random() - 0.5) * 0.003,
hue: 340 + Math.random() * 30,
sat: 60 + Math.random() * 30,
light: 65 + Math.random() * 20,
scale: 0.08 + Math.random() * 0.08,
}));
}
function Petal({
data,
mouseRef,
}: {
data: PetalData;
mouseRef: React.RefObject<{ x: number; y: number } | null>;
}) {
const meshRef = useRef(null);
useFrame((_state, delta) => {
const mesh = meshRef.current as unknown as {
position: { x: number; y: number; z: number };
rotation: { z: number; x: number };
} | null;
if (!mesh) return;
// Slow drift downward
mesh.position.y -= delta * 0.3;
mesh.position.x += Math.sin(Date.now() * data.driftX) * 0.002;
mesh.position.z += Math.cos(Date.now() * data.driftZ) * 0.001;
mesh.rotation.z += delta * data.rotSpeed;
mesh.rotation.x += delta * data.rotSpeed * 0.3;
// Gentle mouse attraction
if (mouseRef.current) {
const dx = mouseRef.current.x * 3 - mesh.position.x;
const dy = mouseRef.current.y * 2 - mesh.position.y;
mesh.position.x += dx * 0.0001;
mesh.position.y += dy * 0.0001;
}
// Reset when out of view
if (mesh.position.y < -10) {
mesh.position.y = 8;
mesh.position.x = (Math.random() - 0.5) * 20;
mesh.position.z = (Math.random() - 0.5) * 10 - 2;
}
});
return (
<mesh
ref={meshRef}
position={[data.x, data.y, data.z]}
scale={[data.scale, data.scale, data.scale]}
>
<planeGeometry args={[1, 1]} />
<meshStandardMaterial
color={`hsl(${data.hue}, ${data.sat}%, ${data.light}%)`}
transparent
opacity={0.65}
side={2}
depthWrite={false}
/>
</mesh>
);
}
// ─── Scene ───────────────────────────────────────────────────────────────────
function ParticleScene() {
const mouseRef = useRef<{ x: number; y: number } | null>(null);
const [viewportWidth, setViewportWidth] = useState(
typeof window !== "undefined" ? window.innerWidth : 1024,
);
useEffect(() => {
const onMouse = (e: MouseEvent) => {
mouseRef.current = {
x: (e.clientX / window.innerWidth) * 2 - 1,
y: -(e.clientY / window.innerHeight) * 2 + 1,
};
};
window.addEventListener("mousemove", onMouse);
const onResize = () => setViewportWidth(window.innerWidth);
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("mousemove", onMouse);
window.removeEventListener("resize", onResize);
};
}, []);
const petalCount = getPetalCount(viewportWidth);
const sparkleCount = getSparkleCount(viewportWidth);
const petals = useMemo(() => createPetals(petalCount), [petalCount]);
return (
<>
<ambientLight intensity={0.6} />
<directionalLight position={[5, 5, 5]} intensity={0.3} />
{petals.map((data, i) => (
<Petal key={i} data={data} mouseRef={mouseRef} />
))}
<Sparkles
count={sparkleCount}
scale={12}
size={0.8}
speed={0.2}
color="#7EC8E3"
opacity={0.5}
/>
</>
);
}
// ─── Exported component ──────────────────────────────────────────────────────
import { useEffect, useState } from "react";
export function ParticleBackground() {
const [reducedMotion, setReducedMotion] = useState(false);
@@ -171,18 +15,17 @@ export function ParticleBackground() {
return (
<div
className="fixed inset-0 pointer-events-none"
className="fixed inset-0 pointer-events-none overflow-hidden"
aria-hidden="true"
style={{ zIndex: -1, isolation: "isolate" }}
style={{ zIndex: -1 }}
>
<Canvas
camera={{ position: [0, 0, 8], fov: 75 }}
dpr={[1, 2]}
gl={{ antialias: false, alpha: true }}
style={{ background: "transparent", width: "100%", height: "100%" }}
>
<ParticleScene />
</Canvas>
{/* Top-right glow orb */}
<div className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-primary/10 blur-3xl animate-glow-pulse" />
{/* Bottom-left glow orb */}
<div
className="absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full bg-blue-400/10 blur-3xl animate-glow-pulse"
style={{ animationDelay: "1.5s" }}
/>
</div>
);
}