lots of style updates after design review, bug fixes, and more improve

14 files changed, 127 insertions, 90 deletions

diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index b9df94c1..77ca7eaa 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -9,11 +9,11 @@ export async function load({ request, setHeaders, url, params }) {
 	let { token } = cookie.parse(request.headers.get('cookie') || '');
 	let user;
 	let rates;
-  let subject;
+	let subject;
 
-  if (params.username) {
-    subject = await get(`/users/${params.username}`);
-  } 
+	if (params.username) {
+		subject = await get(`/users/${params.username}`);
+	}
 
 	if (token) {
 		try {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e260af38..bf347292 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -15,7 +15,7 @@
 
 	export let data;
 
-  $: $subject = data.subject;
+	$: $subject = data.subject;
 	$: $token = data.token;
 	$: $user = data.user;
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5d00f272..09d7ff54 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,11 +28,12 @@
 <!-- banner -->
 <div class="mt-[101.7px] md:mt-0 w-full text-center py-4 border border-b-black text-secondary">
 	<p>
-		Welcome to the <a href="/news" class="underline underline-offset-4 text-black"
+		Welcome to the <a href="/news" class="underline underline-offset-4 text-black hover:opacity-80"
 			>new and improved coinos</a
 		>, focused on merchant adoption! Looking for the old coinos? Visit
-		<a href="https://classic.coinos.io" class="underline underline-offset-4 text-black"
-			>classic.coinos.io</a
+		<a
+			href="https://classic.coinos.io"
+			class="underline underline-offset-4 text-black hover:opacity-80">classic.coinos.io</a
 		>.
 	</p>
 </div>
@@ -72,9 +73,7 @@
 	<!-- how it works -->
 	<div>
 		<h3 class="text-5xl font-medium mb-10 text-center">{$t('howItWorks.header')}</h3>
-		<div
-			class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center"
-		>
+		<div class="grid lg:grid-cols-3 space-y-10 lg:space-y-0 text-center">
 			{#each howItWorksSteps as step}
 				<HowItWorksCard image={step.image} stepID={step.stepID} />
 			{/each}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index de8c3a26..1bbd6e66 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -35,16 +35,18 @@
 	let followed = false;
 </script>
 
-	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
 
-	<div class="flex xl:block justify-center items-center my-20 px-3">
-		<div class="space-y-10 xl:space-y-0">
-			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
-				<h1 class="text-3xl font-bold">{$subject.username}</h1>
+<div class="flex xl:block justify-center items-center my-20 px-3">
+	<div class="space-y-10 xl:space-y-0">
+		<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+			<h1 class="text-3xl font-bold">{$subject.username}</h1>
 
-				<p class="text-secondary">{$subject.address && $subject.address !== "null" ? $subject.address : ''}</p>
+			<p class="text-secondary">
+				{$subject.address && $subject.address !== 'null' ? $subject.address : ''}
+			</p>
 
-				<!-- TODO
+			<!-- TODO
         we need to hook this up
         <button
 					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
@@ -53,25 +55,25 @@
 					{$t('user.' + (followed ? 'remove' : 'follow'))}
 				</button>
         -->
-			</div>
+		</div>
 
-			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-				<div
-					on:click={() => copy(lightningAddress)}
-					id="qr"
-					class=" cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-				/>
+		<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+			<div
+				on:click={() => copy(lightningAddress)}
+				id="qr"
+				class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+			/>
 
-				<p class="text-secondary text-center font-semibold">{$t('user.scanToPayBTC')}</p>
+			<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
-				<div
-					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
-				>
-					<span>{lightningAddress}</span>
-					<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
-						<Icon icon="copy" style="ml-2" />
-					</button>
-				</div>
+			<div
+				class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
+			>
+				<span>{lightningAddress}</span>
+				<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
+					<Icon icon="copy" style="ml-2" />
+				</button>
 			</div>
 		</div>
 	</div>
+</div>
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 7e424819..4c0917dc 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -11,7 +11,8 @@
 
 	let payreq = '',
 		payreqField,
-		withdrawing;
+		withdrawing,
+		loading;
 
 	let toggle = async () => {
 		payreq = '';
@@ -21,11 +22,14 @@
 	};
 
 	let withdraw = async () => {
+		loading = true;
 		try {
 			await post('/withdraw', { payreq });
 			withdrawing = false;
+			loading = false;
 		} catch (e) {
 			failure(e.message);
+			loading = false;
 		}
 	};
 
@@ -40,8 +44,8 @@
 
 <AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
 
-<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72">
-	<h2 class="text-2xl font-semibold">{user.username}</h2>
+<div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-20 w-full md:w-72">
+	<h2 class="text-3xl font-semibold">{user.username}</h2>
 	<span class="text-secondary">{user.address}</span>
 </div>
 
@@ -81,7 +85,7 @@
 		{:else}
 			<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
 				<button on:click={() => (withdrawing = false)}>
-					<Icon icon="arrow-left" style="w-8" />
+					<Icon icon="arrow-left" style="w-8 hover:opacity-80" />
 				</button>
 
 				<div>
@@ -110,8 +114,33 @@
 					class="{!payreq
 						? 'opacity-50'
 						: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-					on:click={withdraw}>{$t('user.dashboard.send')}</button
+					on:click={withdraw}
 				>
+					{#if loading}
+						<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>
+					{:else}
+						{$t('user.dashboard.send')}
+					{/if}
+				</button>
 			</div>
 		{/if}
 	</div>
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 6a286071..ba443ff2 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -87,7 +87,7 @@
 {#if $user}
 	<AppHeader />
 
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+	<div class="flex justify-center items-center mt-24 mb-3 px-3">
 		{#if $selectedRate}
 			<div class="space-y-5">
 				<!-- amounts -->
@@ -172,7 +172,7 @@
 
 				<div class="space-y-3 w-full md:w-[300px] mx-auto">
 					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {$invoiceAmount ===
 							0 || loading
 							? 'opacity-50'
 							: 'opacity-100 hover:opacity-80'}"
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index e3acc93c..978f537a 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -37,8 +37,8 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save} class="mb-28">
-	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+<form on:submit|preventDefault={save} class="mb-[154px]">
+	<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
 		</h1>
@@ -55,9 +55,13 @@
 
 		<svelte:component this={comp} />
 	</div>
-	<div class="z-10 fixed bottom-0 bg-white shadow border w-full">
-		<button type="submit" class="primary">
-			<Icon icon="save" style="mr-1" />
+	<div
+		class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+	>
+		<button
+			type="submit"
+			class="bg-black text-white rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
+		>
 			<div class="my-auto">Save Settings</div>
 		</button>
 	</div>
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index dbaea87e..ff7676f4 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -213,6 +213,7 @@
 	{/if}
 </div>
 
+<!-- TODO
 <div>
 	<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
 	<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
@@ -226,4 +227,4 @@
 			on:click={() => handleThemeClick(colors)}
 		/>
 	{/each}
-</div>
+</div> -->
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index b74193cf..1b8fb125 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -36,7 +36,7 @@
 				toggleEnabling();
 			}
 		} catch (e) {
-			failure('Failed to enable 2fa, try again');
+			failure('Failed to enable 2FA, try again');
 		}
 	};
 
@@ -50,13 +50,14 @@
 				toggleDisabling();
 			}
 		} catch (e) {
-			failure('Failed to disable 2fa, try again');
+			failure('Failed to disable 2FA, try again');
 		}
 	};
 
 	$: otpUri = `otpauth://totp/coinos:${$user.username}?secret=${$user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`;
 </script>
 
