From 2be92e7b42fbad3c4f9daee81b5652fa891347e6 Mon Sep 17 00:00:00 2001 From: dotsolo Date: Mon, 9 Mar 2026 09:53:20 -0400 Subject: [PATCH 1/6] =?UTF-8?q?Update=20swap=20UI=20design=20=E2=80=94=20c?= =?UTF-8?q?ard=20styling,=20spacing,=20and=20slippage=20panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Sell card: white bg with border, buy card: gray bg no border - Larger rounded corners, more padding, tighter card gap - Swap arrows: original SVG in smaller rounded box with white buffer - Settings gear: larger icon, slippage panel aligned to card edge - Simplified slippage panel: cleaner layout, bigger input - Lightened background dots - Moved "Powered by Miden" between content and footer - Bigger, bolder Connect Wallet button Co-Authored-By: Claude Opus 4.6 --- src/components/Slippage.tsx | 98 +++++---------- src/components/SwapInputBuy.tsx | 2 +- src/components/SwapPairs.tsx | 41 +------ src/index.css | 2 +- src/pages/Swap.tsx | 206 +++++++++++++++----------------- 5 files changed, 130 insertions(+), 219 deletions(-) diff --git a/src/components/Slippage.tsx b/src/components/Slippage.tsx index 9338280..37e129b 100644 --- a/src/components/Slippage.tsx +++ b/src/components/Slippage.tsx @@ -1,7 +1,7 @@ import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; -import { Info, Settings, X } from 'lucide-react'; +import { Settings, X } from 'lucide-react'; import { useCallback, useEffect, useState } from 'react'; interface SlippageProps { @@ -39,102 +39,58 @@ const Slippage = ({ slippage, onSlippageChange }: SlippageProps) => { }, [slippage]); return ( -
+ <> {isOpen && ( <> - {/* Backdrop */}
- {/* Settings Panel */} - - - {/* Header */} + +
-
-

Max slippage

-
- - {/* Tooltip */} -
-
- Your transaction will revert if the price changes unfavorably by - more than this percentage -
-
-
-
-
-
- + +
- {/* Slippage Input */} -
-
- handleSlippageChange(e.target.value)} - className='text-center text-sm pr-8' - min='0' - max='50' - step='0.1' - placeholder='0.5' - /> - - % - -
- - {/* Conditional Warnings */} - {slippage > 5 && ( -
- High slippage risk -
- )} - - {slippage < 0.1 && slippage > 0 && ( -
- May fail due to low slippage -
- )} +
+ handleSlippageChange(e.target.value)} + className='text-center text-lg font-medium pr-10 h-12 rounded-xl' + min='0' + max='50' + step='0.1' + placeholder='0.5' + /> + + % +
- - )} -
+ ); }; diff --git a/src/components/SwapInputBuy.tsx b/src/components/SwapInputBuy.tsx index 8f43fdf..ed2a878 100644 --- a/src/components/SwapInputBuy.tsx +++ b/src/components/SwapInputBuy.tsx @@ -51,7 +51,7 @@ const SwapInputBuy = ( value={stringBuy} disabled placeholder='0' - className='border-none text-3xl sm:text-4xl font-light outline-none flex-1 p-0 h-auto focus-visible:ring-0 no-spinner bg-transparent' + className='border-none text-5xl sm:text-6xl font-semibold text-muted-foreground outline-none flex-1 p-0 h-auto focus-visible:ring-0 no-spinner bg-transparent placeholder:text-muted-foreground' /> ); }, [stringBuy]); diff --git a/src/components/SwapPairs.tsx b/src/components/SwapPairs.tsx index 88a59f9..b8de0ef 100644 --- a/src/components/SwapPairs.tsx +++ b/src/components/SwapPairs.tsx @@ -5,48 +5,19 @@ export const SwapPairs = ( ); diff --git a/src/index.css b/src/index.css index 7e64e30..c4449ba 100644 --- a/src/index.css +++ b/src/index.css @@ -40,7 +40,7 @@ --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --footer: 0, 0%, 98%; - --bg-dots: 130, 15%, 92.2%; + --bg-dots: 130, 10%, 96%; } .dark { diff --git a/src/pages/Swap.tsx b/src/pages/Swap.tsx index dfac49a..8b93cef 100644 --- a/src/pages/Swap.tsx +++ b/src/pages/Swap.tsx @@ -251,121 +251,106 @@ function Swap() {
-
-
- {/* Sell Card */} - - -

Swap Tokens

-
-
-
Sell
- +
+
+

Swap Tokens

+ + {/* Settings gear - top right, relative so dropdown aligns to full width */} +
+ +
+ + {/* Sell Card — white bg, border, no shadow */} + + +
Sell
+
+ onInputChange(e.target.value)} + placeholder='0' + aria-errormessage={sellInputError} + className={`border-none bg-transparent text-5xl sm:text-6xl font-semibold text-foreground outline-none flex-1 p-0 h-auto focus-visible:ring-0 no-spinner placeholder:text-foreground/70 ${ + sellInputError + ? 'text-orange-600 placeholder:text-destructive/50' + : '' + }`} + /> +
+ setAsset('sell', id)} + excludeFaucetIdBech32={selectedAssetBuy?.faucetIdBech32} + />
- - -
- onInputChange(e.target.value)} - placeholder='0' - aria-errormessage={sellInputError} - className={`border-none text-3xl sm:text-4xl font-light outline-none flex-1 p-0 h-auto focus-visible:ring-0 no-spinner ${ +
+ {sellInputError && ( +

+ {sellInputError} +

+ )} +
+
+
+ {rawSell > BigInt(0) && selectedAssetSell + ? ( + <> + $ + + ) + : '$0'} +
+ {accountId && balanceSell !== null && balanceSell !== undefined + && ( +
- {sellInputError && ( -
-

- {sellInputError} -

-
+ > + {balanceSellFmt} {selectedAssetSell?.symbol ?? ''} + )} -
-
- {rawSell > BigInt(0) && selectedAssetSell && ( - <> - = $ - - - )} -
- {accountId && balanceSell !== null && balanceSell !== undefined - && ( -
- -
- )} -
- - +
{/* Swap Pairs */} -
- +
+
+ +
- {/* Buy Card */} - - -
-
Buy
- - -
- -
- setAsset('buy', id)} - excludeFaucetIdBech32={selectedAssetSell?.faucetIdBech32} - /> -
-
-
- {balancebuy !== null && balancebuy !== undefined && ( -
- {balanceBuyFmt} {selectedAssetBuy?.symbol ?? ''} -
- )} -
- - + {/* Buy Card — gray bg, no border, no shadow */} + + +
Sell
+
+ +
+ setAsset('buy', id)} + excludeFaucetIdBech32={selectedAssetSell?.faucetIdBech32} + /> +
{/* Main Action Button */} -
+
{connected ? ( ) : ( -
+
{connecting && ( )}
- +
)}
-

+

{selectedAssetBuy && selectedAssetSell ? ( @@ -432,12 +417,11 @@ function Swap() { ) : null}

- {/* Powered by MIDEN */} -
- {poweredByMiden} -
+
+ {poweredByMiden} +