From ec01711b171527e283f77547df28615939597f70 Mon Sep 17 00:00:00 2001
From: phoebus-84 <83974413+phoebus-84@users.noreply.github.com>
Date: Fri, 16 Feb 2024 00:26:05 +0100
Subject: [PATCH] fix: use only didroom components buttons (#147)

---
 messages/en.json                                |  6 +++++-
 src/lib/JSONSchemaForms/JSONSchemaForm.svelte   |  3 +--
 .../JSONSchemaForms/JSONSchemaFormField.svelte  | 17 ++++++++---------
 src/lib/components/copyButton.svelte            | 13 ++++++-------
 src/lib/components/molecules/ScanButton.svelte  | 10 ++++++----
 .../components/organisms/scanner/Scanner.svelte |  4 ++--
 src/routes/(tests)/slangroom/+page.svelte       |  2 +-
 src/routes/+error.svelte                        |  2 +-
 src/routes/+layout.svelte                       |  4 ++--
 .../login/(methods)/passphrase/+page.svelte     |  2 +-
 .../login/(methods)/questions/+page.svelte      |  4 ++--
 src/routes/[[lang]]/(auth)/login/+page.svelte   |  4 +---
 .../[id]/credential-offer/+page.svelte          |  9 +++++----
 .../[[lang]]/(protected)/profile/+page.svelte   |  2 +-
 14 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/messages/en.json b/messages/en.json
index e55aef89..1956708e 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -36,5 +36,9 @@
 	"Make_sure_to_scan_the_full_QR_surface_": "Scan the full QR surface ",
 	"Copied": "Copied!",
 	"Submit": "Submit",
-	"Add_an_item": "Add an item"
+	"Add_an_item": "Add an item",
+	"Credential_offer": "Credential offer",
+	"Get_this_credential": "Get this credential",
+	"Decline": "Decline",
+	"Scan": "Scan"
 }
diff --git a/src/lib/JSONSchemaForms/JSONSchemaForm.svelte b/src/lib/JSONSchemaForms/JSONSchemaForm.svelte
index 9116b60e..4cde3749 100644
--- a/src/lib/JSONSchemaForms/JSONSchemaForm.svelte
+++ b/src/lib/JSONSchemaForms/JSONSchemaForm.svelte
@@ -52,8 +52,7 @@
 		</FormError>
 
 		<div class="flex justify-end">
-			<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-			<ion-button type="submit">{m.Submit()}</ion-button>
+			<d-button type="submit">{m.Submit()}</d-button>
 		</div>
 	</div>
 </Form>
diff --git a/src/lib/JSONSchemaForms/JSONSchemaFormField.svelte b/src/lib/JSONSchemaForms/JSONSchemaFormField.svelte
index d3e23a20..a4ee8cb4 100644
--- a/src/lib/JSONSchemaForms/JSONSchemaFormField.svelte
+++ b/src/lib/JSONSchemaForms/JSONSchemaFormField.svelte
@@ -190,26 +190,25 @@
 							fieldWrapper={SlotWrapper}
 						/>
 						<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-						<ion-button slot="end" shape="round" color="medium" on:click={removeItem}>
+						<d-button slot="end" color="primary" on:click={removeItem}>
 							<ion-icon slot="icon-only" icon={removeOutline} />
