marchon/master-zapier-plan-draft
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Restyle staff and console UIs; add UI-Docs walkthrough and review PDF.
Some checks are pending
offline / test (push) Waiting to run
Details

Browse source 
Match CS/sales/accounting/access-staff to the portal indigo system with
dollar amounts, skip links, and empty states. Fleet replica actions move
into overflow menus, roles become chips, Docs become cards, and the
header copy reflects the 0.0.0.0 bind. Simulator uses the same shell
(orange only for faults). Portal API keys are masked; admin customers
edit in a drawer. Catalog uses system-ui. New UI-Docs repo holds
screenshots, usage notes, and UI-REVIEW.pdf.
This commit is contained in:
George Lambert 2026-09-11 18:01:33 -04:00
parent ddf772454b
commit cb07f5b321
72 changed files with 3284 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/zappier/admin/index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Zappier Admin</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%234f46e5'/%3E%3C/svg%3E"/>
<style>
:root {
--bg: #f4f5fb;
@ -100,8 +101,26 @@
color: var(--muted);
cursor: pointer;
}
nav button { min-height: 40px; }
nav button:hover { background: var(--bg); color: var(--ink); }
nav button.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
nav button:focus-visible, #logout:focus-visible, button.btn:focus-visible, a:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.skip { position:absolute; left:-999px; }
.skip:focus { left:1rem; top:1rem; z-index:40; background:#fff; color:var(--accent); padding:.5rem .9rem; border-radius:8px; }
.empty { text-align:center; padding:1.6rem 1rem; color:var(--muted); }
.empty svg { display:block; margin:0 auto .6rem; }
.empty h3 { margin:0 0 .25rem; color:var(--ink); font-size:1rem; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(23,26,38,.35); z-index:20; }
.drawer {
position:fixed; top:0; right:0; height:100vh; width:min(420px,100%);
background:#fff; box-shadow:-8px 0 32px rgba(23,26,38,.12); z-index:21;
padding:1.4rem 1.35rem 2rem; overflow:auto;
}
.drawer h2 { margin:0 0 .2rem; }
.drawer label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:.85rem 0 .25rem; }
.drawer input, .drawer select { width:100%; }
aside .spacer { flex: 1; }
#logout {
border: 1px solid var(--line); background: none; border-radius: 8px;
@ -216,6 +235,7 @@
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<section id="login">
<form class="card" id="login-form">
<h1>Zappier Admin</h1>
@ -245,7 +265,7 @@
<div class="spacer"></div>
<button id="logout">Sign out</button>
</aside>
<main>
<main id="main">
<section id="endpoints"></section>
<section id="tiers" hidden></section>
<section id="customers" hidden></section>
@ -256,6 +276,7 @@
<section id="users" hidden></section>
</main>
</div>
<div id="drawer-root"></div>
<p id="status"></p>
<script src="app.js"></script>
</body>