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>
This commit is contained in:
@@ -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}` : "--"}
|
||||
|
||||
Reference in New Issue
Block a user