From 17c0174e7d49b010319182d59d6db46bee5908d0 Mon Sep 17 00:00:00 2001
From: Andrew Zambazos <andrewzambazos@gmail.com>
Date: Sat, 9 May 2026 18:23:41 +1200
Subject: [PATCH] Add white logo and revamp UI styles

Add a new white SVG logo asset and wire it into the welcome and sidebar views; overhaul theme and component styles for a cleaner, modern dark theme. Changes include:

- Added frontend/assets/logos/Gitpub-Word-Logo-2-White.svg and referenced it in frontend/js/app.js (welcome and sidebar).
- Updated CSS variables and base styles in frontend/css/base.css: adjusted colors, radii, shadow, typography, input focus, button spacing and variants (primary, primary-blue, danger), and transitions.
- Refined component styles in frontend/css/components.css: updated panel/sidebar backgrounds, paddings, repo-card sizing and hover, tab and pill behaviors, spacing, logo/sidebar-brand classes, git output font stack, and various UI polish tweaks (font sizes, weights, paddings, and responsive adjustments).

These changes standardize the dark theme, introduce visual improvements and spacing refinements, and add branding to the UI.
---
 .../assets/logos/Gitpub-Word-Logo-2-White.svg |  24 +++
 frontend/css/base.css                         |  87 +++++++---
 frontend/css/components.css                   | 156 +++++++++++++-----
 frontend/js/app.js                            |   9 +-
 4 files changed, 207 insertions(+), 69 deletions(-)
 create mode 100644 frontend/assets/logos/Gitpub-Word-Logo-2-White.svg

