Improve design and add logo
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
2285
frontend/public/favicon.svg
Normal file
2285
frontend/public/favicon.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 172 KiB |
2285
frontend/public/nexapg-logo.svg
Normal file
2285
frontend/public/nexapg-logo.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 172 KiB |
@@ -22,7 +22,10 @@ function Layout({ children }) {
|
||||
return (
|
||||
<div className="shell">
|
||||
<aside className="sidebar">
|
||||
<h1>NexaPG</h1>
|
||||
<div className="brand">
|
||||
<img src="/nexapg-logo.svg" alt="NexaPG" className="brand-logo" />
|
||||
<h1>NexaPG</h1>
|
||||
</div>
|
||||
<nav className="sidebar-nav">
|
||||
<NavLink to="/" end className={navClass}>
|
||||
<span className="nav-icon" aria-hidden="true">
|
||||
|
||||
@@ -27,6 +27,7 @@ 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-eyebrow">NexaPG Monitor</div>
|
||||
<h2>Welcome back</h2>
|
||||
<p className="login-subtitle">Sign in to access monitoring and query insights.</p>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
:root {
|
||||
--bg: #0b1020;
|
||||
--bg2: #131a30;
|
||||
--card: #1b233d;
|
||||
--text: #e5edf7;
|
||||
--muted: #98a6c0;
|
||||
--accent: #38bdf8;
|
||||
--bg: #071127;
|
||||
--bg2: #0d1f3c;
|
||||
--card: #12244a;
|
||||
--text: #e8f4ff;
|
||||
--muted: #9eb8d6;
|
||||
--accent: #25bdf3;
|
||||
--accent2: #66d451;
|
||||
--danger: #ef4444;
|
||||
}
|
||||
|
||||
@@ -16,7 +17,7 @@ body {
|
||||
margin: 0;
|
||||
font-family: "Space Grotesk", "Segoe UI", sans-serif;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -33,8 +34,8 @@ a {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: linear-gradient(180deg, #10182f, #0a1022);
|
||||
border-right: 1px solid #223056;
|
||||
background: linear-gradient(180deg, #0d1f41, #08152d);
|
||||
border-right: 1px solid #224675;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -45,6 +46,23 @@ a {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -57,24 +75,24 @@ a {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 11px 13px;
|
||||
border: 1px solid #253962;
|
||||
border: 1px solid #255082;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #101a36, #0d1630);
|
||||
background: linear-gradient(180deg, #102854, #0d1f41);
|
||||
color: #cedbf2;
|
||||
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
border-color: #355ca6;
|
||||
background: linear-gradient(180deg, #122449, #0f1e3f);
|
||||
border-color: #2f88d3;
|
||||
background: linear-gradient(180deg, #123267, #102954);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px #07122c66;
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
border-color: #38bdf8;
|
||||
box-shadow: inset 0 0 0 1px #38bdf84f, 0 8px 20px #0a1c4260;
|
||||
background: linear-gradient(180deg, #173a6e, #112851);
|
||||
border-color: #25bdf3;
|
||||
box-shadow: inset 0 0 0 1px #25bdf36e, 0 8px 20px #08234b74;
|
||||
background: linear-gradient(180deg, #15467e, #10325f);
|
||||
color: #ecf5ff;
|
||||
}
|
||||
|
||||
@@ -86,7 +104,7 @@ a {
|
||||
bottom: 8px;
|
||||
width: 3px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(180deg, #7dd3fc, #38bdf8);
|
||||
background: linear-gradient(180deg, #74e8ff, #25bdf3);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
@@ -95,8 +113,8 @@ a {
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #324f8a;
|
||||
background: linear-gradient(180deg, #0f1e40, #0d1a37);
|
||||
border: 1px solid #2f6ab2;
|
||||
background: linear-gradient(180deg, #123468, #0f2a54);
|
||||
}
|
||||
|
||||
.nav-icon svg {
|
||||
@@ -134,8 +152,8 @@ a {
|
||||
}
|
||||
|
||||
.card {
|
||||
background: color-mix(in oklab, var(--card), black 10%);
|
||||
border: 1px solid #2a3a66;
|
||||
background: color-mix(in oklab, var(--card), black 8%);
|
||||
border: 1px solid #2a588d;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
@@ -162,9 +180,9 @@ a {
|
||||
input,
|
||||
select,
|
||||
button {
|
||||
background: #10182f;
|
||||
background: #0f2750;
|
||||
color: var(--text);
|
||||
border: 1px solid #2b3f74;
|
||||
border: 1px solid #2f629c;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
@@ -201,14 +219,14 @@ button {
|
||||
.primary-btn {
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.01em;
|
||||
border-color: #4467ab;
|
||||
background: linear-gradient(180deg, #1a2f56, #142643);
|
||||
border-color: #3384cb;
|
||||
background: linear-gradient(180deg, #15528d, #114170);
|
||||
box-shadow: inset 0 1px 0 #5f8de144;
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
border-color: #6b9ee9;
|
||||
background: linear-gradient(180deg, #1d3766, #183053);
|
||||
border-color: #62c7f7;
|
||||
background: linear-gradient(180deg, #1a63a9, #14558f);
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
@@ -317,22 +335,28 @@ td {
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(900px 500px at 20% 15%, #15356a44, transparent),
|
||||
radial-gradient(900px 500px at 80% 90%, #1c4a7a33, transparent);
|
||||
radial-gradient(900px 500px at 20% 15%, #1167a855, transparent),
|
||||
radial-gradient(900px 500px at 80% 90%, #31a76a44, transparent);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(460px, 95vw);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
border-color: #335aa4;
|
||||
border-color: #2f73bb;
|
||||
padding: 26px;
|
||||
background: linear-gradient(180deg, #182548f0, #141f3df0);
|
||||
background: linear-gradient(180deg, #132f58f0, #102847f0);
|
||||
box-shadow: 0 20px 50px #050b1f66;
|
||||
backdrop-filter: blur(6px);
|
||||
animation: loginEnter 0.5s ease;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 110px;
|
||||
margin: 0 auto 2px auto;
|
||||
filter: drop-shadow(0 8px 18px #03173577);
|
||||
}
|
||||
|
||||
.login-eyebrow {
|
||||
font-size: 12px;
|
||||
color: #a8badb;
|
||||
@@ -353,16 +377,16 @@ td {
|
||||
}
|
||||
|
||||
.input-shell {
|
||||
border: 1px solid #2b3f74;
|
||||
border: 1px solid #2f629c;
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
background: #0e1731;
|
||||
background: #0f2750;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.input-shell:focus-within {
|
||||
border-color: #38bdf8;
|
||||
box-shadow: 0 0 0 3px #38bdf820;
|
||||
border-color: #25bdf3;
|
||||
box-shadow: 0 0 0 3px #25bdf32a;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -378,13 +402,13 @@ td {
|
||||
.login-cta {
|
||||
margin-top: 4px;
|
||||
font-weight: 700;
|
||||
border-color: #3f74d6;
|
||||
background: linear-gradient(90deg, #2e7cd4, #265fb4);
|
||||
border-color: #2d97d9;
|
||||
background: linear-gradient(90deg, #1d7fc8, #1a65ad 70%, #2a9d6a);
|
||||
padding: 11px 12px;
|
||||
}
|
||||
|
||||
.login-cta:hover {
|
||||
border-color: #6aa8ff;
|
||||
border-color: #6ee2a5;
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user