From 16aa079cba01ce52de668d60a1a763914dcf59b0 Mon Sep 17 00:00:00 2001
From: default <xufuhan2002@qq.com>
Date: Fri, 30 Jan 2026 04:01:30 +0000
Subject: [PATCH] fix: remove input styles to match design system

- Replaced HeroUI Input with native input element
- Removed number input spin buttons (up/down arrows)
- Removed all backgrounds, borders, and shadows
- Removed focus outline for seamless integration
- Input now appears as plain text until clicked
- Maintains right-aligned text and placeholder styling

CSS techniques used:
- [appearance:textfield] for Firefox
- [&::-webkit-*-spin-button]:appearance-none for Chrome/Safari
- bg-transparent, border-none, outline-none for clean look

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 components/MintSwapPanel.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/components/MintSwapPanel.tsx b/components/MintSwapPanel.tsx
index e53151d..3c2d61e 100644
--- a/components/MintSwapPanel.tsx
+++ b/components/MintSwapPanel.tsx
@@ -3,7 +3,7 @@
 import { useState } from "react";
 import Image from "next/image";
 import { useApp } from "@/contexts/AppContext";
-import { Tabs, Tab, Button, Input } from "@heroui/react";
+import { Tabs, Tab, Button } from "@heroui/react";
 
 export default function MintSwapPanel() {
   const { t } = useApp();
@@ -84,17 +84,12 @@ export default function MintSwapPanel() {
                 <span className="text-body-default font-bold text-text-primary dark:text-white">USDC</span>
               </button>
               <div className="flex flex-col items-end flex-1">
-                <Input
+                <input
                   type="number"
                   placeholder="0.00"
                   value={amount}
-                  onValueChange={setAmount}
-                  classNames={{
-                    base: "max-w-full",
-                    mainWrapper: "h-auto",
-                    input: "text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500",
-                    inputWrapper: "h-auto shadow-none bg-transparent p-0 border-none",
-                  }}
+                  onChange={(e) => setAmount(e.target.value)}
+                  className="w-full text-right text-heading-h3 font-bold text-text-primary dark:text-white placeholder:text-[#d1d5db] dark:placeholder:text-gray-500 bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                 />
                 <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
                   {amount ? `≈ $${amount}` : "--"}