diff --git a/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg b/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg
new file mode 100644
index 0000000..01f9630
--- /dev/null
+++ b/frontend/assets/logos/Gitpub-Word-Logo-2-White.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1032.3 319.8">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #e17709;
+      }
+
+      .st1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st1" d="M111.1,255.7c-22.1,0-41.5-5-58.1-15-16.6-10-29.6-24.1-39-42.5C4.7,179.9,0,158.1,0,132.8s4.8-48,14.4-66.4c9.6-18.4,22.7-32.5,39.2-42.3s35.3-14.7,56.2-14.7,25.5,1.9,36.9,5.8,21.6,9.4,30.6,16.5c9,7.1,16.3,15.6,22.1,25.4,5.7,9.8,9.5,20.5,11.4,32.2h-43.9c-1.9-6.4-4.6-12.2-8-17.2-3.4-5-7.5-9.4-12.2-13s-10.2-6.4-16.3-8.3-12.8-2.8-20-2.8c-12.9,0-24.4,3.3-34.5,9.8-10.1,6.6-18.1,16.1-23.9,28.7s-8.7,28-8.7,46.2,2.9,33.4,8.7,46c5.8,12.6,13.8,22.2,24,28.8,10.2,6.6,22,9.9,35.4,9.9s22.8-2.4,31.8-7.1c9-4.7,15.9-11.4,20.8-20.1,4.9-8.7,7.3-18.9,7.3-30.8l9.8,1.6h-65.2v-33.8h97.1v28.8c0,20.5-4.4,38.2-13.1,53.2-8.8,15-20.8,26.5-36.1,34.5s-32.8,12.1-52.6,12.1h0Z"/>
+  <g id="Layer_4">
+    <rect class="st1" x="252.6" y="72.5" width="41.9" height="180"/>
+    <ellipse class="st0" cx="273.7" cy="24.1" rx="24.5" ry="24.1"/>
+  </g>
+  <path class="st1" d="M422.1,72.5v32.8h-102.2v-32.8s102.2,0,102.2,0ZM345.5,29.6h41.9v172.1c0,6.6,1.4,11.4,4.2,14.4,2.8,3.1,7.4,4.6,13.7,4.6s4.5-.2,7.6-.7c3.2-.5,5.7-.9,7.6-1.4l6.6,32.4c-4.6,1.4-9.3,2.4-14.2,3-4.8.6-9.5.9-13.9.9-17.3,0-30.5-4.3-39.8-12.9-9.2-8.6-13.9-20.8-13.9-36.7V29.6h0Z"/>
+  <path class="st1" d="M455.3,319.8V72.5h40.9v29.8h2.7c2.1-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9s-18.7-1.8-25.6-5.2c-6.9-3.5-12.3-7.7-16.4-12.6s-7.2-9.6-9.3-13.9h-1.8v95.8h-41.9,0ZM539,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2c-6.3,4.8-11.1,11.6-14.4,20.2-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
+  <path class="st1" d="M722.7,254.7c-12.3,0-23.2-2.6-32.4-7.9-9.3-5.3-16.5-13-21.6-23.1-5.1-10.1-7.7-22.4-7.7-36.8v-114.5h41.9v108c0,12,3.1,21.5,9.4,28.3,6.3,6.9,14.9,10.3,25.8,10.3s14-1.6,19.8-4.8c5.8-3.2,10.3-7.9,13.6-14.2,3.3-6.2,4.9-13.6,4.9-22.2v-105.4h42v180h-39.8l-.5-44.4h3.2c-5,15.7-12.5,27.4-22.4,35.1s-22,11.6-36.4,11.6h0Z"/>
+  <path class="st1" d="M957.9,255.7c-10.2,0-18.7-1.8-25.6-5.2-6.9-3.5-12.3-7.7-16.4-12.6-4.1-4.9-7.2-9.6-9.3-13.9h-2.7v28.5h-40.9V12.6h41.9v89.7h1.8c2.2-4.3,5.2-8.9,9.2-13.8,4-4.9,9.4-9.2,16.2-12.8,6.8-3.6,15.5-5.4,26.2-5.4s26.5,3.5,37.7,10.6c11.2,7.1,20,17.5,26.6,31.3,6.6,13.8,9.9,30.7,9.9,50.6s-3.2,36.6-9.7,50.4-15.3,24.4-26.5,31.6c-11.2,7.2-24,10.9-38.2,10.9h0ZM946.7,221.2c9.3,0,17.2-2.6,23.5-7.6,6.3-5.1,11.1-12.1,14.3-20.9,3.2-8.9,4.8-18.9,4.8-30s-1.6-21.1-4.8-29.9c-3.2-8.8-7.9-15.6-14.2-20.6s-14.2-7.5-23.7-7.5-17,2.4-23.3,7.2-11.1,11.6-14.4,20.2c-3.3,8.6-4.9,18.8-4.9,30.5s1.6,21.9,4.9,30.8c3.3,8.8,8.1,15.6,14.5,20.5,6.4,4.9,14.1,7.3,23.3,7.3h0Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/css/base.css b/frontend/css/base.css
index dccd2f2..647148d 100644
--- a/frontend/css/base.css
+++ b/frontend/css/base.css
@@ -1,18 +1,18 @@
 :root {
-  --bg-app: #0b1018;
-  --bg-panel: #111a27;
-  --bg-panel-alt: #172234;
-  --bg-hover: #1c2a3f;
-  --border: #253349;
-  --text-main: #e5edf7;
-  --text-muted: #94a7c0;
-  --accent: #4f9dff;
-  --accent-strong: #2f85f4;
-  --success: #41c48f;
-  --danger: #ef6a6a;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --shadow: 0 14px 40px rgba(5, 9, 16, 0.45);
+  --bg-app: #0d1117;
+  --bg-panel: #161b22;
+  --bg-panel-alt: #21262d;
+  --bg-hover: #30363d;
+  --border: #30363d;
+  --text-main: #e6edf3;
+  --text-muted: #848d97;
+  --accent: #2f81f7;
+  --accent-strong: #1f6feb;
+  --success: #3fb950;
+  --danger: #f85149;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --shadow: 0 8px 24px rgba(1, 4, 9, 0.75);
 }
 
 * {
@@ -24,9 +24,11 @@ body {
   margin: 0;
   width: 100%;
   height: 100%;
-  background: radial-gradient(circle at top right, #172a47 0%, var(--bg-app) 55%);
+  background: var(--bg-app);
   color: var(--text-main);
-  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 button,
@@ -41,35 +43,68 @@ button {
   border-radius: var(--radius-md);
   background: var(--bg-panel-alt);
   color: var(--text-main);
-  padding: 8px 12px;
+  padding: 5px 12px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: background 0.1s ease, border-color 0.1s ease;
+  font-size: 14px;
 }
 
 button:hover {
-  transform: translateY(-1px);
-  border-color: #3b4f6e;
+  background: var(--bg-hover);
+  border-color: #8b949e;
 }
 
 button.primary {
-  background: linear-gradient(180deg, #5ca7ff 0%, var(--accent-strong) 100%);
-  border-color: #2670d6;
+  background: #238636;
+  border-color: rgba(240, 246, 252, 0.1);
+  color: #ffffff;
+}
+
+button.primary:hover {
+  background: #2ea043;
+  border-color: rgba(240, 246, 252, 0.1);
+}
+
+button.primary-blue {
+  background: var(--accent-strong);
+  border-color: rgba(240, 246, 252, 0.1);
+  color: #ffffff;
+}
+
+button.primary-blue:hover {
+  background: var(--accent);
+  border-color: rgba(240, 246, 252, 0.1);
 }
 
 button.danger {
-  border-color: #813434;
-  color: #ffcaca;
+  border-color: rgba(248, 81, 73, 0.4);
+  color: #f85149;
+}
+
+button.danger:hover {
+  background: rgba(248, 81, 73, 0.1);
+  border-color: #f85149;
 }
 
 input,
 select,
 textarea {
   width: 100%;
-  padding: 10px 12px;
+  padding: 5px 12px;
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
-  background: #0f1724;
+  background: var(--bg-app);
   color: var(--text-main);
+  font-size: 14px;
+  transition: border-color 0.1s ease, box-shadow 0.1s ease;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.15);
 }
 
 textarea {
diff --git a/frontend/css/components.css b/frontend/css/components.css
index f994403..9837f3a 100644
--- a/frontend/css/components.css
+++ b/frontend/css/components.css
@@ -13,12 +13,12 @@
 
 .sidebar,
 .rightbar {
-  background: rgba(13, 21, 34, 0.88);
+  background: var(--bg-panel);
   border-right: 1px solid var(--border);
 }
 
 .sidebar {
-  padding: 16px;
+  padding: 16px 12px;
   overflow-y: auto;
 }
 
@@ -29,18 +29,18 @@
   overflow-y: auto;
 }
 
-
 .main {
   padding: 16px;
   overflow: auto;
+  background: var(--bg-app);
 }
 
 .panel {
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
-  background: rgba(16, 26, 41, 0.92);
+  background: var(--bg-panel);
   box-shadow: var(--shadow);
-  padding: 14px;
+  padding: 16px;
 }
 
 .stack {
@@ -66,14 +66,19 @@
 .repo-card {
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 10px;
-  background: rgba(23, 34, 53, 0.75);
+  padding: 12px;
+  background: var(--bg-panel);
+  transition: border-color 0.1s ease;
+}
+
+.repo-card:hover {
+  border-color: #8b949e;
 }
 
 .repo-grid {
   display: grid;
   gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 }
 
 .repo-filter-pills {
@@ -90,17 +95,18 @@
   color: var(--text-muted);
   font-size: 13px;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  transition: background 0.1s, color 0.1s, border-color 0.1s;
 }
 
 .pill-btn:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: var(--bg-hover);
   color: var(--text-main);
+  border-color: #8b949e;
 }
 
 .pill-btn.active {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--accent-strong);
+  border-color: rgba(240, 246, 252, 0.1);
   color: #fff;
 }
 
@@ -115,13 +121,13 @@
 }
 
 .org-badge {
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
-  color: var(--text-main);
-  background: rgba(255, 255, 255, 0.07);
+  color: var(--text-muted);
+  background: var(--bg-panel-alt);
   border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 2px 10px;
+  border-radius: 999px;
+  padding: 1px 10px;
 }
 
 .muted {
@@ -132,16 +138,19 @@
   font-size: 12px;
   color: var(--text-muted);
   margin-bottom: 4px;
+  font-weight: 500;
 }
 
 .title {
   margin: 0;
   font-size: 18px;
+  font-weight: 600;
+  color: var(--text-main);
 }
 
 .subtitle {
   margin: 0;
-  font-size: 13px;
+  font-size: 14px;
   color: var(--text-muted);
 }
 
@@ -171,28 +180,50 @@
   min-height: 100%;
   display: grid;
   place-items: center;
-  padding: 24px;
+  padding: 32px 24px;
+  background: var(--bg-app);
 }
 
 .welcome-card {
   width: min(680px, 100%);
 }
 
