From b649f4d0124f9a33111db866955a6621fa547fc7 Mon Sep 17 00:00:00 2001 From: Fredrik Johansson Date: Wed, 8 Jul 2026 22:59:37 +0200 Subject: [PATCH] Restyle web UI with terminal-green theme and monospace font Switch accent color from purple to green, add JetBrains Mono font, and unify light/dark palettes into a single dark theme. --- web/index.html | 5 ++++- web/public/manifest.json | 4 ++-- web/src/App.css | 39 ++++++++++++++++++++-------------- web/src/index.css | 46 +++++++++++++--------------------------- 4 files changed, 44 insertions(+), 50 deletions(-) diff --git a/web/index.html b/web/index.html index c888bf7..333857c 100644 --- a/web/index.html +++ b/web/index.html @@ -4,7 +4,10 @@ - + + + + diff --git a/web/public/manifest.json b/web/public/manifest.json index 96cb14c..9023aa4 100644 --- a/web/public/manifest.json +++ b/web/public/manifest.json @@ -4,8 +4,8 @@ "description": "Decentralized friend-to-friend encrypted mesh networking", "start_url": "/", "display": "standalone", - "background_color": "#0d0d0d", - "theme_color": "#863bff", + "background_color": "#080808", + "theme_color": "#00e87a", "icons": [ { "src": "/icon-192.png", diff --git a/web/src/App.css b/web/src/App.css index 22f01fd..60fd0d0 100644 --- a/web/src/App.css +++ b/web/src/App.css @@ -1,26 +1,33 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { - --bg: #0f0f13; - --surface: #1a1a22; - --border: #2a2a36; - --accent: #7c6af7; - --text: #e0e0e8; - --muted: #6b6b80; + --bg: #080808; + --surface: #0e0e0e; + --border: rgba(255, 255, 255, 0.09); + --accent: #00e87a; + --accent-dim: rgba(0, 232, 122, 0.12); + --accent-border: rgba(0, 232, 122, 0.3); + --text: #c8c8c8; + --heading: #f0f0f0; + --muted: #666; + --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace; --sidebar-w: 220px; } html, body, #root { height: 100%; } -body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; } +body { background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px; -webkit-font-smoothing: antialiased; } -button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; } +button { cursor: pointer; background: var(--accent); color: #000; border: 1px solid var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-family: var(--mono); font-weight: 600; transition: all 0.15s; } +button:hover:not(:disabled) { background: #00ff88; border-color: #00ff88; } +button:active:not(:disabled) { transform: scale(0.98); } button:disabled { opacity: 0.4; cursor: default; } -input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; } -input:focus { border-color: var(--accent); } +input { background: var(--surface); color: var(--heading); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; font-family: var(--mono); outline: none; width: 100%; } +input:focus { border-color: var(--accent-border); } /* ── onboarding ── */ .onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; max-width: 380px; margin: 0 auto; padding: 2rem; } -.onboarding h1 { font-size: 2rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; } +.onboarding h1 { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; color: var(--heading); margin-bottom: 4px; } +.onboarding h1::before { content: '> '; color: var(--muted); font-weight: 400; } .onboarding .status { color: var(--muted); font-size: 13px; } .onboarding .status.connecting { color: var(--accent); } .onboarding .status.disconnected { color: #e06060; } @@ -69,7 +76,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; } .sidebar-new-room input { font-size: 12px; padding: 4px 8px; } .sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .sidebar-item:hover { background: rgba(255,255,255,0.04); } -.sidebar-item.active { background: var(--accent); color: #fff; } +.sidebar-item.active { background: var(--accent); color: #000; font-weight: 600; } .sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; } /* peer rows in sidebar */ @@ -127,7 +134,7 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; } .file-entry-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-entry-size { color: var(--muted); font-size: 11px; flex-shrink: 0; } .file-entry-dl { background: none; color: var(--accent); font-size: 14px; padding: 1px 4px; flex-shrink: 0; } -.file-entry-dl:hover { background: rgba(124,106,247,0.15); } +.file-entry-dl:hover { background: var(--accent-dim); } /* ── share manager ── */ .share-manager { width: 100%; display: flex; flex-direction: column; gap: 4px; } @@ -179,11 +186,11 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; } .reaction-add:hover { color: var(--accent); background: none; } .reaction-picker { display: flex; gap: 4px; padding: 4px 16px 2px; } .reaction-picker-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 18px; padding: 2px 6px; line-height: 1.4; cursor: pointer; } -.reaction-picker-btn:hover { border-color: var(--accent); background: rgba(124,106,247,0.12); } +.reaction-picker-btn:hover { border-color: var(--accent); background: var(--accent-dim); } .reaction-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 16px 4px; } .reaction-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; padding: 1px 8px; cursor: pointer; color: var(--text); } -.reaction-chip:hover { border-color: var(--accent); background: rgba(124,106,247,0.1); } -.reaction-chip.mine { border-color: var(--accent); background: rgba(124,106,247,0.18); } +.reaction-chip:hover { border-color: var(--accent); background: rgba(0,232,122,0.1); } +.reaction-chip.mine { border-color: var(--accent); background: rgba(0,232,122,0.18); } /* ── mobile hamburger / close buttons ── */ .menu-btn-mobile { display: none; background: none; color: var(--muted); font-size: 18px; padding: 0 8px 0 0; line-height: 1; } diff --git a/web/src/index.css b/web/src/index.css index 5fb3313..06e5567 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1,23 +1,23 @@ :root { - --text: #6b6375; - --text-h: #08060d; - --bg: #fff; - --border: #e5e4e7; - --code-bg: #f4f3ec; - --accent: #aa3bff; - --accent-bg: rgba(170, 59, 255, 0.1); - --accent-border: rgba(170, 59, 255, 0.5); - --social-bg: rgba(244, 243, 236, 0.5); + --text: #c8c8c8; + --text-h: #f0f0f0; + --bg: #080808; + --border: rgba(255, 255, 255, 0.09); + --code-bg: #0e0e0e; + --accent: #00e87a; + --accent-bg: rgba(0, 232, 122, 0.12); + --accent-border: rgba(0, 232, 122, 0.3); + --social-bg: rgba(14, 14, 14, 0.5); --shadow: - rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px; + 0 0 0 1px rgba(255, 255, 255, 0.04), 0 4px 24px rgba(0, 0, 0, 0.6); --sans: system-ui, 'Segoe UI', Roboto, sans-serif; - --heading: system-ui, 'Segoe UI', Roboto, sans-serif; - --mono: ui-monospace, Consolas, monospace; + --heading: 'JetBrains Mono', ui-monospace, monospace; + --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; font: 18px/145% var(--sans); letter-spacing: 0.18px; - color-scheme: light dark; + color-scheme: dark; color: var(--text); background: var(--bg); font-synthesis: none; @@ -30,24 +30,8 @@ } } -@media (prefers-color-scheme: dark) { - :root { - --text: #9ca3af; - --text-h: #f3f4f6; - --bg: #16171d; - --border: #2e303a; - --code-bg: #1f2028; - --accent: #c084fc; - --accent-bg: rgba(192, 132, 252, 0.15); - --accent-border: rgba(192, 132, 252, 0.5); - --social-bg: rgba(47, 48, 58, 0.5); - --shadow: - rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px; - } - - #social .button-icon { - filter: invert(1) brightness(2); - } +#social .button-icon { + filter: invert(1) brightness(2); } #root {