bao/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify all views on Mission Control V2 design tokens
CI - Build & Test / Backend (.NET) (push) Successful in 31s
Details
CI - Build & Test / Frontend (Vue/TS) (push) Successful in 16s
Details
CI - Build & Test / Security Check (push) Successful in 3s
Details
CI - Build & Test / Deploy Nexus (push) Has been skipped
Details

Browse Source 
- Map legacy v1 CSS variables (--nx-*, --panel, --text-*, --surface*) to V2 tokens in nexus-tokens.css
- Restyle global shell (main.css), AppSidebar, AppHeader to match V2 Sidebar/Topbar (glass, gradients, Space Grotesk)
- Add GalaxyBackground to the v1 shell in App.vue
- Replace hardcoded v1 hex colors with V2 tokens in all deviating views (Agents, Calendar, Docs, Incidents, Memory, Notifications, ProjectDetail, Security, Team, TaskDetail, Settings)
- Keep JS status colors as hex where alpha suffixes are concatenated (AgentsIndex, Team, Notifications)
- Add Settings nav item (System group) + gear icon to V2 sidebar so it shows on the dashboard
- No component or layout structure changes; LoginView and TaskBoardView untouched

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
DevOps
2026-07-10 08:05:52 +02:00
parent 706ff82ccd
commit 86ceb2bcce
18 changed files with 523 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/AppHeader.vue
+28 -17
View File
@@ -35,9 +35,10 @@ defineEmits<{
display: flex;
align-items: center;
gap: 12px;
padding: 10px 20px;
border-bottom: 1px solid var(--nx-line, #1f2330);
background: var(--nx-panel, #11141b);
padding: 12px 22px;
border-bottom: 1px solid var(--line);
background: rgba(8, 6, 20, 0.5);
backdrop-filter: blur(14px);
}
.mobile-menu { display: none; }
.search {
@@ -45,24 +46,27 @@ defineEmits<{
align-items: center;
gap: 8px;
flex: 1;
padding: 6px 12px;
border: 1px solid var(--nx-line, #1f2330);
border-radius: 7px;
color: var(--nx-text-dim, #6f7889);
max-width: 560px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 11px;
background: rgba(124, 108, 255, 0.06);
color: var(--tx-3);
font-size: 11px;
}
.search kbd {
margin-left: auto;
padding: 1px 4px;
border: 1px solid #2a2f3d;
border: 1px solid var(--line-2);
border-radius: 4px;
font-size: 8px;
color: #4a5266;
color: var(--tx-3);
}
.top-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: auto;
}
.connection {
display: flex;
@@ -70,25 +74,32 @@ defineEmits<{
gap: 5px;
font-size: 9px;
font-weight: 600;
padding: 4px 9px;
border-radius: 6px;
padding: 4px 11px;
border-radius: 20px;
border: 1px solid var(--line-2);
background: rgba(124, 108, 255, 0.07);
color: var(--tx-2);
}
.connection.live { color: #27ae60; background: rgba(39,174,96,.1); }
.connection.preview { color: #e67e22; background: rgba(230,126,34,.1); }
.connection.live { color: var(--st-work); }
.connection.preview { color: var(--st-queue); }
.ask {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
padding: 6px 12px;
border: none;
border-radius: 6px;
background: var(--nx-accent, #7b6ef2);
border-radius: 10px;
background: var(--grad);
box-shadow: var(--glow-purple);
color: #fff;
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: filter .16s;
}
.ask:hover { filter: brightness(1.08); }
@media (max-width: 860px) {
.mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--nx-line, #1f2330); border-radius: 6px; background: transparent; color: var(--nx-accent, #7b6ef2); cursor: pointer; }
.mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--line-2); border-radius: 9px; background: transparent; color: var(--tx-2); cursor: pointer; }
}
</style>
frontend/src/components/layout/AppSidebar.vue
+43 -26
View File
@@ -104,8 +104,9 @@ async function logout() {
width: 210px;
display: flex;
flex-direction: column;
background: var(--panel, #11141b);
border-right: 1px solid var(--line, #1f2330);
background: linear-gradient(180deg, rgba(14, 12, 32, 0.92), rgba(8, 6, 20, 0.92));
border-right: 1px solid var(--line);
backdrop-filter: blur(14px);
flex-shrink: 0;
padding: 0 8px;
}
@@ -120,12 +121,13 @@ async function logout() {
height: 30px;
display: grid;
place-items: center;
border-radius: 7px;
background: var(--accent, #7b6ef2);
border-radius: 9px;
background: var(--grad);
box-shadow: var(--glow-purple);
color: #fff;
}
.brand div strong { display: block; font-size: 10px; letter-spacing: .08em; }
.brand div span { font-size: 8px; color: var(--text-dim, #6f7889); }
.brand div strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 10px; letter-spacing: .12em; }
.brand div span { font-size: 8px; color: var(--tx-3); }
.nav {
flex: 1;
display: flex;
@@ -141,36 +143,45 @@ async function logout() {
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 6px;
border-radius: 10px;
background: transparent;
color: #9ea5b3;
color: var(--tx-2);
font-size: 10.5px;
text-align: left;
cursor: pointer;
transition: background .15s, color .15s;
}
.nav button:hover { background: var(--accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
.nav button.active { background: var(--accent-soft, rgba(123,110,242,.08)); color: var(--accent, #7b6ef2); font-weight: 600; }
.nav button:hover { background: rgba(124,108,255,.08); color: var(--tx); }
.nav button.active {
background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.04));
box-shadow: inset 0 0 0 1px rgba(124,108,255,.25);
color: #fff;
font-weight: 600;
}
.nav button i {
margin-left: auto;
background: var(--accent, #7b6ef2);
color: #fff;
background: rgba(124,108,255,.14);
border: 1px solid var(--line-2);
color: var(--tx);
font-family: 'JetBrains Mono', monospace;
font-style: normal;
font-size: 8px;
font-weight: 700;
padding: 1px 5px;
border-radius: 5px;
padding: 1px 6px;
border-radius: 20px;
line-height: 1.4;
}
.nav button i.badge-red {
background: #e16e75;
background: rgba(251,113,133,.18);
border-color: rgba(251,113,133,.4);
color: var(--st-block);
}
.nav-separator {
height: 1px;
margin: 6px 10px;
background: var(--nx-line, #1f2330);
background: var(--line);
}
.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--nx-line, #1f2330); }
.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--line); }
.sidebar-bottom > button {
display: flex;
align-items: center;
@@ -178,33 +189,39 @@ async function logout() {
width: 100%;
padding: 8px 10px;
border: none;
border-radius: 6px;
border-radius: 10px;
background: transparent;
color: #9ea5b3;
color: var(--tx-2);
font-size: 10.5px;
cursor: pointer;
transition: background .15s, color .15s;
}
.sidebar-bottom > button:hover { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: #d8dbe3; }
.sidebar-bottom > button.active { background: var(--nx-accent-soft, rgba(123,110,242,.08)); color: var(--nx-accent, #7b6ef2); font-weight: 600; }
.sidebar-bottom > button:hover { background: rgba(124,108,255,.08); color: var(--tx); }
.sidebar-bottom > button.active {
background: linear-gradient(90deg, rgba(124,108,255,.22), rgba(124,108,255,.04));
box-shadow: inset 0 0 0 1px rgba(124,108,255,.25);
color: #fff;
font-weight: 600;
}
.owner {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.owner div strong { display: block; font-size: 9px; }
.owner div span { font-size: 7.5px; color: var(--text-dim, #6f7889); text-transform: capitalize; }
.owner div strong { display: block; font-size: 9px; color: var(--tx); }
.owner div span { font-size: 7.5px; color: var(--tx-3); text-transform: capitalize; }
.owner > svg:last-child { margin-left: auto; opacity: .4; transition: opacity .15s; }
.owner:hover > svg:last-child { opacity: 1; }
.avatar {
width: 26px;
height: 26px;
border-radius: 6px;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--accent, #7b6ef2);
color: #fff;
background: var(--grad-soft);
border: 1px solid var(--line-2);
color: var(--tx);
font-size: 9px;
font-weight: 700;
}