+.welcome-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 4px;
+}
+
+.welcome-logo-img {
+  height: 36px;
+  width: auto;
+}
+
+.welcome-logo-desktop {
+  font-size: 20px;
+  font-weight: 300;
+  color: var(--text-muted);
+  letter-spacing: 0;
+}
+
 .status-ok {
   color: var(--success);
+  font-weight: 500;
 }
 
 .status-error {
   color: var(--danger);
+  font-weight: 500;
 }
 
 /* ── Tabs ─────────────────────────────────────────── */
 .tabs {
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: 0;
   border-bottom: 1px solid var(--border);
-  padding: 0 4px;
+  padding: 0;
   flex-shrink: 0;
 }
 
@@ -201,24 +232,24 @@
   border: none;
   border-bottom: 2px solid transparent;
   border-radius: 0;
-  padding: 10px 14px;
+  padding: 10px 16px;
   color: var(--text-muted);
-  font-size: 13px;
+  font-size: 14px;
   cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: color 0.1s ease, border-color 0.1s ease;
   margin-bottom: -1px;
 }
 
 .tab-btn:hover {
-  transform: none;
+  background: transparent;
   color: var(--text-main);
   border-color: transparent;
-  background: transparent;
 }
 
 .tab-btn.active {
   color: var(--text-main);
-  border-bottom-color: var(--accent);
+  border-bottom-color: #f78166;
+  font-weight: 600;
 }
 
 .tab-spacer {
@@ -226,10 +257,10 @@
 }
 
 .tab-search {
-  width: 180px !important;
-  padding: 6px 10px !important;
+  width: 200px !important;
+  padding: 5px 10px !important;
   font-size: 13px;
-  margin: 4px 4px 4px 0;
+  margin: 4px 8px 4px 0;
 }
 
 .main-tabs {
@@ -241,13 +272,39 @@
   top: 0;
   margin: 0 -12px;
   padding: 0 12px;
-  background: rgba(13, 21, 34, 0.96);
+  background: var(--bg-panel);
   z-index: 1;
 }
 
 /* ── Sidebar ──────────────────────────────────────── */
