withdraw page and other fixups

4 files changed, 32 insertions, 9 deletions

diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index c979e2c8..adeac98e 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -67,11 +67,11 @@
 		</button>
 
 		<div
-			class="block md:hidden absolute top-0 {showMobileMenu
+			class="container w-full px-10 md:hidden absolute top-0 {showMobileMenu
 				? 'right-0'
 				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
 		>
-			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
+			<div class="space-y-8 mt-24 font-bold text-xl">
 				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
 					>{$t('howItWorks.header')}</button
 				>
@@ -82,12 +82,12 @@
 				>
 				{#if !$user}
 					<button
-						class="border rounded-full px-6 py-2 font-bold block"
+						class="border rounded-full px-6 py-2 font-bold block w-full"
 						on:click={() => goto('/register')}
 						>{$t('nav.startInSeconds')}
 					</button>
 					<button
-						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+						class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full"
 						on:click={() => goto('/login')}
 					>
 						{$t('nav.signIn')}
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 88fe62e6..fa805a1d 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { browser } from "$app/environment";
+	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { tick } from 'svelte';
 	import { Icon } from '$comp';
@@ -23,12 +23,12 @@
 		signIn: '/login'
 	}[pageID];
 
-  // TODO: move to server side
+	// TODO: move to server side
 	$: if (browser && $user) goto(`/${$user.username}/receive`);
 
- 	let focus = (el) => setTimeout(() => el.focus());
+	let focus = (el) => setTimeout(() => el.focus());
 
-  console.log("REDIRECT STORE", $redirect)
+	console.log('REDIRECT STORE', $redirect);
 </script>
 
 <div class="pt-10">
@@ -56,13 +56,21 @@
 						class="bg-primary"
 						bind:value={username}
 						use:focus
+						autocapitalize="none"
 					/>
 				</div>
 
 				<div class="relative">
 					<label for="password" class="block font-semibold">{$t('login.password')}</label>
 					{#if revealPassword}
-						<input name="password" type="text" required class="bg-primary" bind:value={password} />
+						<input
+							name="password"
+							type="text"
+							required
+							class="bg-primary"
+							bind:value={password}
+							autocapitalize="none"
+						/>
 					{:else}
 						<input
 							name="password"
@@ -70,6 +78,7 @@
 							required
 							class="bg-primary"
 							bind:value={password}
+							autocapitalize="none"
 						/>
 					{/if}
 					<button
diff --git a/src/components/Spinner.svelte b/src/components/Spinner.svelte
new file mode 100644
index 00000000..eccf98ce
--- /dev/null
+++ b/src/components/Spinner.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="mx-auto h-6 w-6 animate-spin text-white"
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+>
+	<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+	<path
+		class="opacity-75"
+		fill="currentColor"
+		d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	/>
+</svg>
diff --git a/src/components/index.js b/src/components/index.js
index 7d01e338..ba0f6516 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Spinner } from './Spinner.svelte';
 export { default as Check } from './Check.svelte';
 export { default as Heart } from './Heart.svelte';
 export { default as Quote } from './Quote.svelte';