fix: use only didroom components buttons (#147)

ForkbombEu · Feb 15, 2024 · ec01711 · ec01711
1 parent 731a7c2
commit ec01711
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -34,9 +34,7 @@
 			<Form {form}>
 				<p class="opacity-60">Enter your email to get started</p>
 				<Input {form} fieldPath="email" placeholder="[email protected]" />
-				<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
@@ -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
@@ -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>