pezkuwichain/pwap
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pwap.git synced 2026-06-13 19:11:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve DEX page mobile UI — smaller back button, taller chart, compact swap card

Browse Source 
- Back to Home button: smaller padding/font on mobile, pinned to corner
- PriceChart: increase height to 280px, stack header vertically on mobile
- TokenSwap: reduce padding/gaps/fonts on mobile, fix double-colon in balance text
This commit is contained in:
Kurdistan Tech Ministry
2026-02-24 23:48:17 +03:00
parent 385288dae3
commit 25754d2224
3 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/AppLayout.tsx
+2 -2
View File
@@ -554,7 +554,7 @@ const AppLayout: React.FC = () => {
{(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showMultiSig || showEducation || showP2P) && ( {(showDEX || showProposalWizard || showDelegation || showForum || showModeration || showTreasury || showStaking || showMultiSig || showEducation || showP2P) && (
<div className="fixed bottom-8 right-8 z-50"> <div className="fixed bottom-4 right-4 sm:bottom-8 sm:right-8 z-50">
<button <button
onClick={() => { onClick={() => {
setShowDEX(false); setShowDEX(false);
@@ -568,7 +568,7 @@ const AppLayout: React.FC = () => {
setShowEducation(false); setShowEducation(false);
setShowP2P(false); setShowP2P(false);
}} }}
className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2 transition-all" className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 sm:px-6 sm:py-3 text-sm sm:text-base rounded-full shadow-lg flex items-center gap-2 transition-all"
> >
{`← ${t('common.backToHome')}`} {`← ${t('common.backToHome')}`}
</button> </button>
web/src/components/TokenSwap.tsx
+12 -12
View File
@@ -867,7 +867,7 @@ const TokenSwap = () => {
} }
return ( return (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
{/* Kurdistan Sun Animation Overlay during swap (only after confirm dialog is closed) */} {/* Kurdistan Sun Animation Overlay during swap (only after confirm dialog is closed) */}
{isSwapping && !showConfirm && ( {isSwapping && !showConfirm && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
@@ -890,9 +890,9 @@ const TokenSwap = () => {
/> />
)} )}
<Card className="p-6"> <Card className="p-3 sm:p-6">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-3 sm:mb-6">
<h2 className="text-2xl font-bold">{t('tokenSwap.tokenSwap')}</h2> <h2 className="text-lg sm:text-2xl font-bold">{t('tokenSwap.tokenSwap')}</h2>
<Button variant="ghost" size="icon" onClick={() => setShowSettings(true)}> <Button variant="ghost" size="icon" onClick={() => setShowSettings(true)}>
<Settings className="h-5 w-5" /> <Settings className="h-5 w-5" />
</Button> </Button>
@@ -908,11 +908,11 @@ const TokenSwap = () => {
)} )}
<div className="space-y-4"> <div className="space-y-4">
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4"> <div className="bg-gray-800 border border-gray-700 rounded-lg p-3 sm:p-4">
<div className="flex justify-between mb-2"> <div className="flex justify-between mb-2">
<span className="text-sm text-gray-400">{t('tokenSwap.from')}</span> <span className="text-sm text-gray-400">{t('tokenSwap.from')}</span>
<span className="text-sm text-gray-400"> <span className="text-sm text-gray-400">
{t('common.balance')}: {fromBalance} {getTokenDisplayName(fromToken)} {t('common.balance')} {fromBalance} {getTokenDisplayName(fromToken)}
</span> </span>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
@@ -921,7 +921,7 @@ const TokenSwap = () => {
value={fromAmount} value={fromAmount}
onChange={(e) => setFromAmount(e.target.value)} onChange={(e) => setFromAmount(e.target.value)}
placeholder="Amount" placeholder="Amount"
className="text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50" className="text-lg sm:text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
disabled={!selectedAccount} disabled={!selectedAccount}
/> />
<Select <Select
@@ -936,7 +936,7 @@ const TokenSwap = () => {
}} }}
disabled={!selectedAccount} disabled={!selectedAccount}
> >
<SelectTrigger className="min-w-[140px] border-gray-600 hover:border-gray-500"> <SelectTrigger className="min-w-[100px] sm:min-w-[140px] border-gray-600 hover:border-gray-500">
<SelectValue> <SelectValue>
{(() => { {(() => {
const token = AVAILABLE_TOKENS.find(t => t.symbol === fromToken); const token = AVAILABLE_TOKENS.find(t => t.symbol === fromToken);
@@ -979,11 +979,11 @@ const TokenSwap = () => {
</Button> </Button>
</div> </div>
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4"> <div className="bg-gray-800 border border-gray-700 rounded-lg p-3 sm:p-4">
<div className="flex justify-between mb-2"> <div className="flex justify-between mb-2">
<span className="text-sm text-gray-400">{t('tokenSwap.to')}</span> <span className="text-sm text-gray-400">{t('tokenSwap.to')}</span>
<span className="text-sm text-gray-400"> <span className="text-sm text-gray-400">
{t('common.balance')}: {toBalance} {getTokenDisplayName(toToken)} {t('common.balance')} {toBalance} {getTokenDisplayName(toToken)}
</span> </span>
</div> </div>
<div className="flex gap-3"> <div className="flex gap-3">
@@ -992,7 +992,7 @@ const TokenSwap = () => {
value={toAmount} value={toAmount}
readOnly readOnly
placeholder="Amount" placeholder="Amount"
className="text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50" className="text-lg sm:text-2xl font-bold border-0 bg-transparent text-white placeholder:text-gray-500 placeholder:opacity-50"
/> />
<Select <Select
value={toToken} value={toToken}
@@ -1006,7 +1006,7 @@ const TokenSwap = () => {
}} }}
disabled={!selectedAccount} disabled={!selectedAccount}
> >
<SelectTrigger className="min-w-[140px] border-gray-600 hover:border-gray-500"> <SelectTrigger className="min-w-[100px] sm:min-w-[140px] border-gray-600 hover:border-gray-500">
<SelectValue> <SelectValue>
{(() => { {(() => {
const token = AVAILABLE_TOKENS.find(t => t.symbol === toToken); const token = AVAILABLE_TOKENS.find(t => t.symbol === toToken);
web/src/components/trading/PriceChart.tsx
+3 -3
View File
@@ -89,13 +89,13 @@ export const PriceChart: React.FC<PriceChartProps> = ({ fromToken, toToken, curr
return ( return (
<Card className="p-4 bg-gray-900 border-gray-800"> <Card className="p-4 bg-gray-900 border-gray-800">
<div className="flex justify-between items-center mb-4"> <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 mb-4">
<div> <div>
<div className="text-sm text-gray-400 mb-1"> <div className="text-sm text-gray-400 mb-1">
{t('priceChart.label', { from: getDisplayName(fromToken), to: getDisplayName(toToken) })} {t('priceChart.label', { from: getDisplayName(fromToken), to: getDisplayName(toToken) })}
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="text-2xl font-bold text-white"> <span className="text-xl sm:text-2xl font-bold text-white">
${currentPrice.toFixed(4)} ${currentPrice.toFixed(4)}
</span> </span>
<div className={`flex items-center gap-1 text-sm font-semibold ${ <div className={`flex items-center gap-1 text-sm font-semibold ${
@@ -117,7 +117,7 @@ export const PriceChart: React.FC<PriceChartProps> = ({ fromToken, toToken, curr
</Tabs> </Tabs>
</div> </div>
<ResponsiveContainer width="100%" height={200}> <ResponsiveContainer width="100%" height={280}>
<AreaChart data={chartData}> <AreaChart data={chartData}>
<defs> <defs>
<linearGradient id={`gradient-${isPositive ? 'green' : 'red'}`} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={`gradient-${isPositive ? 'green' : 'red'}`} x1="0" y1="0" x2="0" y2="1">