Make an IRC network legible in the rail at a glance

A known network was told apart by colouring its two letters. Two thin
glyphs in a mid tone read as almost nothing at that size: measured
against an active tile, Libera came out at 1.7:1 and OFTC, Rizon, EFnet,
Snoonet and Undernet were all below 2.6:1.

The colour is the tile now, with white letters on it, which is legible at
a glance - the whole job of a rail. Six of the eight were a shade too
bright to carry white text and were darkened to clear 4.6:1; hue and
saturation are untouched, so each still reads as the colour that network
is known by, the same trade the bubble colours already make.

Still initials rather than logos. Those belong to the networks that own
them, and shipping copies is not a decision this file gets to make -
anyone who wants the real one can already import it from Accounts, which
outranks everything here.

Co-Authored-By: Claude Opus 5 <[email protected]>

src/renderer/src/app.css

@@ -2447,6 +2447,19 @@ video.lightbox-media {
   letter-spacing: 0.02em;
 }
 
+/* A network's colour as the tile rather than as the letters. Fills the whole
+   tile so it reads at rail size, and inherits the tile's rounding so it does
+   not sit as a square inside a rounded one. */
+.rail-initials-filled {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  color: #ffffff;
+}
+
 /* Which service a tile belongs to, in the corner. Small and quiet - it
    identifies, it does not demand attention the way a count does. */
 .rail-service {

src/renderer/src/components/ServerRail.tsx

@@ -97,11 +97,19 @@ function GroupFace({ group, customIcon }: { group: RailGroup; customIcon?: strin
     // same generic "#" every network would otherwise share - which is the
     // one thing the rail exists to avoid. Initials rather than logos: those
     // belong to the networks that own them, and a wrong-looking copy of
-    // somebody's logo is worse than two clean letters.
+    // somebody's logo is worse than two clean letters. Anyone who wants the
+    // real one can import it; a custom icon is handled above and outranks
+    // this.
+    //
+    // The colour fills the tile and the letters are white, rather than the
+    // letters carrying the colour on the ordinary tile background. Two thin
+    // glyphs in a mid tone read as almost nothing at this size - Libera
+    // managed 1.7:1 against an active tile - where a filled tile is legible
+    // at a glance, which is the whole job of a rail.
     const network = group.service === 'irc' ? ircNetworkFor(group.name) : null
     if (network) {
       return (
-        <span className="rail-initials" style={{ color: network.colour }}>
+        <span className="rail-initials rail-initials-filled" style={{ background: network.colour }}>
           {network.mark}
         </span>
       )

src/renderer/src/lib/networks.ts

@@ -10,7 +10,16 @@
  * Colours are the network's own where it has a recognisable one, and are used
  * to tell one server tile from another in the rail. Marks are initials rather
  * than logos: those belong to the networks that own them, and a wrong-looking
- * copy of somebody's logo is worse than two clean letters.
+ * copy of somebody's logo is worse than two clean letters. Anybody who wants
+ * a network's real logo can import one - see the icon picker in Accounts,
+ * which outranks everything here.
+ *
+ * Each is deep enough to carry white initials at 4.6:1 or better, because
+ * the tile is filled with it. Several were a shade or two brighter and were
+ * darkened rather than dropped: they were being used as coloured text on the
+ * tile instead, where Libera managed 1.7:1 against an active tile and was
+ * effectively invisible. Hue and saturation are untouched, so each still
+ * reads as the colour that network is known by.
  */
 export interface IrcNetwork {
   id: string
@@ -25,13 +34,13 @@ export interface IrcNetwork {
 
 export const IRC_NETWORKS: IrcNetwork[] = [
   { id: 'libera', name: 'Libera.Chat', host: 'irc.libera.chat', port: 6697, tls: true, mark: 'Li', colour: '#7f4bd8' },
-  { id: 'oftc', name: 'OFTC', host: 'irc.oftc.net', port: 6697, tls: true, mark: 'OF', colour: '#2f7fbf' },
-  { id: 'rizon', name: 'Rizon', host: 'irc.rizon.net', port: 6697, tls: true, mark: 'Ri', colour: '#c94f4f' },
-  { id: 'quakenet', name: 'QuakeNet', host: 'irc.quakenet.org', port: 6667, tls: false, mark: 'QN', colour: '#d08a2a' },
-  { id: 'efnet', name: 'EFnet', host: 'irc.efnet.org', port: 6697, tls: true, mark: 'EF', colour: '#4c8f6b' },
+  { id: 'oftc', name: 'OFTC', host: 'irc.oftc.net', port: 6697, tls: true, mark: 'OF', colour: '#2d7ab7' },
+  { id: 'rizon', name: 'Rizon', host: 'irc.rizon.net', port: 6697, tls: true, mark: 'Ri', colour: '#c84b4b' },
+  { id: 'quakenet', name: 'QuakeNet', host: 'irc.quakenet.org', port: 6667, tls: false, mark: 'QN', colour: '#9f6a20' },
+  { id: 'efnet', name: 'EFnet', host: 'irc.efnet.org', port: 6697, tls: true, mark: 'EF', colour: '#448060' },
   { id: 'undernet', name: 'Undernet', host: 'irc.undernet.org', port: 6697, tls: true, mark: 'UN', colour: '#3f6fa8' },
-  { id: 'snoonet', name: 'Snoonet', host: 'irc.snoonet.org', port: 6697, tls: true, mark: 'Sn', colour: '#e06a3a' },
-  { id: 'hackint', name: 'hackint', host: 'irc.hackint.org', port: 6697, tls: true, mark: 'hi', colour: '#5f9ea0' }
+  { id: 'snoonet', name: 'Snoonet', host: 'irc.snoonet.org', port: 6697, tls: true, mark: 'Sn', colour: '#c54f1f' },
+  { id: 'hackint', name: 'hackint', host: 'irc.hackint.org', port: 6697, tls: true, mark: 'hi', colour: '#4b7d7e' }
 ]
 
 /**