From d6d330e4dca5bb55d3ecc97a1bff2254fbdab82d Mon Sep 17 00:00:00 2001 From: Osmond Arnesto Date: Tue, 4 Nov 2025 10:11:17 -0800 Subject: [PATCH] feat: add branding header component --- src/components/Header.js | 40 +++++++++++++++++++++++++++++++++ src/core/Panel.js | 21 +++++++++++++++-- src/panels/results/results.html | 4 ++-- src/panels/welcome/welcome.html | 4 ++-- src/styles/core.css | 23 ++++++++++++++----- 5 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 src/components/Header.js diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..d37d3a7 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,40 @@ +const HEADER_LOGO = ` + + {/* Leaf */} + + {/* Leaf vein */} + + {/* Small bar chart at bottom */} + + + + + + + +`; + +export const createHeader = () => { + const header = document.createElement("header"); + header.classList.add("cv-header"); + + header.innerHTML = HEADER_LOGO; + const logo = header.querySelector("svg"); + logo.classList.add("cv-header__logo"); + + const title = document.createElement("h1"); + title.classList.add("cv-header__title"); + title.innerText = "Carbon Visualizer"; + header.append(title); + + return header; +} diff --git a/src/core/Panel.js b/src/core/Panel.js index 466fb20..6eb1b17 100644 --- a/src/core/Panel.js +++ b/src/core/Panel.js @@ -47,6 +47,9 @@ class Panel { // Load panel-specific JavaScript await this.loadPanelJS(); + + // Load universal components + await this.loadHeader(); } async loadPanelCSS() { @@ -116,6 +119,20 @@ class Panel { } } + async loadHeader() { + try { + // Import component module and insert onto the page + const componentUrl = this.browserAPI.runtime.getURL('src/components/Header.js'); + const componentModule = await import(componentUrl); + + const header = componentModule.createHeader(); + const fallbackHeader = this.container.querySelector('header.cv-header'); + fallbackHeader.replaceWith(header); + } catch (error) { + console.error(error); + } + } + async waitForElements() { // Wait a small amount for DOM to be ready await new Promise(resolve => setTimeout(resolve, 50)); @@ -140,8 +157,8 @@ class Panel { getFallbackHTML() { return ` -
-

Carbon Visualizer - ${this.type}

+
+

Carbon Visualizer - ${this.type}

Panel content for ${this.type}

diff --git a/src/panels/results/results.html b/src/panels/results/results.html index 4359767..bb4d473 100644 --- a/src/panels/results/results.html +++ b/src/panels/results/results.html @@ -6,8 +6,8 @@
-
-

Carbon Visualizer

+
+

Carbon Visualizer

diff --git a/src/panels/welcome/welcome.html b/src/panels/welcome/welcome.html index 8b8af27..f0a577a 100644 --- a/src/panels/welcome/welcome.html +++ b/src/panels/welcome/welcome.html @@ -6,8 +6,8 @@
-
-

Carbon Visualizer

+
+

Carbon Visualizer

diff --git a/src/styles/core.css b/src/styles/core.css index 83f5c27..36c0d63 100644 --- a/src/styles/core.css +++ b/src/styles/core.css @@ -22,6 +22,7 @@ /* neutrals */ --cv-black: hsl(0deg 0% 0%); --cv-white: hsl(0deg 0% 100%); + --cv-grey: hsl(0deg 0% 50%); } .cv-panel { @@ -43,16 +44,28 @@ } /* Panel header */ -.cv-panel__header { - padding: 1rem 1.5rem 0.5rem; - border-bottom: 1px solid var(--cv-white); +.cv-header { + display: flex; + gap: 1rem; + align-items: center; + padding: 1rem 1.5rem; + /* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */ + border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h); + background-color: var(--cv-white); +} + +.cv-header__logo { + --header-logo-dimensions: 2rem; + + width: var(--header-logo-dimensions); + height: var(--header-logo-dimensions); } -.cv-panel__title { +.cv-header__title { margin: 0; font-size: 1.125rem; font-weight: 600; - color: var(--cv-white); + color: var(--cv-black); } /* Panel content */