+.sidebar-brand {
+  padding: 4px 0 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
 .sidebar-brand .title {
-  font-size: 16px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sidebar-logo-img {
+  height: 22px;
+  width: auto;
+}
+
+.sidebar-logo-desktop {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-muted);
+  letter-spacing: 0;
+  margin-top: 2px;
 }
 
 .sidebar .server-chip {
@@ -267,8 +324,8 @@
 
 .sidebar-btn {
   flex: 1;
-  font-size: 12px;
-  padding: 7px 8px;
+  font-size: 13px;
+  padding: 5px 8px;
   text-align: center;
 }
 
@@ -286,22 +343,22 @@
   text-overflow: ellipsis;
   cursor: pointer;
   color: var(--text-muted);
-  padding: 3px 0;
+  padding: 4px 0;
   font-size: 13px;
 }
 
 .recent-item:hover {
-  color: var(--text-main);
+  color: var(--accent);
 }
 
 /* ── Git output ───────────────────────────────────── */
 .git-output {
-  background: rgba(0, 0, 0, 0.35);
+  background: #010409;
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 12px 14px;
   font-size: 12px;
-  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
+  font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
   color: var(--success);
   overflow-x: auto;
   white-space: pre-wrap;
@@ -313,35 +370,50 @@
 .git-output-placeholder {
   font-size: 13px;
   font-style: italic;
+  color: var(--text-muted);
   margin: 0;
 }
 
 .commit-note {
   font-size: 11px;
   margin-top: 4px;
+  color: var(--text-muted);
 }
 
 /* ── Local repo indicator ─────────────────────────── */
 .selected-repo {
   font-size: 13px;
-  padding: 7px 10px;
-  background: rgba(79, 157, 255, 0.08);
-  border: 1px solid rgba(79, 157, 255, 0.18);
+  padding: 6px 10px;
+  background: rgba(47, 129, 247, 0.06);
+  border: 1px solid rgba(47, 129, 247, 0.2);
   border-radius: var(--radius-md);
   word-break: break-all;
+  color: var(--text-muted);
 }
 
 /* ── Empty state ──────────────────────────────────── */
 .empty-state {
   grid-column: 1 / -1;
   text-align: center;
-  padding: 40px 16px;
+  padding: 48px 16px;
 }
 
 .empty-state > div:first-child {
   font-size: 15px;
   color: var(--text-main);
   margin-bottom: 6px;
+  font-weight: 500;
+}
+
+/* ── Repo card details ────────────────────────────── */
+.repo-card strong {
+  color: var(--accent);
+  font-size: 14px;
+}
+
+.repo-card strong:hover {
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 /* ── Responsive ───────────────────────────────────── */
diff --git a/frontend/js/app.js b/frontend/js/app.js
index a386fac..9bb28e7 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -98,6 +98,10 @@ function welcomeView() {
   appRoot.innerHTML = `
     <div class="welcome-wrap">
       <div class="welcome-card stack">
+        <div class="welcome-logo">
+          <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="welcome-logo-img" />
+          <span class="welcome-logo-desktop">Desktop</span>
+        </div>
         <div class="panel stack">
           <h1 class="title">Welcome to Gitpub Desktop</h1>
           <p class="subtitle">
@@ -170,7 +174,10 @@ function dashboardView() {
     <div class="layout">
       <aside class="sidebar stack">
         <div class="sidebar-brand">
-          <h2 class="title">Gitpub Desktop</h2>
+          <div class="sidebar-logo">
+            <img src="/assets/logos/Gitpub-Word-Logo-2-White.svg" alt="Gitpub" class="sidebar-logo-img" />
+            <span class="sidebar-logo-desktop">Desktop</span>
+          </div>
         </div>
 
         <div class="server-chip">