+<!-- TODO
 <div>
 	<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
 	<p class="text-secondary mb-1">
@@ -80,9 +81,9 @@
 			><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 		>
 	{/if}
-</div>
+</div> -->
 
-<!-- TODO -->
+<!-- TODO
 <div>
 	<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
 	<p class="text-secondary mb-1">
@@ -95,7 +96,7 @@
 		<option value="60">1 h</option>
 		<option value="480">8 h</option>
 	</select>
-</div>
+</div> -->
 
 <div>
 	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index acaa8d2b..663ba8a6 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -10,7 +10,7 @@
 {#if $user}
 	<AppHeader />
 
-	<div class="my-20">
+	<div class="mt-24 mb-20">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.support.header')}
 		</h1>
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 2e9cb70e..0eef04fe 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -17,7 +17,7 @@
 
 <AppHeader />
 
-<div class="my-20">
+<div class="mt-24 mb-20">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t('user.transactions.header')}
 	</h1>
@@ -36,7 +36,7 @@
 		</div>
 	</div>
 
-	<div class="container w-full mx-auto md:text-lg px-10 lg:px-40">
+	<div class="container w-full mx-auto md:text-lg px-10 lg:px-72">
 		<div class="text-secondary grid grid-cols-3 mb-5">
 			<h2>{$t('user.transactions.AMOUNT')}</h2>
 			<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index 67cd8efa..d935affb 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -181,7 +181,8 @@
 						>
 						<button
 							class="hidden {showCustomAmount ? 'md:block' : ''}"
