From 02908171be675d1d050d77ff1ce131743339c8d2 Mon Sep 17 00:00:00 2001 From: M1ngdaXie <156019134+M1ngdaXie@users.noreply.github.com> Date: Sun, 8 Feb 2026 12:32:02 -0800 Subject: [PATCH] Refactor UI components and styles for improved consistency and aesthetics --- frontend/src/components/Home/CreateButton.tsx | 18 +- frontend/src/components/Home/DocumentCard.tsx | 70 ++- frontend/src/components/Navbar.tsx | 49 +- frontend/src/components/Presence/UserList.tsx | 93 ++-- frontend/src/components/Share/ShareModal.css | 220 +++++---- frontend/src/components/Share/ShareModal.tsx | 22 +- .../VersionHistory/VersionHistoryPanel.css | 163 ++++--- .../VersionHistory/VersionHistoryPanel.tsx | 2 + frontend/src/index.css | 452 ++++++++++-------- frontend/src/pages/EditorPage.tsx | 8 +- frontend/src/pages/Home.tsx | 48 +- frontend/src/pages/KanbanPage.tsx | 3 - frontend/src/pages/LandingPage.css | 442 +++++++++-------- frontend/src/pages/LandingPage.tsx | 138 ++++-- frontend/src/pages/LoginPage.css | 52 +- frontend/src/pages/LoginPage.tsx | 8 +- frontend/tailwind.config.js | 68 +-- 17 files changed, 1024 insertions(+), 832 deletions(-) diff --git a/frontend/src/components/Home/CreateButton.tsx b/frontend/src/components/Home/CreateButton.tsx index e7799dd..33d00fe 100644 --- a/frontend/src/components/Home/CreateButton.tsx +++ b/frontend/src/components/Home/CreateButton.tsx @@ -23,20 +23,18 @@ export function CreateButton({ onClick, disabled, icon, children }: CreateButton onClick={onClick} disabled={disabled} className=" - bg-pixel-purple-bright - hover:bg-pixel-purple-deep + bg-brand + hover:bg-brand-dark text-white - border-[3px] - border-pixel-outline - shadow-pixel - hover:shadow-pixel-hover + border + border-border + shadow-card + hover:shadow-float hover:-translate-y-0.5 - hover:-translate-x-0.5 active:translate-y-0.5 - active:translate-x-0.5 - active:shadow-pixel-active + active:shadow-soft transition-all - duration-75 + duration-150 font-sans font-semibold px-6 diff --git a/frontend/src/components/Home/DocumentCard.tsx b/frontend/src/components/Home/DocumentCard.tsx index 17e2e93..88bb803 100644 --- a/frontend/src/components/Home/DocumentCard.tsx +++ b/frontend/src/components/Home/DocumentCard.tsx @@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom'; import type { DocumentType } from '@/api/document'; import { Card } from '@/components/ui/card'; import { FileText, KanbanSquare, Trash2 } from 'lucide-react'; +import PixelIcon from '@/components/PixelIcon/PixelIcon'; import { Button } from '@/components/ui/button'; interface DocumentCardProps { @@ -24,15 +25,14 @@ export function DocumentCard({ doc, onDelete, isShared }: DocumentCardProps) {
- +
-

+

{doc.name}

- + {typeLabel}
{isShared && ( - + + Shared )} {/* Metadata */} -
+
Created {new Date(doc.created_at).toLocaleDateString()}
@@ -87,17 +77,16 @@ export function DocumentCard({ doc, onDelete, isShared }: DocumentCardProps) { onClick={handleOpen} className=" flex-1 - bg-pixel-cyan-bright - hover:bg-pixel-purple-bright + bg-brand + hover:bg-brand-dark text-white - border-[2px] - border-pixel-outline - shadow-pixel-sm - hover:shadow-pixel-hover + border + border-border + shadow-soft + hover:shadow-card hover:-translate-y-0.5 - hover:-translate-x-0.5 transition-all - duration-75 + duration-150 font-sans font-semibold " @@ -109,15 +98,14 @@ export function DocumentCard({ doc, onDelete, isShared }: DocumentCardProps) { onClick={() => onDelete(doc.id)} variant="outline" className=" - border-[2px] - border-pixel-outline - shadow-pixel-sm - hover:shadow-pixel-hover + border + border-border + shadow-soft + hover:shadow-card hover:-translate-y-0.5 - hover:-translate-x-0.5 hover:bg-red-50 transition-all - duration-75 + duration-150 " > diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx index 983bf85..0827af6 100644 --- a/frontend/src/components/Navbar.tsx +++ b/frontend/src/components/Navbar.tsx @@ -1,5 +1,6 @@ import { useAuth } from '@/contexts/AuthContext'; import { Button } from '@/components/ui/button'; +import PixelIcon from '@/components/PixelIcon/PixelIcon'; import { LogOut } from 'lucide-react'; function Navbar() { @@ -9,28 +10,33 @@ function Navbar() { return (