Skip to content

#590 [Dashboard] Create Responsive View Layout for Mobile Screens #1

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
Gezziy wants to merge 11 commits into
base: main
Choose a base branch
from
Open

#590 [Dashboard] Create Responsive View Layout for Mobile Screens #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
987d3dd
feat(dashboard-design): create responsive view layout for mobile scre…
TochukwuJustice Jun 24, 2026
70eb36f
fix(ci): stabilize dashboard and rust checks
TochukwuJustice Jun 24, 2026
f02769d
fix(dashboard): align smoke test with sep24 flow
TochukwuJustice Jun 24, 2026
8e65d48
Merge branch 'main' into feature/issue-590-dashboard-create-responsiv…
Gezziy Jun 26, 2026
a69eadb
Merge remote-tracking branch 'upstream/main' into feature/issue-590-d…
TochukwuJustice Jun 26, 2026
ef7c980
Merge remote-tracking branch 'origin/feature/issue-590-dashboard-crea…
TochukwuJustice Jun 26, 2026
c8b9d6d
Resolve merge conflicts for PR #644
TochukwuJustice Jun 26, 2026
b7da933
fix(dashboard): stabilize browser smoke selector
TochukwuJustice Jun 26, 2026
8e894b2
fix(dashboard): exclude browser specs from vitest
TochukwuJustice Jun 26, 2026
74c71f8
Merge branch 'feature/issue-590-dashboard-create-responsive-view-la' …
TochukwuJustice Jun 26, 2026
4169fae
chore: refresh mergeability
TochukwuJustice Jun 26, 2026
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
55 changes: 33 additions & 22 deletions dashboard/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,14 +130,22 @@ const App = () => {
} as React.CSSProperties
}
>
{sidebarOpen && (
<button
type="button"
aria-label="Close navigation menu overlay"
className="fixed inset-0 z-40 bg-slate-950/70 backdrop-blur-sm lg:hidden"
onClick={() => setSidebarOpen(false)}
/>
)}
<aside
data-testid="sidebar"
id="main-sidebar"
aria-label="Main navigation"
className={`fixed inset-y-0 left-0 z-50 w-64 transform border-r border-slate-800 bg-card transition-transform duration-300 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:relative lg:translate-x-0`}
className={`fixed inset-y-0 left-0 z-50 w-[min(18rem,calc(100vw-2rem))] transform border-r border-slate-800 bg-card transition-transform duration-300 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'} lg:relative lg:w-64 lg:translate-x-0`}
>
<div className="p-6">
<div className="mb-10 flex items-center gap-3">
<div className="p-5 sm:p-6">
<div className="mb-8 flex items-center gap-3 sm:mb-10">
<LogoMark uiConfig={uiConfig} />
<div className="min-w-0">
<h1 className="truncate font-display text-xl font-bold tracking-tight">
Expand All @@ -154,7 +162,10 @@ const App = () => {
{menuItems.map((item) => (
<li key={item.id}>
<button
onClick={() => setActiveTab(item.id)}
onClick={() => {
setActiveTab(item.id);
setSidebarOpen(false);
}}
aria-current={activeTab === item.id ? 'page' : undefined}
className={`flex w-full items-center gap-3 rounded-lg px-4 py-3 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 ${
activeTab === item.id
Expand All @@ -171,7 +182,7 @@ const App = () => {
</nav>
</div>

<div className="absolute bottom-0 w-full border-t border-slate-800 p-6">
<div className="absolute bottom-0 w-full border-t border-slate-800 p-5 sm:p-6">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-slate-800" aria-hidden="true" />
<div className="flex-1 overflow-hidden">
Expand All @@ -189,18 +200,18 @@ const App = () => {
</aside>

<main className="flex min-w-0 flex-1 flex-col">
<header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-slate-800 bg-background/50 px-4 sm:px-6 lg:px-8 backdrop-blur-md">
<header className="sticky top-0 z-30 flex min-h-16 items-center justify-between gap-3 border-b border-slate-800 bg-background/80 px-3 py-3 backdrop-blur-md sm:px-6 lg:px-8">
<button
aria-label={sidebarOpen ? 'Close navigation menu' : 'Open navigation menu'}
aria-expanded={sidebarOpen}
aria-controls="main-sidebar"
className="lg:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded"
className="rounded p-2 -ml-2 lg:hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
onClick={() => setSidebarOpen(!sidebarOpen)}
>
{sidebarOpen ? <X aria-hidden="true" /> : <Menu aria-hidden="true" />}
</button>

<div className="flex items-center gap-4">
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 sm:gap-4">
<div
data-testid="backend-status"
className="hidden items-center gap-2 rounded-full border border-slate-700 bg-slate-900 px-3 py-1.5 md:flex"
Expand All @@ -226,23 +237,23 @@ const App = () => {
apiBaseUrl={apiBaseUrl}
onViewAll={() => setActiveTab('notifications')}
/>
<button className="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-900 px-4 py-2 transition-all hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50">
<button className="flex min-w-0 items-center gap-2 rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 transition-all hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 sm:px-4">
<Wallet size={18} aria-hidden="true" />
<span className="text-sm font-medium">Connect Wallet</span>
<span className="hidden text-sm font-medium sm:inline">Connect Wallet</span>
</button>
</div>
</header>

<section
className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8"
className="mx-auto w-full max-w-7xl px-3 py-5 sm:px-6 sm:py-8 lg:px-8"
aria-label={menuItems.find((m) => m.id === activeTab)?.label}
>
<div className="mb-8 flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
<div>
<h2 className="font-display text-3xl font-bold">
<div className="mb-6 flex flex-col gap-3 sm:mb-8 md:flex-row md:items-start md:justify-between">
<div className="min-w-0">
<h2 className="font-display text-2xl font-bold sm:text-3xl">
{menuItems.find((m) => m.id === activeTab)?.label}
</h2>
<p className="mt-1 text-slate-400">
<p className="mt-1 max-w-3xl text-sm leading-6 text-slate-400 sm:text-base">
{activeTab === 'dashboard' &&
'Manage anchor operations, branding, and flow requirements from a single backend-driven surface.'}
{activeTab === 'deposit' && 'Initiate a new on-ramp transaction via SEP-24.'}
Expand All @@ -257,7 +268,7 @@ const App = () => {
{loadingState === 'error' ? (
<div
data-testid="config-warning"
className="flex items-center gap-2 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-2 text-sm text-amber-200"
className="flex items-start gap-2 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-2 text-sm text-amber-200"
role="alert"
>
<AlertCircle size={16} aria-hidden="true" />
Expand Down Expand Up @@ -291,9 +302,9 @@ const App = () => {
)}
{activeTab === 'kyc' && <KycStatusView uiConfig={uiConfig} />}
{activeTab === 'settings' && (
<div className="grid grid-cols-1 gap-6 xl:grid-cols-[0.95fr_1.05fr]">
<div className="grid grid-cols-1 gap-5 sm:gap-6 xl:grid-cols-[0.95fr_1.05fr]">
<div className="space-y-6">
<div className="glass-card p-8">
<div className="glass-card p-5 sm:p-8">
<h3 className="mb-4 text-xl font-bold">Branding Configuration</h3>
<div className="space-y-6">
<div>
Expand Down Expand Up @@ -327,7 +338,7 @@ const App = () => {
<label htmlFor="primary-color-hex" className="mb-2 block text-sm font-medium text-slate-400">
Primary Color
</label>
<div className="flex gap-2">
<div className="flex min-w-0 gap-2">
<input
type="color"
value={uiConfig.primaryColor}
Expand All @@ -341,15 +352,15 @@ const App = () => {
value={uiConfig.primaryColor}
readOnly
aria-readonly="true"
className="input-field flex-1"
className="input-field min-w-0 flex-1"
/>
</div>
</div>
<div>
<label htmlFor="accent-color-hex" className="mb-2 block text-sm font-medium text-slate-400">
Accent Color
</label>
<div className="flex gap-2">
<div className="flex min-w-0 gap-2">
<input
type="color"
value={uiConfig.accentColor}
Expand All @@ -363,7 +374,7 @@ const App = () => {
value={uiConfig.accentColor}
readOnly
aria-readonly="true"
className="input-field flex-1"
className="input-field min-w-0 flex-1"
/>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions dashboard/src/components/AdminControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ export const AdminControls: React.FC<AdminControlsProps> = ({ apiBaseUrl }) => {
};

return (
<div className="glass-card p-8">
<h3 className="mb-4 text-xl font-bold text-slate-100 flex items-center gap-2">
<div className="glass-card p-5 sm:p-8">
<h3 className="mb-4 flex flex-col gap-2 text-xl font-bold text-slate-100 sm:flex-row sm:items-center">
<span>Admin Control Center</span>
<span className="rounded bg-rose-500/10 px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-rose-400 border border-rose-500/20">
<span className="w-fit rounded border border-rose-500/20 bg-rose-500/10 px-2 py-0.5 text-xs font-semibold uppercase tracking-wider text-rose-400">
Sensitive Actions
</span>
</h3>
Expand Down Expand Up @@ -133,7 +133,7 @@ export const AdminControls: React.FC<AdminControlsProps> = ({ apiBaseUrl }) => {

<div className="space-y-6">
{/* Switch Stellar Network */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 rounded-lg border border-slate-800 bg-slate-950/40 p-4">
<div className="flex flex-col gap-4 rounded-lg border border-slate-800 bg-slate-950/40 p-4 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-1">
<h4 className="font-semibold text-slate-200 flex items-center gap-2">
<Network size={16} className="text-primary" />
Expand All @@ -143,14 +143,14 @@ export const AdminControls: React.FC<AdminControlsProps> = ({ apiBaseUrl }) => {
Switches the blockchain environment that the anchor queries for ledger entries and indexes.
</p>
</div>
<div className="flex items-center gap-2 shrink-0">
<div className="flex min-w-0 shrink-0 items-center gap-2 sm:max-w-xs">
<label htmlFor="admin-network-select" className="sr-only">Select Stellar Network</label>
<select
id="admin-network-select"
value={network}
onChange={handleNetworkChangeInitiate}
disabled={loading}
className="input-field text-sm font-medium pr-8"
className="input-field w-full pr-8 text-sm font-medium"
>
<option value="TESTNET">TESTNET (Stellar Test Network)</option>
<option value="PUBLIC">PUBLIC (Stellar Main Network)</option>
Expand All @@ -160,7 +160,7 @@ export const AdminControls: React.FC<AdminControlsProps> = ({ apiBaseUrl }) => {
</div>

{/* Purge Job Queues */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 rounded-lg border border-slate-800 bg-slate-950/40 p-4">
<div className="flex flex-col gap-4 rounded-lg border border-slate-800 bg-slate-950/40 p-4 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-1">
<h4 className="font-semibold text-slate-200 flex items-center gap-2">
<Trash2 size={16} className="text-rose-400" />
Expand All @@ -174,7 +174,7 @@ export const AdminControls: React.FC<AdminControlsProps> = ({ apiBaseUrl }) => {
type="button"
onClick={() => setIsQueueModalOpen(true)}
disabled={loading}
className="flex items-center justify-center gap-1.5 rounded-lg border border-rose-500/30 bg-rose-500/10 px-4 py-2 text-sm font-medium text-rose-400 transition-all hover:bg-rose-500/25 disabled:opacity-40 shrink-0"
className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-rose-500/30 bg-rose-500/10 px-4 py-2 text-sm font-medium text-rose-400 transition-all hover:bg-rose-500/25 disabled:opacity-40 sm:w-auto sm:shrink-0"
>
Purge Queues
</button>
Expand Down
24 changes: 12 additions & 12 deletions dashboard/src/components/DashboardOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import { LogoMark } from './LogoMark';
import type { UiConfig } from '../types';

export const DashboardOverview = ({ uiConfig }: { uiConfig: UiConfig }) => (
<div className="space-y-6">
<div className="space-y-5 sm:space-y-6">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{[
{ label: 'Total Volume', value: '$128,430.00', change: '+12.5%' },
{ label: 'Active Deposits', value: '42', change: '+3' },
{ label: 'Pending Withdrawals', value: '18', change: '-2' },
].map((stat) => (
<div key={stat.label} className="glass-card p-6">
<div key={stat.label} className="glass-card p-4 sm:p-6">
<p className="text-sm text-slate-400">{stat.label}</p>
<div className="mt-2 flex items-end justify-between">
<h3 className="font-display text-2xl font-bold">{stat.value}</h3>
<h3 className="font-display text-xl font-bold sm:text-2xl">{stat.value}</h3>
<span
className={`text-xs ${stat.change.startsWith('+') ? 'text-emerald-400' : 'text-rose-400'}`}
aria-label={`Change: ${stat.change}`}
Expand All @@ -26,46 +26,46 @@ export const DashboardOverview = ({ uiConfig }: { uiConfig: UiConfig }) => (

<div className="grid grid-cols-1 gap-6 lg:grid-cols-[1.5fr_1fr]">
<div
className="glass-card flex h-64 items-center justify-center p-6"
className="glass-card flex h-52 items-center justify-center p-4 sm:h-64 sm:p-6"
role="img"
aria-label="Volume chart (placeholder)"
>
<p className="italic text-slate-500">Volume Chart Placeholder</p>
</div>
<div className="glass-card p-6">
<div className="glass-card p-4 sm:p-6">
<h3 className="font-display text-xl font-bold">Anchor Branding</h3>
<div className="mt-5 flex items-center gap-4">
<LogoMark uiConfig={uiConfig} />
<div>
<p className="font-medium">{uiConfig.brandName}</p>
<p className="text-sm text-slate-500">
<div className="min-w-0">
<p className="truncate font-medium">{uiConfig.brandName}</p>
<p className="truncate text-sm text-slate-500">
{uiConfig.supportEmail ?? 'Support contact not configured'}
</p>
</div>
</div>
<div className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2">
<div className="rounded-lg border border-slate-800 bg-slate-950/50 p-3">
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">Primary</p>
<div className="mt-3 flex items-center gap-3">
<div className="mt-3 flex min-w-0 items-center gap-3">
<span
className="h-6 w-6 rounded-full border border-white/10"
style={{ backgroundColor: uiConfig.primaryColor }}
aria-label={`Primary color: ${uiConfig.primaryColor}`}
/>
<span className="font-mono text-sm" aria-hidden="true">
<span className="min-w-0 truncate font-mono text-sm" aria-hidden="true">
{uiConfig.primaryColor}
</span>
</div>
</div>
<div className="rounded-lg border border-slate-800 bg-slate-950/50 p-3">
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">Accent</p>
<div className="mt-3 flex items-center gap-3">
<div className="mt-3 flex min-w-0 items-center gap-3">
<span
className="h-6 w-6 rounded-full border border-white/10"
style={{ backgroundColor: uiConfig.accentColor }}
aria-label={`Accent color: ${uiConfig.accentColor}`}
/>
<span className="font-mono text-sm" aria-hidden="true">
<span className="min-w-0 truncate font-mono text-sm" aria-hidden="true">
{uiConfig.accentColor}
</span>
</div>
Expand Down
Loading
Loading