From 8282c1fbf432abc013bda3543202c011ba1a5ab1 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Tue, 24 Mar 2026 17:54:59 +0100
Subject: [PATCH] refactor: restore original logo image and update color scheme
 with cyan-violet gradient palette

Replace inline SVG brand glyph with NexaVPN_Logo.png image in sidebar. Simplify brand-block to sidebar-brand with logo image styling.

Update CSS color variables from green accent (#74e0b8) to cyan (#44e6e7) with violet (#8d5bff) and blue (#4a8cff) accents. Adjust background gradients to use new cyan-violet-blue palette with updated opacity values.

Update nav-link hover and active states with cyan-blue gradient background. Modify sidebar background
---
 admin-web/src/components/Layout.tsx | 20 +--------
 admin-web/src/styles/global.css     | 65 +++++++++++++++--------------
 2 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/admin-web/src/components/Layout.tsx b/admin-web/src/components/Layout.tsx
index 0c2f15d..139d52f 100644
--- a/admin-web/src/components/Layout.tsx
+++ b/admin-web/src/components/Layout.tsx
@@ -21,28 +21,12 @@ type LayoutProps = {
 
 const TopbarIcon = topbarIcon;
 
-function BrandGlyph() {
-  return (
-    <div className="brand-glyph" aria-hidden="true">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M12 3 5.5 5.8v5.4c0 4.5 2.6 7.9 6.5 9.8 3.9-1.9 6.5-5.3 6.5-9.8V5.8L12 3Z" />
-        <path d="m9.5 12 1.7 1.7 3.8-4.2" />
-      </svg>
-    </div>
-  );
-}
-
 export function Layout({ onLogout }: LayoutProps) {
   return (
     <div className="shell">
       <aside className="sidebar">
-        <div className="brand-block">
-          <BrandGlyph />
-          <div className="brand-copy">
-            <p className="eyebrow">NexaVPN</p>
-            <h1>Control Plane</h1>
-            <p className="brand-tagline">Remote access orchestration for your private WireGuard edge.</p>
-          </div>
+        <div className="sidebar-brand">
+          <img className="sidebar-brand-logo" src="/NexaVPN_Logo.png" alt="NexaVPN" />
         </div>
         <nav className="nav">
           {items.map(([label, path, iconKey]) => {
diff --git a/admin-web/src/styles/global.css b/admin-web/src/styles/global.css
index 92c9107..a512253 100644
--- a/admin-web/src/styles/global.css
+++ b/admin-web/src/styles/global.css
@@ -1,15 +1,16 @@
 :root {
   color-scheme: light dark;
-  --bg: #0c1322;
-  --bg-soft: #111b30;
-  --panel: rgba(17, 27, 48, 0.78);
-  --panel-strong: #14203a;
-  --text: #eff4ff;
-  --muted: #9fb2d4;
-  --line: rgba(177, 197, 229, 0.15);
-  --accent: #74e0b8;
-  --accent-strong: #1fb67a;
-  --shadow: 0 18px 48px rgba(3, 8, 20, 0.35);
+  --bg: #08101d;
+  --bg-soft: #0d1630;
+  --panel: rgba(13, 22, 48, 0.82);
+  --panel-strong: #142453;
+  --text: #eff5ff;
+  --muted: #9db1d3;
+  --line: rgba(114, 178, 255, 0.16);
+  --accent: #44e6e7;
+  --accent-strong: #4a8cff;
+  --accent-violet: #8d5bff;
+  --shadow: 0 20px 56px rgba(2, 7, 18, 0.42);
   font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
 }
 
@@ -22,9 +23,10 @@ body {
   min-height: 100vh;
   color: var(--text);
   background:
-    radial-gradient(circle at top left, rgba(116, 224, 184, 0.17), transparent 28%),
-    radial-gradient(circle at bottom right, rgba(98, 144, 255, 0.16), transparent 24%),
-    linear-gradient(180deg, #08101d 0%, #0d1728 100%);
+    radial-gradient(circle at top left, rgba(68, 230, 231, 0.18), transparent 26%),
+    radial-gradient(circle at top right, rgba(141, 91, 255, 0.16), transparent 24%),
+    radial-gradient(circle at bottom right, rgba(74, 140, 255, 0.16), transparent 26%),
+    linear-gradient(180deg, #07101c 0%, #0a1430 100%);
 }
 
 a {
@@ -90,31 +92,19 @@ button {
   align-items: flex-start;
 }
 
-.brand-glyph,
 .topbar-icon-wrap,
 .page-title-icon {
   display: grid;
   place-items: center;
   flex: 0 0 auto;
   color: var(--accent);
-  border: 1px solid rgba(116, 224, 184, 0.18);
+  border: 1px solid rgba(68, 230, 231, 0.18);
   background:
-    radial-gradient(circle at top, rgba(116, 224, 184, 0.14), transparent 72%),
+    radial-gradient(circle at top, rgba(68, 230, 231, 0.16), transparent 72%),
     rgba(10, 18, 32, 0.88);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
 }
 
-.brand-glyph {
-  width: 54px;
-  height: 54px;
-  border-radius: 18px;
-}
-
-.brand-glyph svg {
-  width: 25px;
-  height: 25px;
-}
-
 .brand-copy {
   display: grid;
   gap: 6px;
@@ -176,14 +166,26 @@ button {
 .sidebar {
   padding: 28px;
   border-right: 1px solid var(--line);
-  background: rgba(7, 12, 22, 0.76);
+  background:
+    linear-gradient(180deg, rgba(8, 15, 28, 0.96) 0%, rgba(7, 13, 25, 0.88) 100%);
   backdrop-filter: blur(18px);
 }
 
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar-brand-logo {
+  width: min(100%, 170px);
+  height: auto;
+  display: block;
+}
+
 .nav {
   display: grid;
   gap: 10px;
-  margin-top: 36px;
+  margin-top: 28px;
 }
 
 .nav-link {
@@ -201,8 +203,9 @@ button {
 .nav-link:hover,
 .nav-link.active {
   color: var(--text);
-  border-color: rgba(116, 224, 184, 0.14);
-  background: rgba(116, 224, 184, 0.08);
+  border-color: rgba(68, 230, 231, 0.16);
+  background:
+    linear-gradient(135deg, rgba(68, 230, 231, 0.08), rgba(74, 140, 255, 0.08));
 }
 
 .nav-link-copy {