Skip to content

Commit e8aa6e3

Browse files
AdwaitbytesAdwaitbytes
committed
Update NetworkSwitcher: Apply new brand colors and modernize UI
1 parent 425888e commit e8aa6e3

1 file changed

Lines changed: 23 additions & 23 deletions

File tree

‎demo/src/components/NetworkSwitcher.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,21 @@ export function NetworkSwitcher({ onNetworkChange, compact = false, isDark = tru
4949
<div className="relative">
5050
<button
5151
onClick={() => setIsOpen(!isOpen)}
52-
className={`flex items-center gap-2 px-3 py-2 text-xs font-bold transition-colors ${
52+
className={`flex items-center gap-2 px-3 py-1.5 text-xs font-bold rounded-lg transition-colors ${
5353
currentNet === "mainnet"
54-
? "bg-green-500/20 text-green-400 border border-green-500/30"
55-
: "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30"
54+
? "bg-[#00FF88]/10 text-[#00FF88]"
55+
: "bg-[#0066FF]/10 text-[#0066FF]"
5656
}`}
5757
>
58-
<Globe className="w-3 h-3" />
58+
<div className={`w-2 h-2 rounded-full ${currentNet === "mainnet" ? "bg-[#00FF88]" : "bg-[#0066FF]"} animate-pulse`} />
5959
{config.name.toUpperCase()}
6060
<ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? "rotate-180" : ""}`} />
6161
</button>
6262

6363
{isOpen && (
6464
<>
6565
<div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
66-
<div className={`absolute right-0 top-full mt-2 z-50 min-w-[180px] border-2 ${isDark ? "bg-[#0A0A0A] border-white/20" : "bg-white border-black/20"}`}>
66+
<div className={`absolute right-0 top-full mt-2 z-50 min-w-[180px] rounded-lg overflow-hidden border ${isDark ? "bg-[#0A0A0A] border-white/10" : "bg-white border-black/10"} shadow-xl`}>
6767
{(Object.keys(NETWORKS) as NetworkType[]).map((net) => {
6868
const netConfig = NETWORKS[net];
6969
const isSelected = net === currentNet;
@@ -73,20 +73,20 @@ export function NetworkSwitcher({ onNetworkChange, compact = false, isDark = tru
7373
key={net}
7474
onClick={() => handleNetworkChange(net)}
7575
className={`w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors ${
76-
isDark ? "hover:bg-white/10" : "hover:bg-black/10"
77-
} ${isSelected ? (isDark ? "bg-white/10" : "bg-black/10") : ""}`}
76+
isDark ? "hover:bg-white/5" : "hover:bg-black/5"
77+
} ${isSelected ? (isDark ? "bg-white/5" : "bg-black/5") : ""}`}
7878
>
7979
<div className="flex items-center gap-2">
8080
<div
8181
className={`w-2 h-2 rounded-full ${
82-
net === "mainnet" ? "bg-green-500" : "bg-yellow-500"
82+
net === "mainnet" ? "bg-[#00FF88]" : "bg-[#0066FF]"
8383
}`}
8484
/>
8585
<span className={`font-bold ${isDark ? "text-white" : "text-black"}`}>
8686
{netConfig.name}
8787
</span>
8888
</div>
89-
{isSelected && <Check className="w-4 h-4 text-[#00FF88]" />}
89+
{isSelected && <Check className="w-4 h-4 text-[#0066FF]" />}
9090
</button>
9191
);
9292
})}
@@ -99,7 +99,7 @@ export function NetworkSwitcher({ onNetworkChange, compact = false, isDark = tru
9999
}
100100

101101
return (
102-
<div className={`border-2 ${isDark ? "border-white/20 bg-black/30" : "border-black/20 bg-white/50"} p-4`}>
102+
<div className={`rounded-xl border ${isDark ? "border-white/10 bg-white/5" : "border-black/10 bg-black/5"} p-4`}>
103103
<div className="flex items-center justify-between mb-3">
104104
<h3 className={`font-bold text-sm ${isDark ? "text-white/60" : "text-black/60"}`}>NETWORK</h3>
105105
<Globe className={`w-4 h-4 ${isDark ? "text-white/40" : "text-black/40"}`} />
@@ -114,20 +114,20 @@ export function NetworkSwitcher({ onNetworkChange, compact = false, isDark = tru
114114
<button
115115
key={net}
116116
onClick={() => handleNetworkChange(net)}
117-
className={`w-full flex items-center justify-between p-3 border-2 transition-all cursor-pointer ${
117+
className={`w-full flex items-center justify-between p-3 rounded-lg border transition-all cursor-pointer ${
118118
isSelected
119119
? net === "mainnet"
120-
? "border-green-500 bg-green-500/10"
121-
: "border-yellow-500 bg-yellow-500/10"
120+
? "border-[#00FF88]/50 bg-[#00FF88]/10"
121+
: "border-[#0066FF]/50 bg-[#0066FF]/10"
122122
: isDark
123-
? "border-white/20 hover:border-white/40"
124-
: "border-black/20 hover:border-black/40"
123+
? "border-white/10 hover:border-white/20 hover:bg-white/5"
124+
: "border-black/10 hover:border-black/20 hover:bg-black/5"
125125
}`}
126126
>
127127
<div className="flex items-center gap-3">
128128
<div
129129
className={`w-3 h-3 rounded-full ${
130-
net === "mainnet" ? "bg-green-500" : "bg-yellow-500"
130+
net === "mainnet" ? "bg-[#00FF88]" : "bg-[#0066FF]"
131131
}`}
132132
/>
133133
<div className="text-left">
@@ -139,14 +139,14 @@ export function NetworkSwitcher({ onNetworkChange, compact = false, isDark = tru
139139
</p>
140140
</div>
141141
</div>
142-
{isSelected && <Check className="w-5 h-5 text-[#00FF88]" />}
142+
{isSelected && <Check className="w-5 h-5 text-[#0066FF]" />}
143143
</button>
144144
);
145145
})}
146146
</div>
147147

148148
{currentNet === "mainnet" && (
149-
<div className="mt-3 p-2 bg-green-500/10 border border-green-500/30 text-green-400 text-xs">
149+
<div className="mt-3 p-2 rounded-lg bg-[#00FF88]/10 border border-[#00FF88]/30 text-[#00FF88] text-xs">
150150
<div className="flex items-start gap-2">
151151
<AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" />
152152
<span>You are on mainnet. Transactions use real XLM.</span>
@@ -168,15 +168,15 @@ export function NetworkBadge({ isDark = true }: { isDark?: boolean }) {
168168

169169
return (
170170
<span
171-
className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-bold ${
171+
className={`inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-bold rounded-full ${
172172
network === "mainnet"
173-
? "bg-green-500/20 text-green-400 border border-green-500/30"
174-
: "bg-yellow-500/20 text-yellow-400 border border-yellow-500/30"
173+
? "bg-[#00FF88]/10 text-[#00FF88]"
174+
: "bg-[#0066FF]/10 text-[#0066FF]"
175175
}`}
176176
>
177177
<span
178-
className={`w-1.5 h-1.5 rounded-full ${
179-
network === "mainnet" ? "bg-green-500" : "bg-yellow-500"
178+
className={`w-1.5 h-1.5 rounded-full animate-pulse ${
179+
network === "mainnet" ? "bg-[#00FF88]" : "bg-[#0066FF]"
180180
}`}
181181
/>
182182
{network.toUpperCase()}

0 commit comments

Comments
 (0)