From b22ee15a24d7634e82aea114f1887b2b90a7cc7c Mon Sep 17 00:00:00 2001
From: AINDUSTRIES <contact.aindustries@gmail.com>
Date: Wed, 30 Sep 2026 01:13:09 +0200
Subject: [PATCH] Inventory and dialog revamp from user feedback

---
 app/components/skin_dialog.tsx | 56 ++++++++++++++++------------------
 app/pages/inventory.tsx        |  5 +--
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/app/components/skin_dialog.tsx b/app/components/skin_dialog.tsx
index 237dd67..882199c 100644
--- a/app/components/skin_dialog.tsx
+++ b/app/components/skin_dialog.tsx
@@ -37,7 +37,7 @@ export function SkinDialog({
 
     const applySkin = (side: "SIDE" | "BOTH") => {
         setSkin(localSkin);
-    }
+    };
 
     useEffect(() => {
         if (!selectorOpen) {
@@ -82,14 +82,8 @@ export function SkinDialog({
                                     >
                                         {localSkin.display}
                                     </Typography.Heading>
-                                    <Button
-                                        onClick={() => {
-                                            setCanClose(false);
-                                            setSelectorOpen(true);
-                                        }}
-                                        className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 hover:bg-indigo-800 active:bg-indigo-900"
-                                    >
-                                        <div className="flex flex-col w-full h-full">
+                                    <div className="gap-0">
+                                        <div className="bg-mist-700 flex flex-col h-full p-0 rounded-none gap-0 w-full">
                                             <div
                                                 className="bg-linear-to-b pointer-events-none w-full h-full relative"
                                                 style={{
@@ -101,25 +95,6 @@ export function SkinDialog({
                                                     className="pointer-events-none object-contain object-bottom h-full"
                                                     alt="Weapon image"
                                                 />
-                                                <Surface
-                                                    className="rounded-full w-fit h-fit p-2 absolute bottom-2 right-2"
-                                                    variant="secondary"
-                                                >
-                                                    <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        fill="none"
-                                                        viewBox="0 0 24 24"
-                                                        strokeWidth={1.5}
-                                                        stroke="currentColor"
-                                                        className="size-6 m-0"
-                                                    >
-                                                        <path
-                                                            strokeLinecap="round"
-                                                            strokeLinejoin="round"
-                                                            d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-                                                        />
-                                                    </svg>
-                                                </Surface>
                                             </div>
                                             <div
                                                 className={`h-1 w-full`}
@@ -128,7 +103,16 @@ export function SkinDialog({
                                                 }}
                                             ></div>
                                         </div>
+                                    <Button
+                                        onClick={() => {
+                                            setCanClose(false);
+                                            setSelectorOpen(true);
+                                        }}
+                                        className="w-full rounded-b-xl rounded-t-none"
+                                    >
+                                        Change skin
                                     </Button>
+                                    </div>
                                     {localSkin instanceof WeaponInfo && (
                                         <Float
                                             skin={localSkin}
@@ -156,12 +140,24 @@ export function SkinDialog({
                                         Transaction id: {localSkin.id}
                                     </Typography.Code>
                                     <div className="flex gap-2 justify-end">
+                                        <div className="flex-1">
+                                            <Button>Inspect</Button>
+                                        </div>
                                         {localSkin instanceof WeaponInfo && (
-                                            <Button onClick={() => {applySkin("BOTH")}} variant="secondary">
+                                            <Button
+                                                onClick={() => {
+                                                    applySkin("BOTH");
+                                                }}
+                                                variant="secondary"
+                                            >
                                                 Apply to Both
                                             </Button>
                                         )}
-                                        <Button onClick={() => {applySkin("SIDE")}}>
+                                        <Button
+                                            onClick={() => {
+                                                applySkin("SIDE");
+                                            }}
+                                        >
                                             Apply
                                             {localSkin instanceof WeaponInfo
                                                 ? ` to ${side}`
diff --git a/app/pages/inventory.tsx b/app/pages/inventory.tsx
index 90801c6..71275c5 100644
--- a/app/pages/inventory.tsx
+++ b/app/pages/inventory.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import Base from "./base";
-import { Surface, Tabs } from "@heroui/react";
+import { Button, Surface, Tabs } from "@heroui/react";
 import { Inventory } from "~/components/inventory";
 
 export function InventoryPage() {
@@ -11,7 +11,7 @@ export function InventoryPage() {
                 className="flex flex-col flex-1 min-h-0 h-0 shadow-lg shadow-indigo-900 ring-1 ring-indigo-800 p-2 m-2 rounded-3xl gap-2"
                 variant="default"
             >
-                <div className="w-full h-min flex">
+                <div className="w-full h-min flex justify-between items-center">
                     <Tabs
                         selectedKey={side}
                         onSelectionChange={(key) => {
@@ -40,6 +40,7 @@ export function InventoryPage() {
                             </Tabs.List>
                         </Tabs.ListContainer>
                     </Tabs>
+                    <Button>Need help?</Button>
                 </div>
                 <Inventory side={side} />
             </Surface>