feat: show steps to get started

hello-nrfcloud · Jun 21, 2023 · 0ad13a3 · 0ad13a3
1 parent 4e95eeb
commit 0ad13a3
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 53 deletions.
diff --git a/src/components/ConnectDK.tsx b/src/components/ConnectDK.tsx
@@ -1,6 +1,6 @@
 import { useFingerprint } from '#context/Fingerprint.js'
 import { WaitingForData } from '#flows/WaitingForData.js'
-import { HelpCircle, PlugZap, Sun, ToggleRight } from 'lucide-preact'
+import { BatteryFull, HelpCircle, Sun, ToggleRight } from 'lucide-preact'
 import { styled } from 'styled-components'
 import { Secondary } from './buttons/Button.js'
 import { WarningLink } from './buttons/ButtonlikeLink.js'
@@ -36,12 +36,12 @@ export const ConnectDK = () => {
 						<SIMIcon /> Insert the SIM card
 					</li>
 					<li>
-						<PlugZap strokeWidth={1} />
-						Plug into a USB power source
+						<BatteryFull />
+						Make sure the battery is charged
 					</li>
 					<li>
-						<ToggleRight strokeWidth={1} />
-						Turn on
+						<ToggleRight />
+						Turn the kit on
 					</li>
 					<li>
 						<Sun strokeWidth={2} color="var(--color-nordic-power)" />
@@ -51,10 +51,10 @@ export const ConnectDK = () => {
 						<WaitingForData />
 					</li>
 					<li>
-						<HelpCircle strokeWidth={1} />
+						<HelpCircle />
 						No success?
 						<br />
-						<span class="mt-2">
+						<span class="mt-4">
 							<Secondary
 								class="me-2"
 								onClick={() => {

diff --git a/src/flows/SolarThingyFlow.tsx b/src/flows/SolarThingyFlow.tsx
@@ -1,6 +1,7 @@
 import { HistoryChart } from '#chart/HistoryChart.js'
 import type { ChartData } from '#chart/chartMath.js'
 import { Ago } from '#components/Ago.js'
+import { ConnectDK } from '#components/ConnectDK.js'
 import { useDevice, type MessageListenerFn } from '#context/Device.js'
 import { WaitingForData } from '#flows/WaitingForData.js'
 import { Context, HelloMessage } from '@hello.nrfcloud.com/proto/hello'
@@ -115,52 +116,68 @@ export const SolarThingyFlow = () => {
 	}
 
 	return (
-		<div style={{ backgroundColor: 'var(--color-nordic-lake)' }}>
-			<div class="container pt-4 pb-4">
-				<dl>
-					<>
-						<dt style={{ color: 'var(--color-nordic-sun)' }}>
-							<Sun /> Gain
-						</dt>
-						<dd style={{ color: 'var(--color-nordic-sun)' }}>
-							{currentGain === undefined && <WaitingForData />}
-							{currentGain !== undefined && (
-								<>
-									{currentGain.mA} mA{' '}
-									<small>
-										(<Ago date={new Date(currentGain.ts)} />)
-									</small>
-								</>
-							)}
-						</dd>
-					</>
-					<>
-						<dt style={{ color: 'var(--color-nordic-grass)' }}>
-							<BatteryCharging /> Voltage
-						</dt>
-						<dd style={{ color: 'var(--color-nordic-grass)' }}>
-							{currentVoltage === undefined && <WaitingForData />}
-							{currentVoltage !== undefined && (
-								<>
-									{currentVoltage.v} V{' '}
-									<small>
-										(<Ago date={new Date(currentVoltage.ts)} />)
-									</small>
-								</>
-							)}
-						</dd>
-					</>
-				</dl>
-				{(voltage.length > 0 || gain.length > 0) && (
-					<div ref={containerRef}>
-						<HistoryChart
-							width={chartSize[0]}
-							height={chartSize[1]}
-							data={chartData}
-						/>
+		<>
+			{currentGain === undefined && currentVoltage === undefined && (
+				<div
+					style={{ backgroundColor: 'var(--color-nordic-light-grey)' }}
+					class="py-4"
+				>
+					<div class="container">
+						<div class="row">
+							<div class="col-12">
+								<ConnectDK />
+							</div>
+						</div>
 					</div>
-				)}
+				</div>
+			)}
+			<div style={{ backgroundColor: 'var(--color-nordic-lake)' }}>
+				<div class="container pt-4 pb-4">
+					<dl>
+						<>
+							<dt style={{ color: 'var(--color-nordic-sun)' }}>
+								<Sun /> Gain
+							</dt>
+							<dd style={{ color: 'var(--color-nordic-sun)' }}>
+								{currentGain === undefined && <WaitingForData />}
+								{currentGain !== undefined && (
+									<>
+										{currentGain.mA} mA{' '}
+										<small>
+											(<Ago date={new Date(currentGain.ts)} />)
+										</small>
+									</>
+								)}
+							</dd>
+						</>
+						<>
+							<dt style={{ color: 'var(--color-nordic-grass)' }}>
+								<BatteryCharging /> Voltage
+							</dt>
+							<dd style={{ color: 'var(--color-nordic-grass)' }}>
+								{currentVoltage === undefined && <WaitingForData />}
+								{currentVoltage !== undefined && (
+									<>
+										{currentVoltage.v} V{' '}
+										<small>
+											(<Ago date={new Date(currentVoltage.ts)} />)
+										</small>
+									</>
+								)}
+							</dd>
+						</>
+					</dl>
+					{(voltage.length > 0 || gain.length > 0) && (
+						<div ref={containerRef}>
+							<HistoryChart
+								width={chartSize[0]}
+								height={chartSize[1]}
+								data={chartData}
+							/>
+						</div>
+					)}
+				</div>
 			</div>
-		</div>
+		</>
 	)
 }
diff --git a/src/page/RecognizingFingerprint.tsx b/src/page/RecognizingFingerprint.tsx
@@ -22,7 +22,7 @@ export const RecognizingFingerprint = () => {
 	return (
 		<main class="container py-4">
 			<div class="row py-4">
-				<div class="col-12 col-lg-6 offset-lg-3">
+				<div class="col-12">
 					<h1 class="mb-4 d-flex align-items-center justify-content-between">
 						<span>
 							Fingerprint: <code>{fingerprint}</code>