-						</ion-button>
+						</d-button>
 					</ion-item>
 				</svelte:fragment>
 				<svelte:fragment slot="after-items" let:addItem let:canAdd>
 					{#if canAdd}
 						<ion-item>
-							<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
-							<ion-button
-								class="grow"
-								expand="full"
-								shape="round"
-								color="light"
+							<d-button
+								expand
+								color="accent"
 								disabled={!canAdd}
 								on:click={addItem}
+								on:keydown={addItem}
+								aria-hidden
 							>
 								<ion-icon slot="start" icon={addOutline} />
 								{m.Add_an_item()}
-							</ion-button>
+							</d-button>
 						</ion-item>
 					{/if}
 				</svelte:fragment>
diff --git a/src/lib/components/copyButton.svelte b/src/lib/components/copyButton.svelte
index e022c025..adcdecbd 100644
--- a/src/lib/components/copyButton.svelte
+++ b/src/lib/components/copyButton.svelte
@@ -20,13 +20,12 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-interactive-supports-focus -->
-<ion-button role="button" on:click={copyText} color="light">
+<d-button role="button" on:click={copyText} color="accent">
 	{#if !isCopied}
-		<span>📄</span>
-		<span class="ml-2">
-			<slot />
-		</span>
+		<span slot="start">📄</span>
+		<slot />
 	{:else}
-		<span class="whitespace-nowrap">✅ {m.Copied()}</span>
+		<span slot="start">✅</span>
+		{m.Copied()}
 	{/if}
-</ion-button>
+</d-button>
diff --git a/src/lib/components/molecules/ScanButton.svelte b/src/lib/components/molecules/ScanButton.svelte
index de8a2fa5..df67b32e 100644
--- a/src/lib/components/molecules/ScanButton.svelte
+++ b/src/lib/components/molecules/ScanButton.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
 	import { r } from '$lib/i18n';
 	import { qrCode } from 'ionicons/icons';
+	import { m } from '$lib/i18n';
 </script>
 
-<ion-fab-button href={r('/scan')}>
-	<ion-icon icon={qrCode} translucent />
-</ion-fab-button>
+<d-button href={r('/scan')} color="accent" size="large">
+	<ion-icon icon={qrCode} slot="start" />
+	{m.Scan()}
+</d-button>
 
 <style lang="postcss">
-	ion-fab-button {
+	d-button {
 		--border-radius: 10%;
 		opacity: 0.8;
 		position: fixed;
diff --git a/src/lib/components/organisms/scanner/Scanner.svelte b/src/lib/components/organisms/scanner/Scanner.svelte
index 4d773e98..7574abb9 100644
--- a/src/lib/components/organisms/scanner/Scanner.svelte
+++ b/src/lib/components/organisms/scanner/Scanner.svelte
@@ -57,9 +57,9 @@
 	<ion-toolbar>
 		<div class="flex flex-row">
 			<ion-title>{m.QR_SCAN()}</ion-title>
-			<ion-button tab="account" on:click={stopScan} on:keydown={stopScan} aria-hidden fill="clear">
+			<button on:click={stopScan} on:keydown={stopScan} aria-hidden>
 				<ion-icon icon={close}></ion-icon>
-			</ion-button>
+			</button>
 		</div>
 	</ion-toolbar>
 </ion-header>
diff --git a/src/routes/(tests)/slangroom/+page.svelte b/src/routes/(tests)/slangroom/+page.svelte
index 0698db7d..8f49f6ce 100644
--- a/src/routes/(tests)/slangroom/+page.svelte
+++ b/src/routes/(tests)/slangroom/+page.svelte
@@ -72,7 +72,7 @@
 				<Input {form} fieldPath="password" type="password" />
 			</ion-list>
 
-			<ion-button role="button" type="submit" tabindex={0}>login</ion-button>
+			<d-button role="button" type="submit" tabindex={0}>login</d-button>
 
 			<FormError {form} let:errorMessage>
 				<ion-text color="danger">
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 8b07043f..88def903 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -4,4 +4,4 @@
 </script>
 
 <h1>{$page.status}: {$page.error?.message}</h1>
-<ion-button href={r('/')}>Go to home</ion-button>
+<d-button href={r('/')} expand>Go to home</d-button>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 71c4f25b..b3c6da9d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -19,11 +19,11 @@
 	/>
 	<script
 		type="module"
-		src="https://cdn.jsdelivr.net/npm/@didroom/components/dist/didroom-components/didroom-components.esm.js"
+		src="https://cdn.jsdelivr.net/npm/@didroom/components@1.10.1/dist/didroom-components/didroom-components.esm.js"
 	></script>
 	<link
 		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@didroom/components/dist/didroom-components/didroom-components.css"
+		href="https://cdn.jsdelivr.net/npm/@didroom/components@1.10.1/dist/didroom-components/didroom-components.css"
 	/>
 </svelte:head>
 
diff --git a/src/routes/[[lang]]/(auth)/login/(methods)/passphrase/+page.svelte b/src/routes/[[lang]]/(auth)/login/(methods)/passphrase/+page.svelte
index 459618d9..ae9bc559 100644
--- a/src/routes/[[lang]]/(auth)/login/(methods)/passphrase/+page.svelte
+++ b/src/routes/[[lang]]/(auth)/login/(methods)/passphrase/+page.svelte
@@ -57,7 +57,7 @@
 		</FormError>
 
 		<div class="flex justify-end">
-			<ion-button role="button" type="submit" tabindex={0}>{m.Login()}</ion-button>
+			<d-button role="button" type="submit" tabindex={0}>{m.Login()}</d-button>
 		</div>
 
 		<hr />
diff --git a/src/routes/[[lang]]/(auth)/login/(methods)/questions/+page.svelte b/src/routes/[[lang]]/(auth)/login/(methods)/questions/+page.svelte
index 4ab36751..6efbfe8e 100644
--- a/src/routes/[[lang]]/(auth)/login/(methods)/questions/+page.svelte
+++ b/src/routes/[[lang]]/(auth)/login/(methods)/questions/+page.svelte
@@ -107,7 +107,7 @@
 			</FormError>
 
 			<div class="flex justify-end">
-				<ion-button role="button" type="submit" tabindex={0}>{m.Login()}</ion-button>
+				<d-button color="accent" role="button" type="submit" tabindex={0}>{m.Login()}</d-button>
 			</div>
 
 			<hr />
@@ -140,6 +140,6 @@
 			</div>
 		</div>
 
-		<ion-button href={r('/wallet')} expand="full">{m.Go_to_wallet()}</ion-button>
+		<d-button color="accent" href={r('/wallet')} expand>{m.Go_to_wallet()}</d-button>
 	</div>
 {/if}
diff --git a/src/routes/[[lang]]/(auth)/login/+page.svelte b/src/routes/[[lang]]/(auth)/login/+page.svelte
index 3680ad66..12328a99 100644
--- a/src/routes/[[lang]]/(auth)/login/+page.svelte
+++ b/src/routes/[[lang]]/(auth)/login/+page.svelte
@@ -34,9 +34,7 @@
 			<Form {form}>
 				<p class="opacity-60">Enter your email to get started</p>
 				<Input {form} fieldPath="email" placeholder="email@example.com" />
-				<button type="submit">
-					<d-button>Next</d-button>
-				</button>
+				<d-button size="default" color="accent" type="submit" class="mt-4">Next</d-button>
 			</Form>
 		</div>
 	</ion-content>
diff --git a/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte b/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte
index 8be261bc..0cb51f54 100644
--- a/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte
+++ b/src/routes/[[lang]]/(protected)/[id]/credential-offer/+page.svelte
@@ -7,6 +7,7 @@
 	import { thumbsUpOutline } from 'ionicons/icons';
 	import { goto } from '$app/navigation';
 	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
+	import { m } from '$lib/i18n';
 	export let data: any;
 	const { credential } = data;
 	let isModalOpen: boolean = false;
@@ -29,7 +30,7 @@
 		<ion-title>
 			<div class="flex items-center gap-2">
 				<Logo />
-				<h1 class="text-2xl">Credential offer</h1>
+				<h1 class="text-2xl">{m.Credential_offer()}</h1>
 			</div>
 		</ion-title>
 	</ion-toolbar>
@@ -62,10 +63,10 @@
 		</JSONSchemaParser>
 		<pre>{credential.expand.templates[0].schema}</pre>
 		<div class="w-full">
-			<ion-button expand="block" on:click={getCredential} on:keydown={getCredential} aria-hidden
-				>Get this credential</ion-button
+			<d-button expand on:click={getCredential} on:keydown={getCredential} aria-hidden
+				>{m.Get_this_credential()}</d-button
 			>
-			<ion-button expand="block" href="/home">decline</ion-button>
+			<d-button expand href="/home">{m.Decline()}</d-button>
 		</div>
 	</div>
 	<ion-modal is-open={isModalOpen} backdrop-dismiss={false} transition:fly class="visible">
diff --git a/src/routes/[[lang]]/(protected)/profile/+page.svelte b/src/routes/[[lang]]/(protected)/profile/+page.svelte
index 444d3c03..a267870c 100644
--- a/src/routes/[[lang]]/(protected)/profile/+page.svelte
+++ b/src/routes/[[lang]]/(protected)/profile/+page.svelte
@@ -16,6 +16,6 @@
 		<div class="select-all rounded-md border-2 border-slate-700 bg-slate-400 p-1">
 			63FaC9201494f0bd17B9892B9fae4d52fe3BD377
 		</div>
-		<ion-button href="/logout">{m.Logout()}</ion-button>
+		<d-button href="/logout">{m.Logout()}</d-button>
 	</div>
 </TabPage>