-							on:click={() => (showCustomAmount = false)}><Icon icon="close" /></button
+							on:click={() => (showCustomAmount = false)}
+							><Icon icon="close" style="hover:opacity-80" /></button
 						>
 					</div>
 					<h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1>
@@ -258,7 +259,7 @@
 				/>
 
 				<!-- invoice section -->
-				<div class="text-center space-y-5">
+				<div class="text-center space-y-5 max-w-[300px]">
 					<button
 						class="block md:hidden bg-black {showMobileTip
 							? 'text-white/50'
@@ -286,11 +287,13 @@
 					</button>
 
 					<!-- found missing translation --->
-					<span class="text-secondary block"
-						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
+					<span class="text-secondary block text-2xl break-all"
+						>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
+							>{username}</a
+						></span
 					>
 
-					<div class="border border-gray-200 rounded-2xl">
+					<div class="border border-gray-200 rounded-3xl">
 						<Qr {text} {image} disabled={showMobileTip} bind:qr />
 					</div>
 
diff --git a/src/routes/launch-party/+page.svelte b/src/routes/launch-party/+page.svelte
index be9392f4..5c6e643a 100644
--- a/src/routes/launch-party/+page.svelte
+++ b/src/routes/launch-party/+page.svelte
@@ -1 +1 @@
-Launch party!!!!!!!!!!!!!!!!
+Launch party!
diff --git a/src/routes/news/+page.svelte b/src/routes/news/+page.svelte
index 9cee610c..7eb1b7d9 100644
--- a/src/routes/news/+page.svelte
+++ b/src/routes/news/+page.svelte
@@ -11,25 +11,23 @@
 
 	<h2 class="text-2xl font-medium">{$t('news.subheader')}</h2>
 
-	<p class="text-justify text-xl text-secondary">
-		Press Release - Coinos Redesign - September 23, 2022
-	</p>
+	<p class="text-xl font-semibold">Press Release - coinos Redesign - September 23, 2022</p>
 
-	<p>
-		Today Coinos is launching a new and improved interface for their open source web wallet,
-		allowing businesses to accept Bitcoin with no setup or merchant fees.
+	<p class="text-xl text-secondary">
+		Today coinos is launching a new and improved interface for their open source web wallet,
+		allowing businesses to accept bitcoin with no setup or merchant fees.
 	</p>
 
-	<p>
-		Coinos is a web-based bitcoin payment application that is mobile and tablet friendly with handy currency
-		conversion and reporting features. Bitcoin is the world's leading digital currency. It
+	<p class="text-xl text-secondary">
+		coinos is a web-based bitcoin payment application that is mobile and tablet friendly with handy
+		currency conversion and reporting features. bitcoin is the world's leading crypto currency. It
 		offers a secure and inexpensive way for people all over the globe to make and accept payments.
 	</p>
 
 	<blockquote
-		class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800"
+		class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800 text-xl text-secondary"
 	>
