style: simplify panel to minimalist layout
This commit is contained in:
39
src/App.tsx
39
src/App.tsx
@@ -38,12 +38,9 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
|
||||
return (
|
||||
<main className="login-shell">
|
||||
<section className="login-card">
|
||||
<p className="eyebrow">3proxy control plane</p>
|
||||
<h1>Minimal panel, operator-first signal.</h1>
|
||||
<p className="lede">
|
||||
The first slice focuses on clarity: health, users, quotas, and system controls without
|
||||
dashboard noise.
|
||||
</p>
|
||||
<p className="eyebrow">3proxy UI</p>
|
||||
<h1>Panel access</h1>
|
||||
<p className="lede">Hardcoded credentials for the current prototype build.</p>
|
||||
<form className="login-form" onSubmit={handleSubmit}>
|
||||
<label>
|
||||
Login
|
||||
@@ -69,7 +66,7 @@ function LoginGate({ onUnlock }: { onUnlock: () => void }) {
|
||||
</form>
|
||||
<div className="login-note">
|
||||
<span>Prototype auth is intentionally hardcoded.</span>
|
||||
<span>Runtime-backed auth will replace this in the next phase.</span>
|
||||
<span>Backend-backed access control comes next.</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -83,12 +80,9 @@ function DashboardTab() {
|
||||
<section className="tab-grid">
|
||||
<article className="panel-card hero-card">
|
||||
<div>
|
||||
<p className="eyebrow">3proxy runtime</p>
|
||||
<h2>Service health stays front and center.</h2>
|
||||
<p className="muted">
|
||||
The live card will be wired to process health and graceful reload endpoints in the next
|
||||
implementation step.
|
||||
</p>
|
||||
<p className="eyebrow">Service</p>
|
||||
<h2>3proxy status</h2>
|
||||
<p className="muted">Health, process metadata, and restart actions.</p>
|
||||
</div>
|
||||
<div className="hero-status">
|
||||
<span className={`status-pill ${serviceTone}`}>{dashboardSnapshot.service.status}</span>
|
||||
@@ -126,7 +120,7 @@ function DashboardTab() {
|
||||
<article className="panel-card">
|
||||
<p className="section-label">User pressure</p>
|
||||
<strong className="metric">{dashboardSnapshot.users.total}</strong>
|
||||
<p className="muted">Configured users in the current proxy profile.</p>
|
||||
<p className="muted">Configured users in the active profile.</p>
|
||||
<div className="stat-stack">
|
||||
<div>
|
||||
<span>Live now</span>
|
||||
@@ -174,7 +168,7 @@ function UsersTab() {
|
||||
<section className="tab-grid users-grid">
|
||||
<article className="panel-card user-form-card">
|
||||
<p className="section-label">Add user</p>
|
||||
<h2>Shape new access without leaving the panel.</h2>
|
||||
<h2>New account</h2>
|
||||
<form className="user-form">
|
||||
<label>
|
||||
Username
|
||||
@@ -195,8 +189,7 @@ function UsersTab() {
|
||||
<button type="button">Queue user creation</button>
|
||||
</form>
|
||||
<p className="muted">
|
||||
Final flow will write `users`, `allow`, and quota counters into generated 3proxy config
|
||||
and data files.
|
||||
Final flow will write `users`, `allow`, and quota counters into generated runtime files.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
@@ -204,7 +197,7 @@ function UsersTab() {
|
||||
<div className="table-header">
|
||||
<div>
|
||||
<p className="section-label">Users</p>
|
||||
<h2>Traffic, quota, and copyable proxy links.</h2>
|
||||
<h2>Accounts and usage</h2>
|
||||
</div>
|
||||
<span className="muted">{dashboardSnapshot.userRecords.length} rows</span>
|
||||
</div>
|
||||
@@ -283,7 +276,7 @@ function SystemTab() {
|
||||
<section className="tab-grid system-grid">
|
||||
<article className="panel-card">
|
||||
<p className="section-label">Runtime model</p>
|
||||
<h2>One place for ports, services, and reload strategy.</h2>
|
||||
<h2>Ports and reload mode</h2>
|
||||
<div className="system-stats">
|
||||
<div>
|
||||
<span>Config mode</span>
|
||||
@@ -309,7 +302,7 @@ function SystemTab() {
|
||||
<div className="table-header">
|
||||
<div>
|
||||
<p className="section-label">Generated config preview</p>
|
||||
<h2>Readable before it becomes writable.</h2>
|
||||
<h2>Generated config</h2>
|
||||
</div>
|
||||
<span className="muted">View-only for now</span>
|
||||
</div>
|
||||
@@ -332,10 +325,8 @@ export default function App() {
|
||||
<aside className="sidebar">
|
||||
<div className="brand-block">
|
||||
<p className="eyebrow">3proxy UI</p>
|
||||
<h1>Operator panel</h1>
|
||||
<p className="muted">
|
||||
Dashboard, users, and system settings aligned with official 3proxy primitives.
|
||||
</p>
|
||||
<h1>Control panel</h1>
|
||||
<p className="muted">Dashboard, users, and system settings.</p>
|
||||
</div>
|
||||
|
||||
<nav className="nav-list" aria-label="Primary">
|
||||
|
||||
Reference in New Issue
Block a user