nessi/NexaVPN
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify desktop client UI labels and remove local config section

Browse Source 
Replace Unix timestamp with "Just now" label in now_label helper. Update profile label from "No profile provisioned" to "Not provisioned". Change brand copy subtitle based on enrollment state. Rename "Current profile" to "Overview" and "Profile" to "Access" in status panel. Remove "Stored config" surface section showing profile path and revision. Update resources sidebar instructions and rename resource-list to resource-
This commit is contained in:
Sascha Nesterovic
2026-03-17 21:49:55 +01:00
parent 1b684aecbb
commit 767c633afa
3 changed files with 17 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
desktop-client/src/App.tsx
View File

@@ -25,7 +25,7 @@ function formatInvokeError(err: unknown, fallback: string) {
function currentProfileLabel(state: EnrollmentState | null) {
if (!state) {
return "No profile provisioned";
return "Not provisioned";
}
if (state.resources.includes("0.0.0.0/0")) {
@@ -123,7 +123,7 @@ export function App() {
<div className="brand-copy">
<p className="eyebrow">NexaVPN</p>
<h1>VPN Client</h1>
<p>{state ? profileLabel : "Sign in to provision this device"}</p>
<p>{state ? "Private access client" : "Sign in to add this device"}</p>
</div>
</div>
<div className="top-actions">
@@ -190,7 +190,7 @@ export function App() {
<div className="surface-header">
<div>
<p className="eyebrow">Connection</p>
<h4>Current profile</h4>
<h4>Overview</h4>
</div>
</div>
<div className="status-grid">
@@ -203,7 +203,7 @@ export function App() {
<strong>{state.gatewayEndpoint}</strong>
</div>
<div className="detail-card">
<span>Profile</span>
<span>Access</span>
<strong>{profileLabel}</strong>
</div>
<div className="detail-card">
@@ -213,25 +213,6 @@ export function App() {
</div>
</div>
<div className="surface">
<div className="surface-header">
<div>
<p className="eyebrow">Local</p>
<h4>Stored config</h4>
</div>
</div>
<div className="profile-grid">
<div className="profile-card">
<span>Profile path</span>
<strong>{state.profilePath}</strong>
</div>
<div className="profile-card">
<span>Revision</span>
<strong>{state.profileRevision}</strong>
</div>
</div>
</div>
{error ? <div className="error">{error}</div> : null}
</section>
)}
@@ -243,8 +224,8 @@ export function App() {
<h4>Resources</h4>
</div>
</div>
<p>After policy changes, press <strong>Sync</strong> to refresh this device profile.</p>
<ul className="resource-list">
<p>Press <strong>Sync</strong> after policy changes.</p>
<ul className="resource-stack">
{(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
<li key={resource}>{resource}</li>
))}

18
desktop-client/src/styles.css
View File

@@ -218,21 +218,21 @@ input {
word-break: break-word;
}
.resource-list {
.resource-stack {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
display: grid;
gap: 10px;
}
.resource-list li {
padding: 10px 12px;
border-radius: 999px;
background: rgba(117, 227, 186, 0.08);
border: 1px solid rgba(117, 227, 186, 0.15);
color: #dffaf0;
.resource-stack li {
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(177, 197, 229, 0.1);
color: #eef4ff;
word-break: break-word;
}
.login-panel form {