Overview
diff --git a/packages/demo/public/manifest.webmanifest b/packages/demo/public/manifest.webmanifest
index 2a55103..2a3d029 100644
--- a/packages/demo/public/manifest.webmanifest
+++ b/packages/demo/public/manifest.webmanifest
@@ -5,8 +5,8 @@
"start_url": "./account.html",
"scope": "./",
"display": "standalone",
- "background_color": "#0b0b12",
- "theme_color": "#8b5cf6",
+ "background_color": "#0d0b12",
+ "theme_color": "#8368ff",
"icons": [
{ "src": "./assets/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" }
]
diff --git a/packages/widget/src/element.ts b/packages/widget/src/element.ts
index 946f449..a686637 100644
--- a/packages/widget/src/element.ts
+++ b/packages/widget/src/element.ts
@@ -806,11 +806,23 @@ export class BitLoginAuthElement extends HTMLElement {
return this.sessionWarnings.map((w) => `
${escapeHtml(w)}
`).join("");
}
+ /** The widget's own brand lockup (mark + wordmark), inlined as vector paths rather than
+ * relying on the host page having loaded any particular font -- shown once, on the
+ * welcome screen, as the widget's one branding moment. */
+ private renderBrandLockup(): string {
+ return `
+
+ `;
+ }
+
private renderScreen(): string {
switch (this.screen) {
case "welcome":
return `
-
BitLogin
+ ${this.renderBrandLockup()}
A portable Nostr identity with a familiar login name and password.
${this.renderError()}
diff --git a/packages/widget/src/styles.ts b/packages/widget/src/styles.ts
index fb58717..2a5274a 100644
--- a/packages/widget/src/styles.ts
+++ b/packages/widget/src/styles.ts
@@ -68,6 +68,21 @@ h2 {
font-weight: 600;
margin: 0 0 4px;
}
+.brand-lockup {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin: 0 0 6px;
+ color: var(--bl-fg);
+}
+.brand-lockup .mark {
+ width: 22px;
+ height: 22px;
+ flex-shrink: 0;
+ display: inline-block;
+}
+.brand-lockup .mark svg { width: 100%; height: 100%; display: block; }
+.brand-lockup .wordmark { height: 17px; width: auto; display: block; }
p.sub {
color: var(--bl-muted);
margin: 0 0 18px;