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

style(frontend): refactor UI components with rounded corners, light theme, and design polish

Browse Source
This commit is contained in:
MythEclipse
2026-06-03 03:12:14 +07:00
parent caee0c692a
commit e2003cd9f6
14 changed files with 182 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/shared/ui/MobileTabBar.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ interface MobileTabBarProps {
export function MobileTabBar({ activeTab, onTabChange }: MobileTabBarProps) {
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-border bg-background/90 backdrop-blur-xl md:hidden">
<nav className="fixed bottom-0 left-0 right-0 z-50 flex border-t border-primary/20 bg-white rounded-t-xl md:hidden">
{tabs.map(({ id, label, Icon }) => (
<button
key={id}
services/frontend/src/shared/ui/badge.tsx
+7 -6
View File
@@ -11,11 +11,12 @@ type BadgeVariant =
const variants: Record<BadgeVariant, string> = {
default: "border-transparent bg-primary text-primary-foreground",
secondary: "border-transparent bg-secondary text-secondary-foreground",
destructive: "border-transparent bg-destructive text-destructive-foreground",
outline: "text-foreground",
success: "border-transparent bg-emerald-500/15 text-emerald-300",
warning: "border-transparent bg-amber-500/15 text-amber-300",
secondary:
"border-transparent bg-muted text-muted-foreground",
destructive: "border-transparent bg-[#FCA5A5] text-red-800",
outline: "border-border text-foreground",
success: "border-transparent bg-[#BBF7D0] text-green-800",
warning: "border-transparent bg-[#FDE68A] text-amber-800",
};
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,7 +31,7 @@ export function Badge({
return (
<div
className={cn(
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors",
"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors",
variants[variant],
className,
)}
services/frontend/src/shared/ui/button.tsx
+9 -9
View File
@@ -11,19 +11,19 @@ type ButtonVariant =
type ButtonSize = "default" | "sm" | "lg" | "icon";
const variants: Record<ButtonVariant, string> = {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
secondary: "bg-[#FFB7C5] text-[#1a1a2e] hover:bg-[#FFB7C5]/80",
destructive: "bg-[#FCA5A5] text-[#1a1a2e] hover:bg-[#FCA5A5]/80",
outline:
"border border-border bg-background hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground",
"border border-border bg-white hover:bg-primary-soft",
ghost: "hover:bg-primary-soft",
};
const sizes: Record<ButtonSize, string> = {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
sm: "h-9 rounded-xl px-3",
lg: "h-11 rounded-xl px-8",
icon: "h-10 w-10",
};
@@ -45,7 +45,7 @@ export function Button({
return (
<Comp
className={cn(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50",
variants[variant],
sizes[size],
className,
services/frontend/src/shared/ui/card.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ export function Card({
return (
<div
className={cn(
"rounded-2xl border border-border bg-card text-card-foreground shadow-sm",
"rounded-2xl border border-border bg-white text-card-foreground shadow-md hover:shadow-lg transition-shadow",
className,
)}
{...props}
services/frontend/src/shared/ui/index.ts
+1
View File
@@ -16,3 +16,4 @@ export { Select } from "./select";
export { Skeleton } from "./skeleton";
export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
export { ToastProvider, useToast } from "./toast";
export { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
services/frontend/src/shared/ui/input.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export function Input({ className, type, ...props }: InputProps) {
<input
type={type}
className={cn(
"flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
services/frontend/src/shared/ui/scroll-area.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ function ScrollBar({
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-primary/30" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
);
}
services/frontend/src/shared/ui/select.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export function Select({
return (
<select
className={cn(
"flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
"flex h-10 w-full rounded-xl border border-border bg-white px-3 py-2 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
services/frontend/src/shared/ui/skeleton.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ export function Skeleton({
}: HTMLAttributes<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-muted/60", className)}
className={cn("rounded-md bg-muted animate-shimmer", className)}
{...props}
/>
);
services/frontend/src/shared/ui/tabs.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export function TabsTrigger({
return (
<TabsPrimitive.Trigger
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
"inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary-soft data-[state=active]:text-foreground data-[state=active]:shadow-sm",
className,
)}
{...props}
services/frontend/src/shared/ui/toast.tsx
+21 -10
View File
@@ -6,6 +6,7 @@ import {
useContext,
useState,
} from "react";
import { cn } from "../lib/utils";
interface Toast {
id: string;
@@ -56,6 +57,20 @@ export function useToast() {
return useContext(ToastContext);
}
const typeStyles: Record<Toast["type"], string> = {
info: "border-l-primary bg-white text-foreground",
success: "border-l-green-500 bg-white text-foreground",
error: "border-l-red-500 bg-white text-foreground",
warning: "border-l-amber-500 bg-white text-foreground",
};
const typeIcons: Record<Toast["type"], string> = {
info: "💠",
success: "🌸",
error: "😿",
warning: "⚠️",
};
function ToastContainer() {
const { toasts, removeToast } = useContext(ToastContext);
@@ -66,18 +81,14 @@ function ToastContainer() {
{toasts.map((toast) => (
<div
key={toast.id}
className={`rounded-lg border px-4 py-3 text-sm shadow-lg backdrop-blur-xl cursor-pointer transition-all hover:scale-[1.02] ${
toast.type === "error"
? "border-destructive/30 bg-destructive/20 text-destructive"
: toast.type === "success"
? "border-green-500/30 bg-green-500/10 text-green-300"
: toast.type === "warning"
? "border-yellow-500/30 bg-yellow-500/10 text-yellow-300"
: "border-border/30 bg-card/80 text-foreground"
}`}
className={cn(
"flex items-center gap-2 rounded-xl border border-border px-4 py-3 text-sm shadow-md cursor-pointer transition-all hover:scale-[1.02] border-l-4",
typeStyles[toast.type],
)}
onClick={() => removeToast(toast.id)}
>
{toast.message}
<span className="text-base leading-none">{typeIcons[toast.type]}</span>
<span>{toast.message}</span>
</div>
))}
</div>
services/frontend/src/widgets/DashboardLayout.tsx
+17 -4
View File
@@ -1,8 +1,11 @@
import { motion } from "framer-motion";
import type { ReactNode } from "react";
import type { DashboardTab } from "../entities/ui/types";
import type { VoiceStatus } from "../shared/api/client";
import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
import type { WsStatus } from "../shared/ws/socket";
import { Header } from "./Header";
import { ParticleBackground } from "./particles/ParticleBackground";
import { Sidebar } from "./Sidebar";
interface DashboardLayoutProps {
@@ -21,8 +24,11 @@ export function DashboardLayout({
children,
}: DashboardLayoutProps) {
return (
<div className="min-h-screen bg-background text-foreground">
<div className="flex min-h-screen">
<div className="relative min-h-screen bg-background text-foreground">
{/* Sakura particle layer */}
<ParticleBackground />
<div className="relative flex min-h-screen">
<Sidebar activeTab={activeTab} onTabChange={onTabChange} />
<main className="flex min-w-0 flex-1 flex-col">
<Header
@@ -30,9 +36,16 @@ export function DashboardLayout({
wsStatus={wsStatus}
voiceStatus={voiceStatus}
/>
<div className="flex-1 overflow-auto p-4 md:p-6 lg:p-8">
<motion.main
key={activeTab}
variants={fadeSlideUp}
initial="initial"
animate="animate"
exit="exit"
className="flex-1 overflow-auto p-4 md:p-6 lg:p-8"
>
{children}
</div>
</motion.main>
</main>
</div>
</div>
services/frontend/src/widgets/Header.tsx
+73 -20
View File
@@ -1,6 +1,9 @@
import { motion } from "framer-motion";
import { Wifi, WifiOff } from "lucide-react";
import type { DashboardTab } from "../entities/ui/types";
import type { VoiceStatus } from "../shared/api/client";
import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
import { cn } from "../shared/lib/utils";
import { Badge } from "../shared/ui";
import type { WsStatus } from "../shared/ws/socket";
@@ -22,14 +25,59 @@ interface HeaderProps {
voiceStatus: VoiceStatus;
}
/** Dot indicator colour for WS badge */
function wsDotColor(status: WsStatus): string {
switch (status) {
case "connected":
return "bg-emerald-400";
case "error":
return "bg-red-400";
case "connecting":
case "disconnected":
return "bg-gray-400";
}
}
function WsIndicator({ status }: { status: WsStatus }) {
const dot = wsDotColor(status);
return (
<div className="flex items-center gap-1.5">
<span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
<span className="text-xs font-medium capitalize">{status}</span>
</div>
);
}
/** Voice status indicator dot */
function VoiceIndicator({ voiceStatus }: { voiceStatus: VoiceStatus }) {
const isConnected = voiceStatus.connected;
const dot = isConnected ? "bg-[#7EC8E3]" : "bg-gray-300";
const label = isConnected
? voiceStatus.activeChannelName || "connected"
: "idle";
return (
<div className="flex items-center gap-1.5">
<span className={cn("inline-block h-2 w-2 rounded-full", dot)} />
<span className="text-xs font-medium">{label}</span>
</div>
);
}
export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
return (
<header className="sticky top-0 z-10 border-b border-border bg-background/80 px-4 py-4 backdrop-blur md:px-8">
<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">
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
<div className="flex items-center gap-3">
{/* Left: animated tab title + subtitle */}
<motion.div
key={activeTab}
variants={fadeSlideUp}
initial="initial"
animate="animate"
className="flex items-center gap-3"
>
<div>
<h1 className="text-xl font-bold tracking-tight">
<span className="text-primary">GMW</span>
<span className="text-[#7EC8E3]">GMW</span>
<span className="mx-2 text-muted-foreground">·</span>
{titles[activeTab]}
</h1>
@@ -37,29 +85,34 @@ export function Header({ activeTab, wsStatus, voiceStatus }: HeaderProps) {
{subtitles[activeTab]}
</p>
</div>
</div>
<div className="flex flex-wrap gap-2">
</motion.div>
{/* Right: status badges */}
<div className="flex flex-wrap items-center gap-2">
{/* WS Badge */}
<Badge
variant={
wsStatus === "connected"
? "success"
: wsStatus === "error"
? "destructive"
: "warning"
}
variant="outline"
className="border-[#7EC8E3]/20 bg-white/50 px-3 py-1.5 text-xs text-muted-foreground"
>
{wsStatus === "connected" ? (
<Wifi className="mr-1 h-3 w-3" />
<Wifi className="mr-1.5 h-3 w-3 text-emerald-400" />
) : (
<WifiOff className="mr-1 h-3 w-3" />
<WifiOff className="mr-1.5 h-3 w-3 text-red-400" />
)}
WebSocket {wsStatus}
<WsIndicator status={wsStatus} />
</Badge>
<Badge variant={voiceStatus.connected ? "success" : "secondary"}>
Voice{" "}
{voiceStatus.connected
? voiceStatus.activeChannelName || "connected"
: "idle"}
{/* Voice Badge */}
<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",
)}
>
<VoiceIndicator voiceStatus={voiceStatus} />
</Badge>
</div>
</div>
services/frontend/src/widgets/Sidebar.tsx
+47 -39
View File
@@ -1,7 +1,8 @@
import { motion } from "framer-motion";
import { BarChart3, MessageSquare, Radio } from "lucide-react";
import type { DashboardTab } from "../entities/ui/types";
import { cn } from "../shared/lib/utils";
import { Button } from "../shared/ui";
import { ChibiMascot } from "./mascot/ChibiMascot";
const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
[
@@ -16,62 +17,69 @@ interface SidebarProps {
collapsed?: boolean;
}
export function Sidebar({ activeTab, onTabChange, collapsed }: SidebarProps) {
export function Sidebar({
activeTab,
onTabChange,
collapsed = true,
}: SidebarProps) {
return (
<aside
<motion.nav
className={cn(
"hidden shrink-0 border-r border-border bg-card/60 p-5 backdrop-blur transition-all duration-300 md:block",
"hidden shrink-0 flex-col border-r border-[#7EC8E3]/20 bg-white/70 backdrop-blur-md transition-all duration-300 md:flex",
collapsed ? "w-16" : "w-64",
)}
layout
transition={{ type: "spring", stiffness: 300, damping: 30 }}
>
{/* App icon only — no branding text */}
<div
className={cn(
"mb-8 flex items-center gap-3",
collapsed && "justify-center",
"flex items-center py-5",
collapsed ? "justify-center" : "px-4",
)}
>
{!collapsed && (
<div>
<div className="flex items-baseline gap-2">
<img
src="/logo.svg"
alt="GMW"
className="h-10 w-10 rounded-2xl"
/>
<span className="font-bold tracking-tight text-primary text-lg">
GMW
</span>
</div>
<div className="text-xs text-muted-foreground">
Discord Moderation Watcher
</div>
</div>
)}
{collapsed && (
<img src="/logo.svg" alt="GMW" className="h-9 w-9 rounded-xl" />
)}
<img src="/logo.svg" alt="GMW" className="h-8 w-8 rounded-xl" />
</div>
<nav className="space-y-2">
{/* Navigation items */}
<div className="flex flex-col gap-1 px-2">
{navItems.map((item) => {
const Icon = item.icon;
const isActive = activeTab === item.id;
return (
<Button
<button
key={item.id}
variant={activeTab === item.id ? "secondary" : "ghost"}
className={cn(
"w-full justify-start",
activeTab === item.id && "bg-primary/15 text-primary",
collapsed && "justify-center px-0",
)}
onClick={() => onTabChange(item.id)}
title={collapsed ? item.label : undefined}
className={cn(
"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",
)}
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" />
{!collapsed && item.label}
</Button>
<Icon className="h-4 w-4 shrink-0" />
{!collapsed && <span>{item.label}</span>}
</button>
);
})}
</nav>
</aside>
</div>
{/* Spacer pushes mascot to bottom */}
<div className="flex-1" />
{/* Chibi mascot */}
<div className="flex justify-center pb-4">
<ChibiMascot size="sm" variant="idle" />
</div>
</motion.nav>
);
}