fix: smaller UI fixes

pages/styleguide.page.server.ts

@@ -0,0 +1 @@
+export const prerender = (): string[] => ['/styleguide']

pages/styleguide.page.tsx

@@ -0,0 +1,12 @@
+import { Footer } from '#components/Footer.js'
+import { Navbar } from '#components/Navbar.js'
+import { Provider as AppSettingsProvider } from '#context/AppSettings.js'
+import { StyleGuidePage } from '#page/StyleGuide.js'
+
+export const Page = () => (
+	<AppSettingsProvider>
+		<Navbar />
+		<StyleGuidePage />
+		<Footer />
+	</AppSettingsProvider>
+)

src/components/AboutHeader.tsx

@@ -44,7 +44,7 @@ export const AboutHeader = () => (
 			class="pt-4 pb-4"
 		>
 			<header class="container pt-4 pb-4 text-white">
-				<div class="row d-flex align-items-center flex-direction-row">
+				<div class="row d-flex align-items-center flex-row">
 					<div class="col-12 col-sm-6 col-md-4">
 						<h1>
 							<Logo strokeWidth={2} color={'white'} /> hello.nrfcloud.com

src/components/Ago.tsx

@@ -1,5 +1,5 @@
 import { formatDistanceToNowStrict } from 'date-fns'
-import { UploadCloudIcon } from 'lucide-preact'
+import { HistoryIcon } from 'lucide-preact'
 import { useEffect, useState } from 'preact/hooks'
 
 export const Ago = ({ date }: { date: Date }) => {
@@ -17,7 +17,7 @@ export const Ago = ({ date }: { date: Date }) => {
 
 	return (
 		<time dateTime={date.toISOString()} class="text-nowrap">
-			<UploadCloudIcon strokeWidth={1} size={20} class="me-1" />
+			<HistoryIcon strokeWidth={1} size={20} class="me-1" />
 			{relTime}
 		</time>
 	)

src/components/Navbar.tsx

@@ -6,7 +6,6 @@ import {
 	Code2,
 	Cpu,
 	Fingerprint,
-	Home,
 	Link2Icon,
 	TerminalSquare,
 	TrashIcon,
@@ -42,9 +41,6 @@ const Navigation = () => {
 	const { fingerprint, clear } = useFingerprint()
 	return (
 		<>
-			<Link href="/">
-				<Home class="me-1" /> Home
-			</Link>
 			{fingerprint !== null && device === undefined && (
 				<Link
 					href="/recognizing-fingerprint"

src/components/buttons/Button.tsx

@@ -92,7 +92,7 @@ export const Button = ({
 	return (
 		<button type="button" {...rest} class={buttonStyleClass(rest)} ref={ref}>
 			<ButtonAngledEffect parentRef={ref} />
-			<span style={{ position: 'relative', zIndex: 99 }}>{children}</span>
+			<span style={{ position: 'relative', zIndex: 2 }}>{children}</span>
 		</button>
 	)
 }

src/flows/SolarThingyFlow.tsx

@@ -126,7 +126,7 @@ export const SolarThingyFlow = () => {
 						</dt>
 						<dd
 							style={{ color: 'var(--color-nordic-sun)' }}
-							class="d-flex flex-direction-column"
+							class="d-flex flex-column"
 						>
 							{currentGain === undefined && <LoadingIndicator light />}
 							{currentGain !== undefined && (
@@ -145,7 +145,7 @@ export const SolarThingyFlow = () => {
 						</dt>
 						<dd
 							style={{ color: 'var(--color-nordic-grass)' }}
-							class="d-flex flex-direction-column"
+							class="d-flex flex-column"
 						>
 							{currentBattery === undefined && <LoadingIndicator light />}
 							{currentBattery !== undefined && (

src/page/StyleGuide.tsx

@@ -0,0 +1,17 @@
+import { SourceHeader } from '#components/SourceHeader.js'
+import { StyleGuide } from '#components/StyleGuide.js'
+
+export const StyleGuidePage = () => (
+	<main>
+		<article>
+			<SourceHeader />
+			<div class="container mt-4">
+				<div class="row mt-4">
+					<div class="col-12">
+						<StyleGuide />
+					</div>
+				</div>
+			</div>
+		</article>
+	</main>
+)

src/page/ViewSource.tsx

@@ -1,6 +1,5 @@
 import { Secondary } from '#components/Buttons.js'
 import { SourceHeader } from '#components/SourceHeader.js'
-import { StyleGuide } from '#components/StyleGuide.js'
 import { useEffect, useState } from 'preact/hooks'
 import { QRCodeGenerator } from '../components/QRCodeGenerator.js'
 
@@ -41,7 +40,6 @@ export const ViewSource = () => (
 								.
 							</p>
 						</section>
-						<StyleGuide />
 					</div>
 					<div class="col-12 col-lg-6">
 						<h2>QR codes</h2>

static/base.css

@@ -239,7 +239,7 @@ code {
   height: 100%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.1);
-  z-index: 44;
+  z-index: 1;
   overflow: hidden;
   border-radius: 2px;
 }
@@ -248,7 +248,7 @@ code {
   height: 100%;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.1);
-  z-index: 44;
+  z-index: 1;
   overflow: hidden;
   border-radius: 2px;
 }
@@ -282,7 +282,7 @@ code {
     rgba(106, 209, 227, 0.05)
   );
   animation: loading 1s infinite;
-  z-index: 45;
+  z-index: 2;
 }
 
 @keyframes loading {