From ed2e0640b48148b69eca00ad7dd06789506e12ac Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Sat, 15 Aug 2026 00:10:12 +0200
Subject: One stroked icon set, matching the Administration shield
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The site drew its icons with colour emoji, which means a different
drawing on every operating system and never the same line weight twice —
except the Administration entry, whose shield is a text-default glyph and
so rendered as a thin outline. That one was the odd one out and also the
one that looked right.

Fifteen inline SVG paths now replace it: menu, bell, shield, globe, gear,
sun, moon, power, lock, envelope, door, clip, check, chevron, close. They
are stroked in currentColor and sized in em, so an icon takes the colour
and size of the text beside it and needs no rule of its own — the caret
in the dark nav bar and the gear in a light dropdown are the same file.

The explorer keeps its emoji. There the icon says what kind of file this
is and the colour is doing real work; a wall of identical grey outlines
would be a worse file list.

One bug fell out of the change: .nav-notif was painted with --text, the
page's text colour, on a nav bar that is nearly black. The emoji bell
carried its own colours and showed anyway; a stroked one was invisible
until it was given --nav-text.

Checked by rendering the real stylesheet in headless Chrome, light and
dark.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../meshbay-hub/src/meshbay_hub/static/style.css   | 29 +++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index da29027..2d1eb65 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -57,6 +57,19 @@ body {
 a { color: var(--accent); text-decoration: none; }
 a:hover { text-decoration: underline; }
 
+/* ── Icons ────────────────────────────────────────────────────────────────── */
+
+/* Sized in em and stroked in currentColor, so an icon inherits the size and
+   colour of whatever it sits next to and needs no rule of its own. Only the
+   places that want a fixed size say so below. */
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.14em;
+  flex-shrink: 0;
+}
+.icon.flip { transform: rotate(180deg); }
+
 /* ── Navigation ───────────────────────────────────────────────────────────── */
 
 .nav {
@@ -166,9 +179,10 @@ a:hover { text-decoration: underline; }
 .user-menu-item:hover { background: var(--bg-raised); }
 .user-menu-logout { color: var(--error); }
 
-.umi-icon { width: 18px; text-align: center; font-size: 0.95em; flex-shrink: 0; }
-.umi-arrow { margin-left: auto; font-size: 0.7em; color: var(--text-dim); }
-.umi-check { margin-left: auto; color: var(--accent); font-size: 0.85em; }
+.umi-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-secondary); }
+.umi-arrow { margin-left: auto; width: 13px; height: 13px; color: var(--text-dim); }
+.umi-check { margin-left: auto; width: 14px; height: 14px; color: var(--accent); }
+.user-menu-caret { width: 13px; height: 13px; color: var(--nav-text); opacity: 0.8; }
 .user-menu-sub { padding-left: 32px; }
 
 .nav-btn {
@@ -1250,9 +1264,11 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 .nav-notif {
   position: relative;
-  color: var(--text);
+  /* --text is the page's text colour and the nav is dark: the emoji bell was
+     coloured so it showed anyway, a stroked one would have been invisible. */
+  color: var(--nav-text);
   text-decoration: none;
-  font-size: 1.1rem;
+  font-size: 1.25rem;
   margin-right: 4px;
 }
 .notif-badge {
@@ -1360,12 +1376,13 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   transition: border-color 0.12s, background 0.12s;
 }
 .option-card:hover { border-color: var(--accent); background: var(--bg-base); }
+.option-card.selected .option-icon { color: var(--accent); }
 .option-card.selected {
   border-color: var(--accent);
   background: color-mix(in srgb, var(--accent) 8%, var(--bg-base));
 }
 
-.option-icon { font-size: 1.5em; margin-bottom: 2px; }
+.option-icon { width: 26px; height: 26px; margin-bottom: 2px; color: var(--text-secondary); }
 .option-title { font-weight: 600; font-size: 0.9em; color: var(--text); }
 .option-desc { font-size: 0.75em; color: var(--text-dim); line-height: 1.3; }
 
-- 
cgit v1.2.3