redesign and some fixes

app/root.tsx

@@ -40,7 +40,7 @@ import { cn } from "@/lib/utils";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
-import { Copy } from "lucide-react";
+import { PiCopy } from "react-icons/pi";
 import { toast } from "sonner";
 import { useCloak } from "@/hooks/use-cloak";
 import { MotionConfig } from "motion/react";
@@ -311,7 +311,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
                     });
                 }}
               >
-                <Copy />
+                <PiCopy />
               </Button>
             </ButtonGroup>
             <DialogContent>

app/routes/admin/columns.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { type ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown } from "lucide-react";
+import { PiArrowsDownUp } from "react-icons/pi";
 import { Button } from "@/components/ui/button";
 
 export type User = {
@@ -27,7 +27,7 @@ export const createColumns = (): ColumnDef<User>[] => [
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
           Email
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <PiArrowsDownUp className="ml-2 h-4 w-4" />
         </Button>
       );
     },
@@ -42,7 +42,7 @@ export const createColumns = (): ColumnDef<User>[] => [
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
           Name
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <PiArrowsDownUp className="ml-2 h-4 w-4" />
         </Button>
       );
     },
@@ -90,7 +90,7 @@ export const createColumns = (): ColumnDef<User>[] => [
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
           Created
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <PiArrowsDownUp className="ml-2 h-4 w-4" />
         </Button>
       );
     },

app/routes/admin/data-table.tsx

@@ -13,7 +13,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { ChevronDown } from "lucide-react";
+import { PiCaretDown } from "react-icons/pi";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -104,7 +104,7 @@ export function DataTable<TData, TValue>({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="outline" size="sm">
-                Columns <ChevronDown className="ml-2 h-4 w-4" />
+                Columns <PiCaretDown className="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">

app/routes/backups/page.tsx

@@ -22,14 +22,13 @@ import {
   useQuery,
 } from "convex/react";
 import {
-  Archive,
-  ArchiveRestore,
-  ArrowRight,
-  Clipboard,
-  Copy,
-  Delete,
-  Trash,
-} from "lucide-react";
+  PiArchive,
+  PiArrowRight,
+  PiClipboard,
+  PiCopy,
+  PiTrash,
+  PiTrashSimple,
+} from "react-icons/pi";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { AnimatePresence, motion } from "motion/react";
@@ -170,7 +169,7 @@ export default function BackupsPage() {
                     });
                 }}
               >
-                <Clipboard />
+                <PiClipboard />
               </Button>
             </div>
           </div>
@@ -247,7 +246,7 @@ export default function BackupsPage() {
                       onClick={handleCreateBackup}
                       disabled={!inputtedBackupName.trim()}
                     >
-                      <ArrowRight />
+                      <PiArrowRight />
                     </Button>
                   </div>
                 </CardContent>
@@ -277,7 +276,7 @@ export default function BackupsPage() {
                           <AlertDialog>
                             <AlertDialogTrigger asChild>
                               <Button variant="destructive" size="icon">
-                                <Trash />
+                                <PiTrash />
                               </Button>
                             </AlertDialogTrigger>
                             <AlertDialogContent>
@@ -333,12 +332,12 @@ export default function BackupsPage() {
                                 });
                             }}
                           >
-                            <Copy />
+                            <PiCopy />
                           </Button>
                           <AlertDialog>
                             <AlertDialogTrigger asChild>
                               <Button>
-                                <ArchiveRestore />
+                                <PiArchive />
                                 Restore
                               </Button>
                             </AlertDialogTrigger>
@@ -386,7 +385,7 @@ export default function BackupsPage() {
                       <Empty>
                         <EmptyHeader>
                           <EmptyMedia variant="icon">
-                            <Archive className="size-6" />
+                            <PiArchive className="size-6" />
                           </EmptyMedia>
                           <EmptyTitle>No backups yet</EmptyTitle>
                           <EmptyDescription>

app/routes/g/columns.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ColumnDef } from "@tanstack/react-table";
-import { ArrowUpDown } from "lucide-react";
+import { PiArrowsDownUp } from "react-icons/pi";
 import { Button } from "@/components/ui/button";
 import type { ParsedGmae } from "@/lib/gmaes";
 
