update ui

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>
           ) : (

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>
   )
 }

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>

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>
   )
 }