join page refinement and minor bug fixes

src/lib/components/Onboarding/Gateways.svelte

@@ -8,19 +8,22 @@
 </script>
 
 {#if Object.keys($serverStore).length > 1}
-	<div class="variant-ghost-success p-4 rounded-token">
+	<div class="variant-ghost-success p-4 rounded-token w-lg self-center">
 		<h3 class="h4">Select Server, or add a new Server:</h3>
 		<SelectServer />
 	</div>
 {/if}
-<div class="mx-auto grid grid-cols-2 gap-4">
+<div id="gateway-cards" class="grid">
 	<Card>
 		<svelte:fragment slot="header">Join via invite code:</svelte:fragment>
 		<svelte:fragment slot="description">If you were given an invite code, you can</svelte:fragment>
 		<InviteCodeGateway code={$configStore.signUpStatus.inviteCode} />
 	</Card>
 	<Card>
-		<svelte:fragment slot="header">Join the alpha testing room:</svelte:fragment>
+		<svelte:fragment slot="header">Join Alpha Testers:</svelte:fragment>
+		<svelte:fragment slot="description"
+			>Test things out, let us know if you have any issues</svelte:fragment
+		>
 		<InviteCodeGateway
 			code={'layer-spot-gravity-fossil'}
 			hideInput={true}
@@ -40,9 +43,9 @@
 		<svelte:fragment slot="description">Coming Soon!</svelte:fragment>
 	</Card>
 	<Card>
-		<svelte:fragment slot="header">Join via Ethereum Address:</svelte:fragment>
+		<svelte:fragment slot="header">Join via Ethereum:</svelte:fragment>
 		<svelte:fragment slot="description"
-			>Are you a genesis validator? You can join using your Ethereum address.
+			>Are you a genesis staker? Stateful works funder? Join the conversation!
 		</svelte:fragment>
 		<EthereumGroupGateway />
 	</Card>
@@ -55,3 +58,20 @@
 		<TheWord />
 	</Card>
 </div>
+
+<style global>
+	#gateway-cards {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
+		grid-auto-rows: auto auto auto;
+		container-type: inline-size;
+		gap: 0.1rem;
+	}
+
+	:global(.card) {
+		display: grid;
+		margin: 0.5rem;
+		grid-row: span 3;
+		grid-template-rows: subgrid;
+	}
+</style>

src/lib/components/Utils/Card.svelte

@@ -5,7 +5,7 @@
 		</header>
 	{/if}
 	{#if $$slots.description}
-		<aside class="p italic px-4 pt-3"><slot name="description" /></aside>
+		<aside class="p italic px-4"><slot name="description" /></aside>
 	{/if}
 	<section class="p-4"><slot /></section>
 	{#if $$slots.footer}

src/lib/components/Utils/Container.svelte

@@ -7,7 +7,7 @@
 		<h2 class="h2 my-2 md:my-3 text-center">{heading}</h2>
 	{/if}
 	<slot name="header" />
-	<div class="flex flex-col gap-2 md:gap-5 max-w-5xl w-full mx-auto pb-3">
+	<div class="flex flex-col gap-2 md:gap-5 w-full mx-auto px-2 md:px-10 pb-3">
 		<slot />
 	</div>
 </div>

src/lib/utils/rooms.ts

@@ -82,7 +82,6 @@ export async function updateRooms(
 		}
 		return acceptedRoomNames;
 	} else {
-		alertQueue.enqueue('No rooms found', 'warning');
 		return [];
 	}
 }

src/routes/+layout.svelte

@@ -66,6 +66,9 @@
 					case 'info':
 						bg = 'variant-filled-info';
 						break;
+					case 'tertiary':
+						bg = 'variant-filled-tertiary';
+						break;
 					default:
 						bg = 'variant-filled-primary';
 						break;

src/routes/Footer.svelte

@@ -22,6 +22,7 @@
 	import NoPassword from 'svelte-material-icons/LockOff.svelte';
 	import Door from 'svelte-material-icons/Door.svelte';
 	import { unlockPadlock } from '$lib/utils';
+	import { onMount } from 'svelte';
 
 	export let loaded: boolean;
 
@@ -58,6 +59,10 @@
 	function lock() {
 		$keyStore = null;
 	}
+
+	onMount(() => {
+		drawerStore.close();
+	});
 </script>
 
 <div class="card p-4 w-72 shadow-xl" data-popup="popupMenu">

src/routes/chat/ChatInputPrompt.svelte

@@ -81,6 +81,7 @@
 				help();
 				break;
 		}
+		messageText = '';
 	}
 
 	// Helper function to handle encrypted room messages