💄 📦 use fontawesome icons in AppBar (#108)

* 📦 gains fontawesome dependency * use different FA library * use fontawesome icons instead of buttons * use fontawesome-free * remove unused dep * make buttons bigger * add hover effect * link to knowledge hub * remove hover-over * Update src/routes/+layout.svelte Co-authored-by: Monika Furdyna <[email protected]> * Update src/routes/+layout.svelte Co-authored-by: Monika Furdyna <[email protected]> * Update src/routes/+layout.svelte Co-authored-by: Monika Furdyna <[email protected]> * prettier --------- Co-authored-by: Alex Axthelm <[email protected]> Co-authored-by: Monika Furdyna <[email protected]>
RMI-PACTA · Dec 9, 2024 · 8f88a29 · 8f88a29
1 parent e44f33d
commit 8f88a29
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,7 +47,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "1.6.7",
+		"@floating-ui/dom": "^1.6.7",
+		"@fortawesome/fontawesome-free": "^6.7.1",
 		"d3": "^5.16.0",
 		"d3-array": "^3.2.4",
 		"d3-color": "^3.1.0",

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -60,18 +60,35 @@
 			</svelte:fragment>
 			<h1 class="text-xl app-bar-custom">PACTA Climate Alignment Tool</h1>
 			<svelte:fragment slot="trail">
-				<a
-					class="btn btn-sm variant-filled-secondary"
-					href="https://github.com/RMI-PACTA/pacta-dashboard-svelte"
-					target="_blank"
-					rel="noreferrer"
-				>
-					GitHub
-				</a>
-				<button class="btn btn-sm variant-filled-primary" on:click={downloadArchive}
-					>Save Data</button
-				>
-				<button class="btn btn-sm variant-filled-primary">Help</button>
+				<span class="btn-icon variant-filled">
+					<a
+						href="https://github.com/RMI-PACTA/pacta-dashboard-svelte"
+						target="_blank"
+						rel="noreferrer"
+						title="GitHub"
+					>
+						<i class="fab fa-xl fa-github"></i>
+					</a>
+				</span>
+				<span class="btn-icon variant-filled">
+					<button on:click={downloadArchive} title="Save data">
+						<i class="fas fa-xl fa-floppy-disk"></i>
+					</button>
+					<div class="card p-4 variant-filled-primary" data-popup="popupHover">
+						<p>Save Data</p>
+						<div class="arrow variant-filled-primary" />
+					</div>
+				</span>
+				<span class="btn-icon variant-filled">
+					<a
+						href="https://rmi.gitbook.io/pacta-knowledge-hub"
+						target="_blank"
+						rel="noreferrer"
+						title="PACTA Knowledge Hub"
+					>
+						<i class="fas fa-xl fa-question"></i>
+					</a>
+				</span>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>

diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -1 +1,2 @@
 export const prerender = true;
+import '@fortawesome/fontawesome-free/css/all.min.css';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const prerender = true;
		import '@fortawesome/fontawesome-free/css/all.min.css';