@@ -16,7 +16,7 @@ export const columns: ColumnDef<ParsedGmae>[] = [
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
           Name
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <PiArrowsDownUp className="ml-2 h-4 w-4" />
         </Button>
       );
     },
@@ -40,7 +40,7 @@ export const columns: ColumnDef<ParsedGmae>[] = [
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
           Category
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <PiArrowsDownUp className="ml-2 h-4 w-4" />
         </Button>
       );
     },

app/routes/g/play.tsx

@@ -3,20 +3,20 @@ import type { Route } from "./+types/play";
 import { data } from "react-router";
 import { Button } from "@/components/ui/button";
 import {
-  AppWindow,
-  Bookmark,
-  BookmarkCheck,
-  ChevronDown,
-  ChevronUp,
-  ExternalLink,
-  Fullscreen,
-  Keyboard,
-  Maximize,
-  RefreshCw,
-  Scan,
-  Share,
-  Square,
-} from "lucide-react";
+  PiAppWindow,
+  PiBookmark,
+  PiBookmarkFill,
+  PiCaretDown,
+  PiCaretUp,
+  PiArrowSquareOut,
+  PiArrowsOut,
+  PiKeyboard,
+  PiArrowsOutSimple,
+  PiArrowClockwise,
+  PiScan,
+  PiShare,
+  PiSquare,
+} from "react-icons/pi";
 import { ButtonGroup } from "@/components/ui/button-group";
 import {
   Tooltip,
@@ -100,7 +100,7 @@ export function Play({ params }: Route.ComponentProps) {
                       toast.success("Focused gmae");
                     }}
                   >
-                    <Keyboard />
+                    <PiKeyboard />
                     <span className="sr-only">Fix keyboard input</span>
                   </Button>
                 </TooltipTrigger>
@@ -115,7 +115,7 @@ export function Play({ params }: Route.ComponentProps) {
                       iframeRef.current?.contentWindow?.location.reload();
                     }}
                   >
-                    <RefreshCw />
+                    <PiArrowClockwise />
                     <span className="sr-only">Reload</span>
                   </Button>
                 </TooltipTrigger>
@@ -145,7 +145,7 @@ export function Play({ params }: Route.ComponentProps) {
                       }
                     }}
                   >
-                    <AppWindow />
+                    <PiAppWindow />
                     <span className="sr-only">Open in new window</span>
                   </Button>
                 </TooltipTrigger>
@@ -171,7 +171,7 @@ export function Play({ params }: Route.ComponentProps) {
                       }
                     }}
                   >
-                    <ExternalLink />
+                    <PiArrowSquareOut />
                     <span className="sr-only">Open in new tab</span>
                   </Button>
                 </TooltipTrigger>
@@ -187,7 +187,7 @@ export function Play({ params }: Route.ComponentProps) {
                     }}
                     variant="outline"
                   >
-                    <ChevronDown />
+                    <PiCaretDown />
                     <span className="sr-only">Maximize</span>
                   </Button>
                 </TooltipTrigger>
@@ -202,7 +202,7 @@ export function Play({ params }: Route.ComponentProps) {
                       iframeRef.current?.focus();
                     }}
                   >
-                    <Maximize />
+                    <PiArrowsOutSimple />
                     <span className="sr-only">Fullscreen</span>
                   </Button>
                 </TooltipTrigger>
@@ -218,7 +218,7 @@ export function Play({ params }: Route.ComponentProps) {
                   }
                 }}
               >
-                {isSaved ? <BookmarkCheck /> : <Bookmark />}
+                {isSaved ? <PiBookmarkFill /> : <PiBookmark />}
                 {isSaved ? "Saved" : "Save"}
               </Button>
               <Button
@@ -248,7 +248,7 @@ export function Play({ params }: Route.ComponentProps) {
                   }
                 }}
               >
-                <Share />
+                <PiShare />
                 Share
               </Button>
             </ButtonGroup>
@@ -266,7 +266,7 @@ export function Play({ params }: Route.ComponentProps) {
               setMaximized(false);
             }}
           >
-            <ChevronUp />
+            <PiCaretUp />
           </Button>
         </div>
       )}