Skip to content

fix: mobile ux audit and stellar flow responsive fixes #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mitch5000 wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix: mobile ux audit and stellar flow responsive fixes #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/ChainSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function ChainSwitcher() {
<select
value={chain}
onChange={(e) => setChain(e.target.value as Chain)}
className="h-8 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary focus:outline-none sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
className="h-11 appearance-none border border-outline-variant bg-surface px-3 py-1.5 pr-7 font-mono text-[10px] uppercase tracking-widest text-primary focus:border-primary focus:outline-none sm:h-9 sm:px-4 sm:py-2 sm:pr-8 sm:text-xs"
>
{chains.map((c) => (
<option key={c.id} value={c.id}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/CopyButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export function CopyButton({ text }: { text: string }) {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
}}
className="shrink-0 font-mono text-[10px] uppercase tracking-widest text-outline transition-colors hover:text-primary"
className="flex h-10 shrink-0 items-center px-2 font-mono text-[10px] uppercase tracking-widest text-outline transition-colors hover:text-primary active:bg-surface-bright"
>
{copied ? 'Copied' : 'Copy'}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ export function Header() {
<WalletConnect />
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="flex h-8 w-8 items-center justify-center text-outline transition-colors hover:text-on-surface-variant sm:hidden"
className="flex h-11 w-11 items-center justify-center text-outline transition-colors hover:text-on-surface-variant sm:hidden"
aria-label="Menu"
>
<svg
className="h-4 w-4"
className="h-5 w-5"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
Expand Down
14 changes: 7 additions & 7 deletions src/components/StellarReceive.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,22 +269,22 @@ function StellarStealthRow({
</div>

{!withdrawHash && balance && parseFloat(balance) > 0 && (
<div className="flex flex-col gap-1.5">
<div className="flex flex-col gap-2">
<label className="font-mono text-[10px] uppercase tracking-widest text-outline">
Withdraw to
</label>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<input
type="text"
value={dest}
onChange={(e) => setDest(e.target.value)}
placeholder="Destination address (G...)"
className="h-10 flex-1 border border-outline-variant bg-surface px-3 font-mono text-xs text-primary placeholder:text-outline focus:border-primary"
className="h-11 flex-1 border border-outline-variant bg-surface px-3 font-mono text-[11px] text-primary placeholder:text-outline focus:border-primary sm:h-10 sm:text-xs"
/>
<button
onClick={handleWithdraw}
disabled={!dest || withdrawing}
className="h-10 bg-primary px-4 font-heading text-[10px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
className="h-11 bg-primary px-6 font-heading text-[11px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30 sm:h-10 sm:px-4 sm:text-[10px]"
>
{withdrawing ? '...' : 'Withdraw'}
</button>
Expand Down Expand Up @@ -543,7 +543,7 @@ export function StellarReceive() {
<button
onClick={deriveKeysFromWallet}
disabled={isDerivingKeys}
className="h-12 w-full bg-primary font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
className="h-12 w-full bg-primary font-heading text-[14px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30 sm:text-[13px]"
>
{isDerivingKeys ? 'Sign in wallet...' : 'Derive Keys'}
</button>
Expand Down Expand Up @@ -605,11 +605,11 @@ export function StellarReceive() {
)}
</div>

<div className="flex items-center justify-between">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<button
onClick={scanPayments}
disabled={isScanning}
className="h-12 bg-primary px-6 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
className="h-12 bg-primary px-8 font-heading text-[13px] font-semibold uppercase tracking-widest text-surface transition-colors hover:brightness-110 disabled:opacity-30"
>
{isScanning ? 'Scanning...' : 'Scan for Payments'}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/WalletConnect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { useChain } from '@/context/ChainContext';
import { useStellarWallet } from '@/context/StellarWalletContext';

const btnBase =
'bg-transparent border border-outline-variant px-3 py-1.5 font-heading text-[10px] uppercase tracking-widest text-primary transition-colors hover:bg-surface-bright disabled:opacity-50 sm:px-4 sm:py-2 sm:text-xs h-8 sm:h-9';
'bg-transparent border border-outline-variant px-3 py-1.5 font-heading text-[10px] uppercase tracking-widest text-primary transition-colors hover:bg-surface-bright disabled:opacity-50 sm:px-4 sm:py-2 sm:text-xs h-11 sm:h-9';
const btnConnected =
'bg-transparent border border-outline-variant px-3 py-1.5 font-mono text-[10px] text-primary transition-colors hover:bg-surface-bright sm:px-4 sm:py-2 sm:text-xs h-8 sm:h-9';
'bg-transparent border border-outline-variant px-3 py-1.5 font-mono text-[10px] text-primary transition-colors hover:bg-surface-bright sm:px-4 sm:py-2 sm:text-xs h-11 sm:h-9';

function HorizenButton() {
return (
Expand Down