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

Add logo container and enhance login page styling
All checks were successful
PostgreSQL Compatibility Matrix / PG14 smoke (push) Successful in 8s
Details
PostgreSQL Compatibility Matrix / PG15 smoke (push) Successful in 8s
Details
PostgreSQL Compatibility Matrix / PG16 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG17 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG18 smoke (push) Successful in 7s
Details

Browse Source 
Introduced a styled wrapper for the login page logo to improve its appearance and layout consistency. Adjusted logo dimensions and applied new visual effects like gradients, shadow, and borders for a more polished design.
This commit is contained in:
Sascha Nesterovic
2026-02-12 16:23:22 +01:00
parent 1bab5cd16d
commit e5a9acfa91
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

20
frontend/src/styles.css
View File

@@ -1509,10 +1509,24 @@ td {
animation: loginEnter 0.5s ease;
}
.login-logo-wrap {
margin: 2px auto 6px auto;
width: 190px;
display: grid;
place-items: center;
padding: 10px 10px 8px 10px;
border-radius: 16px;
border: 1px solid #2f6eb1;
background:
radial-gradient(circle at 50% 16%, #52cbff4f, transparent 62%),
linear-gradient(180deg, #163965, #122d52);
box-shadow: inset 0 1px 0 #8bd8ff40, 0 14px 28px #04163875;
}
.login-logo {
width: 110px;
margin: 0 auto 2px auto;
filter: drop-shadow(0 8px 18px #03173577);
width: 152px;
margin: 0 auto;
filter: drop-shadow(0 10px 22px #041c3eaa) saturate(1.08) contrast(1.04);
}
.login-eyebrow {