nessi/NexaPG
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases 13 Activity

Improve design and add logo

Browse Source
This commit is contained in:
Sascha Nesterovic
2026-02-12 11:32:10 +01:00
parent 5b34c08851
commit d1af2bf4c6
6 changed files with 4638 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>NexaPG Monitor</title> <title>NexaPG Monitor</title>
</head> </head>
<body> <body>

2285
frontend/public/favicon.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

2285
frontend/public/nexapg-logo.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 172 KiB

3
frontend/src/App.jsx
View File

@@ -22,7 +22,10 @@ function Layout({ children }) {
return ( return (
<div className="shell"> <div className="shell">
<aside className="sidebar"> <aside className="sidebar">
<div className="brand">
<img src="/nexapg-logo.svg" alt="NexaPG" className="brand-logo" />
<h1>NexaPG</h1> <h1>NexaPG</h1>
</div>
<nav className="sidebar-nav"> <nav className="sidebar-nav">
<NavLink to="/" end className={navClass}> <NavLink to="/" end className={navClass}>
<span className="nav-icon" aria-hidden="true"> <span className="nav-icon" aria-hidden="true">

1
frontend/src/pages/LoginPage.jsx
View File

@@ -27,6 +27,7 @@ export function LoginPage() {
return ( return (
<div className="login-wrap"> <div className="login-wrap">
<form className="card login-card" onSubmit={submit}> <form className="card login-card" onSubmit={submit}>
<img src="/nexapg-logo.svg" alt="NexaPG" className="login-logo" />
<div className="login-eyebrow">NexaPG Monitor</div> <div className="login-eyebrow">NexaPG Monitor</div>
<h2>Welcome back</h2> <h2>Welcome back</h2>
<p className="login-subtitle">Sign in to access monitoring and query insights.</p> <p className="login-subtitle">Sign in to access monitoring and query insights.</p>

100
frontend/src/styles.css
View File

@@ -1,10 +1,11 @@
:root { :root {
--bg: #0b1020; --bg: #071127;
--bg2: #131a30; --bg2: #0d1f3c;
--card: #1b233d; --card: #12244a;
--text: #e5edf7; --text: #e8f4ff;
--muted: #98a6c0; --muted: #9eb8d6;
--accent: #38bdf8; --accent: #25bdf3;
--accent2: #66d451;
--danger: #ef4444; --danger: #ef4444;
} }
@@ -16,7 +17,7 @@ body {
margin: 0; margin: 0;
font-family: "Space Grotesk", "Segoe UI", sans-serif; font-family: "Space Grotesk", "Segoe UI", sans-serif;
color: var(--text); color: var(--text);
background: radial-gradient(circle at top right, #1d335f, #0b1020 55%); background: radial-gradient(circle at top right, #13487f, #071127 55%);
overflow: hidden; overflow: hidden;
} }
@@ -33,8 +34,8 @@ a {
} }
.sidebar { .sidebar {
background: linear-gradient(180deg, #10182f, #0a1022); background: linear-gradient(180deg, #0d1f41, #08152d);
border-right: 1px solid #223056; border-right: 1px solid #224675;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -45,6 +46,23 @@ a {
overflow: hidden; overflow: hidden;
} }
.brand {
display: flex;
align-items: center;
gap: 10px;
}
.brand-logo {
width: 44px;
height: 44px;
object-fit: contain;
filter: drop-shadow(0 4px 8px #04142966);
}
.brand h1 {
margin: 0;
}
.sidebar-nav { .sidebar-nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -57,24 +75,24 @@ a {
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 11px 13px; padding: 11px 13px;
border: 1px solid #253962; border: 1px solid #255082;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(180deg, #101a36, #0d1630); background: linear-gradient(180deg, #102854, #0d1f41);
color: #cedbf2; color: #cedbf2;
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
} }
.nav-btn:hover { .nav-btn:hover {
border-color: #355ca6; border-color: #2f88d3;
background: linear-gradient(180deg, #122449, #0f1e3f); background: linear-gradient(180deg, #123267, #102954);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px #07122c66; box-shadow: 0 6px 18px #07122c66;
} }
.nav-btn.active { .nav-btn.active {
border-color: #38bdf8; border-color: #25bdf3;
box-shadow: inset 0 0 0 1px #38bdf84f, 0 8px 20px #0a1c4260; box-shadow: inset 0 0 0 1px #25bdf36e, 0 8px 20px #08234b74;
background: linear-gradient(180deg, #173a6e, #112851); background: linear-gradient(180deg, #15467e, #10325f);
color: #ecf5ff; color: #ecf5ff;
} }
@@ -86,7 +104,7 @@ a {
bottom: 8px; bottom: 8px;
width: 3px; width: 3px;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(180deg, #7dd3fc, #38bdf8); background: linear-gradient(180deg, #74e8ff, #25bdf3);
} }
.nav-icon { .nav-icon {
@@ -95,8 +113,8 @@ a {
border-radius: 8px; border-radius: 8px;
display: grid; display: grid;
place-items: center; place-items: center;
border: 1px solid #324f8a; border: 1px solid #2f6ab2;
background: linear-gradient(180deg, #0f1e40, #0d1a37); background: linear-gradient(180deg, #123468, #0f2a54);
} }
.nav-icon svg { .nav-icon svg {
@@ -134,8 +152,8 @@ a {
} }
.card { .card {
background: color-mix(in oklab, var(--card), black 10%); background: color-mix(in oklab, var(--card), black 8%);
border: 1px solid #2a3a66; border: 1px solid #2a588d;
border-radius: 14px; border-radius: 14px;
padding: 16px; padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
@@ -162,9 +180,9 @@ a {
input, input,
select, select,
button { button {
background: #10182f; background: #0f2750;
color: var(--text); color: var(--text);
border: 1px solid #2b3f74; border: 1px solid #2f629c;
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
} }
@@ -201,14 +219,14 @@ button {
.primary-btn { .primary-btn {
font-weight: 650; font-weight: 650;
letter-spacing: 0.01em; letter-spacing: 0.01em;
border-color: #4467ab; border-color: #3384cb;
background: linear-gradient(180deg, #1a2f56, #142643); background: linear-gradient(180deg, #15528d, #114170);
box-shadow: inset 0 1px 0 #5f8de144; box-shadow: inset 0 1px 0 #5f8de144;
} }
.primary-btn:hover { .primary-btn:hover {
border-color: #6b9ee9; border-color: #62c7f7;
background: linear-gradient(180deg, #1d3766, #183053); background: linear-gradient(180deg, #1a63a9, #14558f);
} }
.collapsible { .collapsible {
@@ -317,22 +335,28 @@ td {
place-items: center; place-items: center;
padding: 24px; padding: 24px;
background: background:
radial-gradient(900px 500px at 20% 15%, #15356a44, transparent), radial-gradient(900px 500px at 20% 15%, #1167a855, transparent),
radial-gradient(900px 500px at 80% 90%, #1c4a7a33, transparent); radial-gradient(900px 500px at 80% 90%, #31a76a44, transparent);
} }
.login-card { .login-card {
width: min(460px, 95vw); width: min(460px, 95vw);
display: grid; display: grid;
gap: 10px; gap: 10px;
border-color: #335aa4; border-color: #2f73bb;
padding: 26px; padding: 26px;
background: linear-gradient(180deg, #182548f0, #141f3df0); background: linear-gradient(180deg, #132f58f0, #102847f0);
box-shadow: 0 20px 50px #050b1f66; box-shadow: 0 20px 50px #050b1f66;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
animation: loginEnter 0.5s ease; animation: loginEnter 0.5s ease;
} }
.login-logo {
width: 110px;
margin: 0 auto 2px auto;
filter: drop-shadow(0 8px 18px #03173577);
}
.login-eyebrow { .login-eyebrow {
font-size: 12px; font-size: 12px;
color: #a8badb; color: #a8badb;
@@ -353,16 +377,16 @@ td {
} }
.input-shell { .input-shell {
border: 1px solid #2b3f74; border: 1px solid #2f629c;
border-radius: 12px; border-radius: 12px;
padding: 0; padding: 0;
background: #0e1731; background: #0f2750;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
} }
.input-shell:focus-within { .input-shell:focus-within {
border-color: #38bdf8; border-color: #25bdf3;
box-shadow: 0 0 0 3px #38bdf820; box-shadow: 0 0 0 3px #25bdf32a;
transform: translateY(-1px); transform: translateY(-1px);
} }
@@ -378,13 +402,13 @@ td {
.login-cta { .login-cta {
margin-top: 4px; margin-top: 4px;
font-weight: 700; font-weight: 700;
border-color: #3f74d6; border-color: #2d97d9;
background: linear-gradient(90deg, #2e7cd4, #265fb4); background: linear-gradient(90deg, #1d7fc8, #1a65ad 70%, #2a9d6a);
padding: 11px 12px; padding: 11px 12px;
} }
.login-cta:hover { .login-cta:hover {
border-color: #6aa8ff; border-color: #6ee2a5;
filter: brightness(1.05); filter: brightness(1.05);
} }