style tweaks

3 files changed, 25 insertions, 25 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 4094e50c..7d03ec84 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -41,29 +41,29 @@
 		{#if user}
 			<a href={`/${user.username}/dashboard`}>
 				<button
-					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+					class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${user.username}/dashboard`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'}"
-					><Icon icon="home" style="mx-auto w-6" />
+					><Icon icon="home" style="mx-auto w-6 md:w-8" />
 				</button>
 			</a>
 			<a href={`/${user.username}/receive`}>
 				<button
-					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+					class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${user.username}/receive`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'}"
-					><Icon icon="numpad" style="mx-auto" />
+					><Icon icon="numpad" style="mx-auto w-6 md:w-8" />
 				</button>
 			</a>
 			<a href={`/${user.username}/transactions`}>
 				<button
-					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+					class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/${user.username}/transactions`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'} relative"
-					><Icon icon="clock" style="mx-auto" />
+					><Icon icon="clock" style="mx-auto w-6 md:w-8" />
 					{#if $newPayment}
 						<span class="absolute top-0 right-0">
 							<span class="flex h-3 w-3">
@@ -78,24 +78,24 @@
 			</a>
 			<a href={`/send`}>
 				<button
-					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+					class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
 						.url.pathname === `/send`
 						? 'opacity-100'
 						: 'opacity-70 hover:opacity-80'}"
-					><Icon icon="send" style="mx-auto w-6" />
+					><Icon icon="send" style="mx-auto w-6 md:w-8" />
 				</button>
 			</a>
 			<div class="relative">
 				<OutClick on:outclick={() => (showMenu = false)}>
 					<button
-						class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
 							.url.pathname === `/${user.username}` ||
 						$page.url.pathname === `/${user.username}/settings` ||
 						$page.url.pathname === `/support`
 							? 'opacity-100'
 							: `opacity-70 hover:opacity-80 ${showMenu ? 'opacity-80' : ''}`}"
 						on:click={() => (showMenu = !showMenu)}
-						><Icon icon="menu" style="mx-auto" />
+						><Icon icon="menu" style="mx-auto w-6 md:w-8" />
 					</button>
 
 					<div
@@ -108,8 +108,8 @@
 								<li>
 									<a {href}>
 										<button
-											class="flex justify-center items-center font-semibold text-sm hover:opacity-80"
-											><Icon {icon} style="mr-1 w-6" /> {$t(key)}
+											class="flex justify-center items-center font-semibold hover:opacity-80"
+											><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
 										</button>
 									</a>
 								</li>
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index c91d7e8f..d1bd86b7 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -88,20 +88,20 @@
 			>
 		</a>
 	</div>
+</div>
 
-	<div class="flex container max-w-md fixed bottom-4">
-		<div class="text-secondary flex mr-auto">
-			<div class="flex mr-1">
-				<div class="my-auto mr-1">1</div>
-				<img src="/images/bitcoin.svg" class="w-5 my-auto" />
-			</div>
-			<div>= {f(animatedRate, user.currency)}</div>
+<div class="flex fixed bottom-4 w-full px-4">
+	<div class="text-secondary flex mr-auto">
+		<div class="flex mr-1">
+			<div class="my-auto mr-1">1</div>
+			<img src="/images/bitcoin.svg" class="w-5 my-auto" />
 		</div>
-		<div class="text-secondary flex ml-auto">
-			<div class="flex">
-				<div class="mr-1">⚡️{s((1 * sats) / animatedRate)} =</div>
-				<div>{f(1, user.currency)}</div>
-			</div>
+		<div>= {f(animatedRate, user.currency)}</div>
+	</div>
+	<div class="text-secondary flex ml-auto">
+		<div class="flex">
+			<div class="mr-1">⚡️{s((1 * sats) / animatedRate)} =</div>
+			<div>{f(1, user.currency)}</div>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index b828c44d..3abc04ea 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -101,7 +101,7 @@
 										</div>
 									</div>
 								</div>
-								<div class="my-auto ml-auto p-2 border rounded-xl">
+								<div class="my-auto ml-auto p-2 border rounded-xl bg-white">
 									<Icon icon="send" style="w-10" />
 								</div>
 							</div>