Gitpub/Gitpub-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add white logo and revamp UI styles

Browse Source 
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.
This commit is contained in:
Andrew Zambazos
2026-05-09 18:23:41 +12:00
parent ce7f83734a
commit 17c0174e7d
4 changed files with 207 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/assets/logos/Gitpub-Word-Logo-2-White.svg
+24
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

frontend/css/base.css
+61 -26
View File
@@ -1,18 +1,18 @@
:root { :root {
--bg-app: #0b1018; --bg-app: #0d1117;
--bg-panel: #111a27; --bg-panel: #161b22;
--bg-panel-alt: #172234; --bg-panel-alt: #21262d;
--bg-hover: #1c2a3f; --bg-hover: #30363d;
--border: #253349; --border: #30363d;
--text-main: #e5edf7; --text-main: #e6edf3;
--text-muted: #94a7c0; --text-muted: #848d97;
--accent: #4f9dff; --accent: #2f81f7;
--accent-strong: #2f85f4; --accent-strong: #1f6feb;
--success: #41c48f; --success: #3fb950;
--danger: #ef6a6a; --danger: #f85149;
--radius-md: 10px; --radius-md: 6px;
--radius-lg: 14px; --radius-lg: 8px;
--shadow: 0 14px 40px rgba(5, 9, 16, 0.45); --shadow: 0 8px 24px rgba(1, 4, 9, 0.75);
} }
* { * {
@@ -24,9 +24,11 @@ body {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: radial-gradient(circle at top right, #172a47 0%, var(--bg-app) 55%); background: var(--bg-app);
color: var(--text-main); 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, button,
@@ -41,35 +43,68 @@ button {
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--bg-panel-alt); background: var(--bg-panel-alt);
color: var(--text-main); color: var(--text-main);
padding: 8px 12px; padding: 5px 12px;
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: background 0.1s ease, border-color 0.1s ease;
font-size: 14px;
} }
button:hover { button:hover {
transform: translateY(-1px); background: var(--bg-hover);
border-color: #3b4f6e; border-color: #8b949e;
} }
button.primary { button.primary {
background: linear-gradient(180deg, #5ca7ff 0%, var(--accent-strong) 100%); background: #238636;
border-color: #2670d6; 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 { button.danger {
border-color: #813434; border-color: rgba(248, 81, 73, 0.4);
color: #ffcaca; color: #f85149;
}
button.danger:hover {
background: rgba(248, 81, 73, 0.1);
border-color: #f85149;
} }
input, input,
select, select,
textarea { textarea {
width: 100%; width: 100%;
padding: 10px 12px; padding: 5px 12px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border); border: 1px solid var(--border);
background: #0f1724; background: var(--bg-app);
color: var(--text-main); 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 { textarea {
frontend/css/components.css
+114 -42
View File
@@ -13,12 +13,12 @@
.sidebar, .sidebar,
.rightbar { .rightbar {
background: rgba(13, 21, 34, 0.88); background: var(--bg-panel);
border-right: 1px solid var(--border); border-right: 1px solid var(--border);
} }
.sidebar { .sidebar {
padding: 16px; padding: 16px 12px;
overflow-y: auto; overflow-y: auto;
} }
@@ -29,18 +29,18 @@
overflow-y: auto; overflow-y: auto;
} }
.main { .main {
padding: 16px; padding: 16px;
overflow: auto; overflow: auto;
background: var(--bg-app);
} }
.panel { .panel {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
background: rgba(16, 26, 41, 0.92); background: var(--bg-panel);
box-shadow: var(--shadow); box-shadow: var(--shadow);
padding: 14px; padding: 16px;
} }
.stack { .stack {
@@ -66,14 +66,19 @@
.repo-card { .repo-card {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 10px; padding: 12px;
background: rgba(23, 34, 53, 0.75); background: var(--bg-panel);
transition: border-color 0.1s ease;
}
.repo-card:hover {
border-color: #8b949e;
} }
.repo-grid { .repo-grid {
display: grid; display: grid;
gap: 10px; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
} }
.repo-filter-pills { .repo-filter-pills {
@@ -90,17 +95,18 @@
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 13px;
cursor: pointer; 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 { .pill-btn:hover {
background: rgba(255, 255, 255, 0.06); background: var(--bg-hover);
color: var(--text-main); color: var(--text-main);
border-color: #8b949e;
} }
.pill-btn.active { .pill-btn.active {
background: var(--accent); background: var(--accent-strong);
border-color: var(--accent); border-color: rgba(240, 246, 252, 0.1);
color: #fff; color: #fff;
} }
@@ -115,13 +121,13 @@
} }
.org-badge { .org-badge {
font-size: 13px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--text-main); color: var(--text-muted);
background: rgba(255, 255, 255, 0.07); background: var(--bg-panel-alt);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: 999px;
padding: 2px 10px; padding: 1px 10px;
} }
.muted { .muted {
@@ -132,16 +138,19 @@
font-size: 12px; font-size: 12px;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 500;
} }
.title { .title {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 600;
color: var(--text-main);
} }
.subtitle { .subtitle {
margin: 0; margin: 0;
font-size: 13px; font-size: 14px;
color: var(--text-muted); color: var(--text-muted);
} }
@@ -171,28 +180,50 @@
min-height: 100%; min-height: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
padding: 24px; padding: 32px 24px;
background: var(--bg-app);
} }
.welcome-card { .welcome-card {
width: min(680px, 100%); 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 { .status-ok {
color: var(--success); color: var(--success);
font-weight: 500;
} }
.status-error { .status-error {
color: var(--danger); color: var(--danger);
font-weight: 500;
} }
/* ── Tabs ─────────────────────────────────────────── */ /* ── Tabs ─────────────────────────────────────────── */
.tabs { .tabs {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2px; gap: 0;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
padding: 0 4px; padding: 0;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -201,24 +232,24 @@
border: none; border: none;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
border-radius: 0; border-radius: 0;
padding: 10px 14px; padding: 10px 16px;
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 14px;
cursor: pointer; 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; margin-bottom: -1px;
} }
.tab-btn:hover { .tab-btn:hover {
transform: none; background: transparent;
color: var(--text-main); color: var(--text-main);
border-color: transparent; border-color: transparent;
background: transparent;
} }
.tab-btn.active { .tab-btn.active {
color: var(--text-main); color: var(--text-main);
border-bottom-color: var(--accent); border-bottom-color: #f78166;
font-weight: 600;
} }
.tab-spacer { .tab-spacer {
@@ -226,10 +257,10 @@
} }
.tab-search { .tab-search {
width: 180px !important; width: 200px !important;
padding: 6px 10px !important; padding: 5px 10px !important;
font-size: 13px; font-size: 13px;
margin: 4px 4px 4px 0; margin: 4px 8px 4px 0;
} }
.main-tabs { .main-tabs {
@@ -241,13 +272,39 @@
top: 0; top: 0;
margin: 0 -12px; margin: 0 -12px;
padding: 0 12px; padding: 0 12px;
background: rgba(13, 21, 34, 0.96); background: var(--bg-panel);
z-index: 1; z-index: 1;
} }
/* ── Sidebar ──────────────────────────────────────── */ /* ── Sidebar ──────────────────────────────────────── */
.sidebar-brand {
padding: 4px 0 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.sidebar-brand .title { .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 { .sidebar .server-chip {
@@ -267,8 +324,8 @@
.sidebar-btn { .sidebar-btn {
flex: 1; flex: 1;
font-size: 12px; font-size: 13px;
padding: 7px 8px; padding: 5px 8px;
text-align: center; text-align: center;
} }
@@ -286,22 +343,22 @@
text-overflow: ellipsis; text-overflow: ellipsis;
cursor: pointer; cursor: pointer;
color: var(--text-muted); color: var(--text-muted);
padding: 3px 0; padding: 4px 0;
font-size: 13px; font-size: 13px;
} }
.recent-item:hover { .recent-item:hover {
color: var(--text-main); color: var(--accent);
} }
/* ── Git output ───────────────────────────────────── */ /* ── Git output ───────────────────────────────────── */
.git-output { .git-output {
background: rgba(0, 0, 0, 0.35); background: #010409;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: 12px 14px; padding: 12px 14px;
font-size: 12px; font-size: 12px;
font-family: "Fira Code", "Cascadia Code", "Consolas", monospace; font-family: ui-monospace, "Cascadia Code", "Fira Code", "Consolas", monospace;
color: var(--success); color: var(--success);
overflow-x: auto; overflow-x: auto;
white-space: pre-wrap; white-space: pre-wrap;
@@ -313,35 +370,50 @@
.git-output-placeholder { .git-output-placeholder {
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
color: var(--text-muted);
margin: 0; margin: 0;
} }
.commit-note { .commit-note {
font-size: 11px; font-size: 11px;
margin-top: 4px; margin-top: 4px;
color: var(--text-muted);
} }
/* ── Local repo indicator ─────────────────────────── */ /* ── Local repo indicator ─────────────────────────── */
.selected-repo { .selected-repo {
font-size: 13px; font-size: 13px;
padding: 7px 10px; padding: 6px 10px;
background: rgba(79, 157, 255, 0.08); background: rgba(47, 129, 247, 0.06);
border: 1px solid rgba(79, 157, 255, 0.18); border: 1px solid rgba(47, 129, 247, 0.2);
border-radius: var(--radius-md); border-radius: var(--radius-md);
word-break: break-all; word-break: break-all;
color: var(--text-muted);
} }
/* ── Empty state ──────────────────────────────────── */ /* ── Empty state ──────────────────────────────────── */
.empty-state { .empty-state {
grid-column: 1 / -1; grid-column: 1 / -1;
text-align: center; text-align: center;
padding: 40px 16px; padding: 48px 16px;
} }
.empty-state > div:first-child { .empty-state > div:first-child {
font-size: 15px; font-size: 15px;
color: var(--text-main); color: var(--text-main);
margin-bottom: 6px; 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 ───────────────────────────────────── */ /* ── Responsive ───────────────────────────────────── */
frontend/js/app.js
+8 -1
View File
@@ -98,6 +98,10 @@ function welcomeView() {
appRoot.innerHTML = ` appRoot.innerHTML = `
<div class="welcome-wrap"> <div class="welcome-wrap">
<div class="welcome-card stack"> <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"> <div class="panel stack">
<h1 class="title">Welcome to Gitpub Desktop</h1> <h1 class="title">Welcome to Gitpub Desktop</h1>
<p class="subtitle"> <p class="subtitle">
@@ -170,7 +174,10 @@ function dashboardView() {
<div class="layout"> <div class="layout">
<aside class="sidebar stack"> <aside class="sidebar stack">
<div class="sidebar-brand"> <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>
<div class="server-chip"> <div class="server-chip">