Skip to content

Commit 77c71bb

Browse files
arnest00arnest00
authored
feat: add branding header component (#11)
1 parent e5599e6 commit 77c71bb

File tree

5 files changed

+80
-11
lines changed

5 files changed

+80
-11
lines changed

‎src/components/Header.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
const HEADER_LOGO = `
2+
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
{/* Leaf */}
4+
<path
5+
d="M16 4C20 4 24 7 26 12C24 18 20 22 16 24C12 22 8 18 6 12C8 7 12 4 16 4Z"
6+
fill="rgb(34, 197, 94)"
7+
className="drop-shadow-sm"
8+
/>
9+
{/* Leaf vein */}
10+
<path
11+
d="M16 6L16 22"
12+
stroke="rgb(21, 128, 61)"
13+
strokeWidth="1"
14+
className="opacity-60"
15+
/>
16+
{/* Small bar chart at bottom */}
17+
<g transform="translate(10, 25)">
18+
<rect x="0" y="2" width="2" height="4" fill="rgb(34, 197, 94)" />
19+
<rect x="3" y="0" width="2" height="6" fill="rgb(234, 179, 8)" />
20+
<rect x="6" y="1" width="2" height="5" fill="rgb(239, 68, 68)" />
21+
<rect x="9" y="3" width="2" height="3" fill="rgb(34, 197, 94)" />
22+
</g>
23+
</svg>
24+
`;
25+
26+
export const createHeader = () => {
27+
const header = document.createElement("header");
28+
header.classList.add("cv-header");
29+
30+
header.innerHTML = HEADER_LOGO;
31+
const logo = header.querySelector("svg");
32+
logo.classList.add("cv-header__logo");
33+
34+
const title = document.createElement("h1");
35+
title.classList.add("cv-header__title");
36+
title.innerText = "Carbon Visualizer";
37+
header.append(title);
38+
39+
return header;
40+
}

‎src/core/Panel.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ class Panel {
4242

4343
// Load panel-specific JavaScript
4444
await this.loadPanelJS();
45+
46+
// Load universal components
47+
await this.loadHeader();
4548
}
4649

4750
async loadPanelHTML() {
@@ -96,6 +99,20 @@ class Panel {
9699
}
97100
}
98101

102+
async loadHeader() {
103+
try {
104+
// Import component module and insert onto the page
105+
const componentUrl = this.browserAPI.runtime.getURL('src/components/Header.js');
106+
const componentModule = await import(componentUrl);
107+
108+
const header = componentModule.createHeader();
109+
const fallbackHeader = this.container.querySelector('header.cv-header');
110+
fallbackHeader.replaceWith(header);
111+
} catch (error) {
112+
console.error(error);
113+
}
114+
}
115+
99116
async waitForElements() {
100117
// Wait a small amount for DOM to be ready
101118
await new Promise(resolve => setTimeout(resolve, 50));
@@ -120,8 +137,8 @@ class Panel {
120137

121138
getFallbackHTML() {
122139
return `
123-
<header class="cv-panel__header">
124-
<h2 class="cv-panel__title">Carbon Visualizer - ${this.type}</h2>
140+
<header class="cv-header">
141+
<h1 class="cv-header__title">Carbon Visualizer - ${this.type}</h1>
125142
</header>
126143
<main class="cv-panel__content">
127144
<p>Panel content for ${this.type}</p>

‎src/panels/results/results.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
</head>
77
<body>
88
<div id="cv-panel-content">
9-
<header class="cv-panel__header">
10-
<h1 class="cv-panel__title">Carbon Visualizer</h1>
9+
<header class="cv-header">
10+
<h1 class="cv-header__title">Carbon Visualizer</h1>
1111
</header>
1212

1313
<main class="cv-panel__content">

‎src/panels/welcome/welcome.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
</head>
77
<body>
88
<div id="cv-panel-content">
9-
<header class="cv-panel__header">
10-
<h1 class="cv-panel__title">Carbon Visualizer</h1>
9+
<header class="cv-header">
10+
<h1 class="cv-header__title">Carbon Visualizer</h1>
1111
</header>
1212

1313
<main class="cv-panel__content">

‎src/styles/core.css‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,28 @@
4343
}
4444

4545
/* Panel header */
46-
.cv-panel__header {
47-
padding: 1rem 1.5rem 0.5rem;
48-
border-bottom: 1px solid var(--cv-white);
46+
.cv-header {
47+
display: flex;
48+
gap: 1rem;
49+
align-items: center;
50+
padding: 1rem 1.5rem;
51+
/* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
52+
border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
53+
background-color: var(--cv-white);
54+
}
55+
56+
.cv-header__logo {
57+
--header-logo-dimensions: 2rem;
58+
59+
width: var(--header-logo-dimensions);
60+
height: var(--header-logo-dimensions);
4961
}
5062

51-
.cv-panel__title {
63+
.cv-header__title {
5264
margin: 0;
5365
font-size: 1.125rem;
5466
font-weight: 600;
55-
color: var(--cv-white);
67+
color: var(--cv-black);
5668
}
5769

5870
/* Panel content */

0 commit comments

Comments
 (0)