-		<Quote /> Coinos has enabled businesses to accept Bitcoin since 2012, but now we have made it even
+		<Quote /> coinos has enabled businesses to accept bitcoin since 2012, but now we have made it even
 		easier with a new simple, friendly and customizable interface for both businesses and customers to
 		use.
 		<figcaption class="flex justify-center items-center mt-6 space-x-3">
@@ -42,21 +40,21 @@
 		</figcaption>
 	</blockquote>
 
-	<p>
-		Coinos started as an indie bitcoin wallet created by Adam Soltys with the intention of providing
-		people with a fast, cheap, and easy way to get started with bitcoin. it's free to register an
+	<p class="text-xl text-secondary">
+		coinos started as an indie bitcoin wallet created by Adam Soltys with the intention of providing
+		people with a fast, cheap, and easy way to get started with bitcoin. It's free to register an
 		account and you can sign up with just a username and password.
 	</p>
 
-	<h3 class="text-xl font-medium">Why accept Bitcoin?</h3>
+	<h3 class="text-xl font-semibold">Why accept bitcoin?</h3>
 	<blockquote
-		class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800"
+		class="p-4 my-4 bg-gray-50 border-l-4 border-gray-300 dark:border-gray-500 dark:bg-gray-800 text-xl text-secondary"
 	>
 		<Quote />
 		We have already brought on some local businesses, here in Vancouver, and the business owners are
-		excited about the opportunity Coinos is giving them to attract new customers by being able to
-		accept Bitcoin. With Coinos there are no set up fees, no merchant fees and transactions are safe
-		and secure with payments going directly to the business owner's wallet. There is no middle person.
+		excited about the opportunity coinos is giving them to attract new customers by being able to accept
+		bitcoin. With coinos there are no set up fees, no merchant fees and transactions are safe and secure
+		with payments going directly to the business owner's wallet. There is no middle person.
 		<figcaption class="flex justify-center items-center mt-6 space-x-3">
 			<img class="w-6 h-6 rounded-full" src="/images/cole.webp" alt="Adam Soltys" />
 			<div class="flex items-center divide-x-2 divide-gray-500 dark:divide-gray-700">
@@ -68,8 +66,8 @@
 		</figcaption>
 	</blockquote>
 
-	<h3 class="text-xl font-medium">Coinos Timeline</h3>
-	<ul>
+	<h3 class="text-xl font-semibold">coinos Timeline</h3>
+	<ul class="text-xl text-secondary">
 		<li class="flex items-center space-x-3">
 			<Check />
 			2012 Coding started
@@ -88,7 +86,7 @@
 		</li>
 		<li class="flex items-center space-x-3">
 			<Check />
-			2021 Liquid network and asset issuance supported
+			2021 Liquid Network and asset issuance supported
 		</li>
 		<li class="flex items-center space-x-3">
 			<Check />
@@ -96,21 +94,21 @@
 		</li>
 	</ul>
 
-	<h3 class="text-xl font-medium">Contacts</h3>
+	<h3 class="text-xl font-semibold">Contacts</h3>
 
-	<p>
+	<p class="text-xl text-secondary">
 		<b>Adam Soltys</b> - Founder & CTO<br />
-		<a class="hover:text-gray-500" href="mailto:[email protected] ">[email protected]</a>
+		<a class="hover:opacity-80" href="mailto:[email protected] ">[email protected]</a>
 	</p>
 
-	<p>
+	<p class="text-xl text-secondary">
 		<b>Cole Goodwin</b> - Bitcoin Professional<br />
-		<a class="hover:text-gray-500" href="mailto:[email protected]">[email protected]</a>
+		<a class="hover:opacity-80" href="mailto:[email protected]">[email protected]</a>
 	</p>
 
-	<p>
+	<p class="text-xl text-secondary">
 		<b>Shauna Collister</b> - Operations & Marketing<br />
-		<a class="hover:text-gray-500" href="mailto:[email protected]">[email protected]</a>
+		<a class="hover:opacity-80" href="mailto:[email protected]">[email protected]</a>
 	</p>
 </div>