From 31f85a169c91d6b0748f33d781b856ac5fa06217 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sat, 1 Aug 2026 21:11:52 -0700 Subject: Coinos branding: logo and black & white theme Icons, favicon, and PWA assets come from the coinos brand set; the accent goes monochrome (black in light mode, white in dark, with a proper on-accent text variable so buttons stay legible both ways) and the inline bitcoin mark inherits the text color. Co-Authored-By: Claude Fable 5 --- build.js | 10 +++------- src/features/nwc.js | 2 +- src/format.js | 2 +- src/nwc-respond.js | 2 +- src/style.css | 18 ++++++++++-------- static/icon-192.png | Bin 4109 -> 12678 bytes static/icon-512.png | Bin 11584 -> 41410 bytes static/icon-maskable-512.png | Bin 7086 -> 41410 bytes static/icon.svg | 8 +++++--- 9 files changed, 21 insertions(+), 21 deletions(-) diff --git a/build.js b/build.js index b940fe8..1b1453b 100644 --- a/build.js +++ b/build.js @@ -11,11 +11,7 @@ import { mkdir, readdir } from 'node:fs/promises'; -const FAVICON = - 'data:image/svg+xml,' + - encodeURIComponent( - `₿` - ); +const FAVICON = 'data:image/svg+xml,%3Csvg%20width%3D%2272%22%20height%3D%2272%22%20viewBox%3D%220%200%2072%2072%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cpath%20d%3D%22M69.8824%2036C69.8824%2054.7127%2054.7127%2069.8824%2036%2069.8824C17.2873%2069.8824%202.11765%2054.7127%202.11765%2036C2.11765%2017.2873%2017.2873%202.11765%2036%202.11765C54.7127%202.11765%2069.8824%2017.2873%2069.8824%2036Z%22%20fill%3D%22white%22/%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%204.23529C18.4568%204.23529%204.23529%2018.4568%204.23529%2036C4.23529%2053.5432%2018.4568%2067.7647%2036%2067.7647C53.5432%2067.7647%2067.7647%2053.5432%2067.7647%2036C67.7647%2018.4568%2053.5432%204.23529%2036%204.23529ZM0%2036C0%2016.1177%2016.1177%200%2036%200C55.8823%200%2072%2016.1177%2072%2036C72%2055.8823%2055.8823%2072%2036%2072C16.1177%2072%200%2055.8823%200%2036Z%22%20fill%3D%22black%22/%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%2058.5882C48.4751%2058.5882%2058.5882%2048.4751%2058.5882%2036C58.5882%2023.5248%2048.4751%2013.4117%2036%2013.4117C23.5249%2013.4117%2013.4118%2023.5248%2013.4118%2036C13.4118%2048.4751%2023.5249%2058.5882%2036%2058.5882ZM36%2054C45.9411%2054%2054%2045.9411%2054%2036C54%2026.0589%2045.9411%2018%2036%2018C26.0589%2018%2018%2026.0589%2018%2036C18%2045.9411%2026.0589%2054%2036%2054Z%22%20fill%3D%22black%22/%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36.0001%2022.8988C36.0001%2022.8988%2036%2022.8988%2036%2022.8988C28.7644%2022.8988%2022.8988%2028.7644%2022.8988%2036C22.8988%2043.2356%2028.7644%2049.1012%2036%2049.1012C36%2049.1012%2036.0001%2049.1012%2036.0001%2049.1012V22.8988Z%22%20fill%3D%22black%22/%3E%20%3C/svg%3E'; // Static assets copied verbatim into dist/ (icons referenced by the manifest). const STATIC = ['icon-192.png', 'icon-512.png', 'icon-maskable-512.png', 'icon.svg']; @@ -29,7 +25,7 @@ const MANIFEST = { scope: './', display: 'standalone', background_color: '#eef0f3', - theme_color: '#f7931a', + theme_color: '#15171a', icons: [ { src: 'icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' }, { src: 'icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' }, @@ -102,7 +98,7 @@ self.addEventListener('fetch', (e) => { `; const PWA_HEAD = ` - + diff --git a/src/features/nwc.js b/src/features/nwc.js index ec85463..5c49273 100644 --- a/src/features/nwc.js +++ b/src/features/nwc.js @@ -326,7 +326,7 @@ export function nwcFeature(ctx) { if (method === 'get_info') { return { result: { - alias: 'Coinos', color: '#f7931a', network: getNetwork() === 'mainnet' ? 'mainnet' : getNetwork(), + alias: 'Coinos', color: '#15171a', network: getNetwork() === 'mainnet' ? 'mainnet' : getNetwork(), block_height: 0, block_hash: '', methods: METHODS, }, }; diff --git a/src/format.js b/src/format.js index b553f5c..a7f49c2 100644 --- a/src/format.js +++ b/src/format.js @@ -17,7 +17,7 @@ export const ARK_ICON = (px = 16) => const BTC_DISC = 'm63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z'; const BTC_B = 'm46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z'; export const BITCOIN_ICON = (px = 16) => - ``; + ``; export function btc(sats) { return (Number(sats) / SATS).toFixed(8); diff --git a/src/nwc-respond.js b/src/nwc-respond.js index 6289b01..fbbb98c 100644 --- a/src/nwc-respond.js +++ b/src/nwc-respond.js @@ -181,7 +181,7 @@ export async function respondFromBg(data, { await publish({ result_type: 'get_info', result: { - alias: 'Coinos', color: '#f7931a', + alias: 'Coinos', color: '#15171a', network: rec.ark.network === 'mainnet' ? 'mainnet' : rec.ark.network, block_height: 0, block_hash: '', methods: ['get_info', 'get_balance', 'pay_invoice', 'list_transactions'], diff --git a/src/style.css b/src/style.css index 4fe0394..17735eb 100644 --- a/src/style.css +++ b/src/style.css @@ -8,9 +8,10 @@ --faint: #9aa1ac; --line: #e6e8ec; --line-strong: #d4d8de; - --accent: #f7931a; /* bitcoin orange */ - --accent-ink: #b5670a; - --accent-soft: #fff3e2; + --accent: #15171a; /* coinos black */ + --accent-fg: #ffffff; /* text on accent */ + --accent-ink: #000000; + --accent-soft: #ececef; --green: #14935a; --green-soft: #e7f6ee; --green-line: #c4e7d4; @@ -38,9 +39,10 @@ --faint: #6f7782; --line: #2a2f37; --line-strong: #3a414b; - --accent: #f7931a; - --accent-ink: #f7a942; - --accent-soft: #2e2412; + --accent: #ffffff; /* coinos white on dark */ + --accent-fg: #0f1216; /* text on accent */ + --accent-ink: #e7e9ee; + --accent-soft: #262b33; --green: #2dbd80; --green-soft: #14271d; --green-line: #235340; @@ -101,7 +103,7 @@ summary { cursor: pointer; } .brand { display: flex; align-items: center; gap: 10px; } .logo { width: 34px; height: 34px; border-radius: 9px; flex: none; - background: var(--accent); color: #fff; font-weight: 800; font-size: 20px; + background: var(--accent); color: var(--accent-fg); font-weight: 800; font-size: 20px; display: grid; place-items: center; } .brand h1 { font-size: 19px; } @@ -153,7 +155,7 @@ button, .btn { button:hover { background: var(--surface2); } button:active { transform: translateY(1px); } button:disabled { opacity: .5; cursor: not-allowed; } -.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } +.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: #ec8a12; } .btn-ghost { background: transparent; } .btn-sm { padding: 7px 11px; font-size: 13px; border-radius: 9px; } diff --git a/static/icon-192.png b/static/icon-192.png index ce7992d..5638c43 100644 Binary files a/static/icon-192.png and b/static/icon-192.png differ diff --git a/static/icon-512.png b/static/icon-512.png index c0d953a..8fe3bd2 100644 Binary files a/static/icon-512.png and b/static/icon-512.png differ diff --git a/static/icon-maskable-512.png b/static/icon-maskable-512.png index 65abe21..8fe3bd2 100644 Binary files a/static/icon-maskable-512.png and b/static/icon-maskable-512.png differ diff --git a/static/icon.svg b/static/icon.svg index 5ef4cf0..7d7d8ec 100644 --- a/static/icon.svg +++ b/static/icon.svg @@ -1,4 +1,6 @@ - - - ₿ + + + + + -- cgit v1.2.3