Skip to content

Commit 5e2ca6a

Browse files
geraldarthurdavisgeraldarthurdavis
committed
V48 (implementation-only): Orange theme for Required wallet section
Unify section 1 chrome: address input, state panel, meta strip, badges, and secondary actions use bitcoin-orange borders/fills instead of emerald or neutral white edges.
1 parent 781c6c5 commit 5e2ca6a

2 files changed

Lines changed: 95 additions & 30 deletions

File tree

‎uapi/components/auxillaries/AuxillariesWalletConnectionPanel/AuxillariesWalletConnectionPanel.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default function AuxillariesWalletConnectionPanel({
139139
<span
140140
className={`rounded-none border px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] ${
141141
hasWalletIdentity
142-
? 'border-emerald-300/26 bg-emerald-400/12 text-emerald-100'
142+
? 'border-orange-300/40 bg-orange-400/16 text-orange-50'
143143
: 'border-orange-300/26 bg-orange-400/12 text-orange-100'
144144
}`}
145145
>
@@ -183,7 +183,7 @@ export default function AuxillariesWalletConnectionPanel({
183183
type="button"
184184
onClick={refreshBitcoinWalletProviders}
185185
disabled={walletAuthStatus === 'requesting'}
186-
className="inline-flex items-center justify-center rounded-none border border-white/12 bg-white/6 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/66 transition hover:border-white/24 hover:bg-white/10 disabled:cursor-wait disabled:opacity-45"
186+
className="wallet-section-secondary-button inline-flex items-center justify-center rounded-none border px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] transition disabled:cursor-wait disabled:opacity-45"
187187
>
188188
Rescan wallets
189189
</button>
@@ -193,7 +193,7 @@ export default function AuxillariesWalletConnectionPanel({
193193
data-testid="wallet-disconnect-bitcode"
194194
onClick={handleDisconnectWallet}
195195
disabled={walletAuthStatus === 'requesting'}
196-
className="inline-flex items-center justify-center rounded-none border border-rose-300/24 bg-rose-400/10 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-rose-100 transition hover:border-rose-300/42 hover:bg-rose-400/18 disabled:cursor-wait disabled:opacity-45"
196+
className="inline-flex items-center justify-center rounded-none border border-rose-300/28 bg-rose-400/10 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-rose-100 transition hover:border-rose-300/45 hover:bg-rose-400/18 disabled:cursor-wait disabled:opacity-45"
197197
>
198198
Disconnect wallet
199199
</button>
@@ -202,29 +202,29 @@ export default function AuxillariesWalletConnectionPanel({
202202
type="button"
203203
onClick={handleStageBitcoinAddress}
204204
disabled={walletAuthStatus === 'requesting' || !walletAddress.trim()}
205-
className="inline-flex items-center justify-center rounded-none border border-white/14 bg-white/7 px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-white/76 transition hover:border-white/24 hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-45"
205+
className="wallet-section-secondary-button inline-flex items-center justify-center rounded-none border px-4 py-2.5 text-[11px] font-semibold uppercase tracking-[0.18em] transition disabled:cursor-not-allowed disabled:opacity-45"
206206
>
207207
Stage Bitcoin address
208208
</button>
209209
</div>
210210
{walletAuthError ? (
211211
<div
212212
role="alert"
213-
className="mt-3 border border-amber-300/24 bg-amber-400/10 px-4 py-3 text-sm leading-6 text-amber-100"
213+
className="mt-3 border border-orange-300/28 bg-orange-400/10 px-4 py-3 text-sm leading-6 text-orange-50"
214214
>
215215
<p>{walletAuthError}</p>
216216
{pendingAuthorizeUrl ? (
217217
<a
218218
href={pendingAuthorizeUrl}
219-
className="mt-2 inline-flex items-center border border-amber-300/34 bg-amber-400/14 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-50 transition hover:border-amber-300/54 hover:bg-amber-400/22"
219+
className="mt-2 inline-flex items-center border border-orange-300/40 bg-orange-400/14 px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-orange-50 transition hover:border-orange-300/58 hover:bg-orange-400/22"
220220
>
221221
Open Bitcoin authentication manually
222222
</a>
223223
) : null}
224224
</div>
225225
) : null}
226-
<div className="mt-3 rounded-none border border-white/10 bg-black/18 px-4 py-3 text-sm leading-6 text-white/68">
227-
<span className="font-semibold text-white/82">
226+
<div className="wallet-section-meta-panel mt-3 rounded-none border px-4 py-3 text-sm leading-6 text-orange-50/72">
227+
<span className="font-semibold text-orange-50/90">
228228
{walletProviderScanStatus === 'checking'
229229
? 'Checking installed Bitcoin wallets'
230230
: walletProviderOptions.length > 0
@@ -234,7 +234,7 @@ export default function AuxillariesWalletConnectionPanel({
234234
{walletAuthNotice ? (
235235
<span className="ml-2 text-orange-100/82">{walletAuthNotice}</span>
236236
) : walletProviderScanStatus === 'none' ? (
237-
<span className="ml-2">
237+
<span className="ml-2 text-orange-100/70">
238238
Xverse or Leather must be unlocked, enabled on this site, and set to Testnet4 for this QA pass.
239239
</span>
240240
) : null}
@@ -253,11 +253,11 @@ export default function AuxillariesWalletConnectionPanel({
253253
/>
254254
<div className="input-focus-indicator"></div>
255255
</div>
256-
<div className="rounded-none border border-white/10 bg-black/22 p-4">
257-
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-white/58">
256+
<div className="wallet-section-state-panel rounded-none border p-4">
257+
<p className="wallet-section-state-kicker text-xs font-semibold uppercase tracking-[0.18em]">
258258
Current wallet state
259259
</p>
260-
<p className="mt-2 text-sm font-medium text-white">
260+
<p className="mt-2 text-sm font-medium text-orange-50">
261261
{walletAddress
262262
? walletBindingStatus === 'verified'
263263
? 'Verified Bitcoin signer'
@@ -267,38 +267,38 @@ export default function AuxillariesWalletConnectionPanel({
267267
: 'No Bitcoin wallet connected'}
268268
</p>
269269
{walletBoundAt ? (
270-
<p className="mt-1 text-xs text-white/54">
270+
<p className="mt-1 text-xs text-orange-100/55">
271271
Bound {new Date(walletBoundAt).toLocaleString()}
272272
</p>
273273
) : null}
274-
<dl className="mt-3 grid gap-2 text-xs leading-5 text-white/66">
274+
<dl className="mt-3 grid gap-2 text-xs leading-5 text-orange-50/70">
275275
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
276-
<dt className="text-white/42">Provider</dt>
277-
<dd className="min-w-0 break-words text-white/86">{walletReadout.providerLabel}</dd>
276+
<dt className="text-orange-100/45">Provider</dt>
277+
<dd className="min-w-0 break-words text-orange-50/90">{walletReadout.providerLabel}</dd>
278278
</div>
279279
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
280-
<dt className="text-white/42">Network</dt>
281-
<dd className="min-w-0 break-words text-white/80">{walletReadout.network ?? 'Not provided'}</dd>
280+
<dt className="text-orange-100/45">Network</dt>
281+
<dd className="min-w-0 break-words text-orange-50/84">{walletReadout.network ?? 'Not provided'}</dd>
282282
</div>
283283
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
284-
<dt className="text-white/42">Auth address</dt>
285-
<dd className="min-w-0 break-all text-white/80">{formatWalletReadout(walletReadout.authAddress)}</dd>
284+
<dt className="text-orange-100/45">Auth address</dt>
285+
<dd className="min-w-0 break-all text-orange-50/84">{formatWalletReadout(walletReadout.authAddress)}</dd>
286286
</div>
287287
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
288-
<dt className="text-white/42">Payment</dt>
289-
<dd className="min-w-0 break-all text-white/80">{formatWalletReadout(walletReadout.paymentAddress)}</dd>
288+
<dt className="text-orange-100/45">Payment</dt>
289+
<dd className="min-w-0 break-all text-orange-50/84">{formatWalletReadout(walletReadout.paymentAddress)}</dd>
290290
</div>
291291
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
292-
<dt className="text-white/42">Address type</dt>
293-
<dd className="min-w-0 break-words text-white/80">{walletReadout.addressType ?? 'Not provided'}</dd>
292+
<dt className="text-orange-100/45">Address type</dt>
293+
<dd className="min-w-0 break-words text-orange-50/84">{walletReadout.addressType ?? 'Not provided'}</dd>
294294
</div>
295295
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
296-
<dt className="text-white/42">Proof</dt>
297-
<dd className="min-w-0 break-words text-white/80">{walletReadout.proofKind ?? 'Not provided'}</dd>
296+
<dt className="text-orange-100/45">Proof</dt>
297+
<dd className="min-w-0 break-words text-orange-50/84">{walletReadout.proofKind ?? 'Not provided'}</dd>
298298
</div>
299299
<div className="grid grid-cols-[6.75rem_minmax(0,1fr)] gap-2">
300-
<dt className="text-white/42">Persistence</dt>
301-
<dd className="min-w-0 break-words text-white/80">{walletReadout.persistence ?? 'wallet'}</dd>
300+
<dt className="text-orange-100/45">Persistence</dt>
301+
<dd className="min-w-0 break-words text-orange-50/84">{walletReadout.persistence ?? 'wallet'}</dd>
302302
</div>
303303
</dl>
304304
</div>

‎uapi/styles/auxillaries-bitcode.css‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -892,11 +892,76 @@
892892
}
893893

894894
.wallet-required-section--pending {
895-
--wallet-section-rest-border: rgba(251, 146, 60, 0.36);
895+
--wallet-section-rest-border: rgba(251, 146, 60, 0.42);
896896
}
897897

898898
.wallet-required-section--connected {
899-
--wallet-section-rest-border: rgba(103, 254, 183, 0.34);
899+
/* Stay in bitcoin-orange family when connected (not emerald). */
900+
--wallet-section-rest-border: rgba(251, 146, 60, 0.55);
901+
}
902+
903+
/*
904+
* Section 1. Required wallet — full orange theme for nested chrome.
905+
* Global enterprise/form-input styles default to emerald; override here.
906+
*/
907+
.wallet-required-section .orbitals-users-input-container.enterprise,
908+
.wallet-required-section .orbitals-users-input-container {
909+
background: rgba(28, 18, 12, 0.72) !important;
910+
border: 1px solid rgba(251, 146, 60, 0.32) !important;
911+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
912+
}
913+
914+
.wallet-required-section .form-input {
915+
color: rgba(255, 247, 237, 0.92) !important;
916+
caret-color: rgba(251, 146, 60, 0.9);
917+
}
918+
919+
.wallet-required-section .form-input::placeholder {
920+
color: rgba(253, 186, 116, 0.45) !important;
921+
}
922+
923+
.wallet-required-section .form-input:focus {
924+
border-color: transparent !important;
925+
outline: none !important;
926+
box-shadow: none !important;
927+
}
928+
929+
.wallet-required-section .input-focus-indicator {
930+
background: linear-gradient(
931+
90deg,
932+
transparent,
933+
rgba(251, 146, 60, 0.85),
934+
rgba(254, 215, 170, 0.95),
935+
rgba(251, 146, 60, 0.85),
936+
transparent
937+
) !important;
938+
box-shadow: 0 0 12px rgba(251, 146, 60, 0.35) !important;
939+
}
940+
941+
.wallet-required-section .wallet-section-secondary-button {
942+
border-color: rgba(251, 146, 60, 0.28);
943+
background: rgba(251, 146, 60, 0.08);
944+
color: rgba(255, 237, 213, 0.88);
945+
}
946+
947+
.wallet-required-section .wallet-section-secondary-button:hover:not(:disabled) {
948+
border-color: rgba(251, 146, 60, 0.48);
949+
background: rgba(251, 146, 60, 0.14);
950+
color: rgba(255, 247, 237, 0.96);
951+
}
952+
953+
.wallet-required-section .wallet-section-meta-panel {
954+
border-color: rgba(251, 146, 60, 0.22);
955+
background: rgba(20, 12, 8, 0.55);
956+
}
957+
958+
.wallet-required-section .wallet-section-state-panel {
959+
border-color: rgba(251, 146, 60, 0.26);
960+
background: rgba(22, 14, 10, 0.62);
961+
}
962+
963+
.wallet-required-section .wallet-section-state-kicker {
964+
color: rgba(253, 186, 116, 0.72);
900965
}
901966

902967
/*

0 commit comments

Comments
 (0)