From 82aa28000a26862c96f83bb66dacca9a53d1339a Mon Sep 17 00:00:00 2001
From: yiling ji <njjyl723@gmail.com>
Date: Wed, 18 Feb 2026 12:21:07 +0800
Subject: [PATCH] update ui

---
 src/ui/pages/Equipments.tsx  | 12 ++++++++----
 src/ui/pages/Expressions.tsx |  1 +
 src/ui/pages/FittingRoom.tsx | 12 ++++++------
 src/ui/pages/Poses.tsx       |  1 +
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/ui/pages/Equipments.tsx b/src/ui/pages/Equipments.tsx
index a29d72e..bb67828 100644
--- a/src/ui/pages/Equipments.tsx
+++ b/src/ui/pages/Equipments.tsx
@@ -1,14 +1,14 @@
 import { InferResponseType } from 'hono/client'
-import { Plus, Trash2, Upload } from 'lucide-react'
+import { Plus, ScanLine, Trash2, Upload } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { EQUIPMENT_CATEGORIES } from '../../lib/categories'
 import { client } from '../client'
 import { CreateOutfitDialog } from '../components/CreateOutfitDialog'
 import { EquipmentDetailsDialog } from '../components/EquipmentDetailsDialog'
-import { UploadEquipmentDialog } from '../components/UploadEquipmentDialog'
 import { ExtractorDialog } from '../components/ExtractorDialog'
 import { PageHeader } from '../components/PageHeader'
+import { UploadEquipmentDialog } from '../components/UploadEquipmentDialog'
 import { VibeCard } from '../components/VibeCard'
 import { Badge } from '../components/ui/badge'
 import { Button } from '../components/ui/button'
@@ -158,11 +158,15 @@ export default function Equipments() {
         actions={
           viewMode === 'equipments' ? (
             <div className="flex gap-2">
-              <Button onClick={() => setUploadEquipmentOpen(true)} variant="secondary">
+              <Button
+                onClick={() => setUploadEquipmentOpen(true)}
+                variant="secondary"
+                className="border"
+              >
                 <Upload className="mr-2 h-4 w-4" /> Upload
               </Button>
               <Button onClick={() => setExtractorOpen(true)}>
-                <Plus className="mr-2 h-4 w-4" /> Extract Equipment
+                <ScanLine className="mr-2 h-4 w-4" /> Extractor
               </Button>
             </div>
           ) : (
diff --git a/src/ui/pages/Expressions.tsx b/src/ui/pages/Expressions.tsx
index b7304da..acef5ee 100644
--- a/src/ui/pages/Expressions.tsx
+++ b/src/ui/pages/Expressions.tsx
@@ -111,6 +111,7 @@ export default function Expressions() {
           }
         }}
       />
+      <style>{`@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }`}</style>
     </div>
   )
 }
diff --git a/src/ui/pages/FittingRoom.tsx b/src/ui/pages/FittingRoom.tsx
index ee5fb50..19fe2e6 100644
--- a/src/ui/pages/FittingRoom.tsx
+++ b/src/ui/pages/FittingRoom.tsx
@@ -10,13 +10,13 @@ import { LookDetailsDialog } from '../components/LookDetailsDialog'
 import { PageHeader } from '../components/PageHeader'
 import { Button } from '../components/ui/button'
 import { Card } from '../components/ui/card'
-import { ScrollArea } from '../components/ui/scroll-area'
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
 } from '../components/ui/dropdown-menu'
+import { ScrollArea } from '../components/ui/scroll-area'
 
 // Types - Define locally to avoid complex type extraction if client inference is tricky
 // But we should try to use inference
@@ -122,7 +122,7 @@ export default function FittingRoom() {
             <img
               src={character.image?.path ? `/files/${character.image.path}` : ''}
               alt={character.name}
-              className="w-full h-full object-contain object-top drop-shadow-2xl hover:scale-105 transition-transform duration-500"
+              className="w-full h-full object-contain drop-shadow-2xl hover:scale-105 transition-transform duration-500"
             />
             <div className="absolute bottom-4 left-4 right-4 bg-white/80 backdrop-blur-md p-4 rounded-xl border border-white/50 shadow-sm">
               <h3 className="font-bold text-stone-800 text-lg">{character.name}</h3>
diff --git a/src/ui/pages/Poses.tsx b/src/ui/pages/Poses.tsx
index 77c2ef0..4497b76 100644
--- a/src/ui/pages/Poses.tsx
+++ b/src/ui/pages/Poses.tsx
@@ -111,6 +111,7 @@ export default function Poses() {
           }
         }}
       />
+      <style>{`@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }`}</style>
     </div>
   )
 }