xufuhan/assetx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove input styles to match design system

Browse Source 
- 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>
This commit is contained in:
default
2026-01-30 04:01:30 +00:00
parent f190d6c4c0
commit 16aa079cba
1 changed files with 4 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/MintSwapPanel.tsx
View File

@@ -3,7 +3,7 @@
import { useState } from "react"; import { useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useApp } from "@/contexts/AppContext"; import { useApp } from "@/contexts/AppContext";
import { Tabs, Tab, Button, Input } from "@heroui/react"; import { Tabs, Tab, Button } from "@heroui/react";
export default function MintSwapPanel() { export default function MintSwapPanel() {
const { t } = useApp(); 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> <span className="text-body-default font-bold text-text-primary dark:text-white">USDC</span>
</button> </button>
<div className="flex flex-col items-end flex-1"> <div className="flex flex-col items-end flex-1">
<Input <input
type="number" type="number"
placeholder="0.00" placeholder="0.00"
value={amount} value={amount}
onValueChange={setAmount} onChange={(e) => setAmount(e.target.value)}
classNames={{ 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"
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",
}}
/> />
<span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400"> <span className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
{amount ? `≈ $${amount}` : "--"} {amount ? `≈ $${amount}` : "--"}