fix some homepage stuff

frontend/src/App.svelte

@@ -22,8 +22,6 @@
   let state = UIState.Idle;
   let stateStr = "";
 
-  let dialogConnection = false;
-
   let devTransport: Transport;
   async function onOpen() {
     console.log("[TRANSPORT DEV] opened");
@@ -112,34 +110,29 @@
   </div>
 {:else}
   <div class="h-full flex flex-col p-4 gap-6">
-    <div class="flex items-center text-3xl">
-      <Icon icon="material-symbols:sailing" />
-      <p class="text-2xl ml-3">Adrift</p>
-    </div>
-    <Card
-      type="elevated"
-      extraOptions={{ class: "m3-container type-elevated lg:w-3/4" }}
-    >
-      <h2 class="text-6xl">Surf the web, Adrift</h2>
-      <h2 class="text-2xl">A fast and modern decentralized proxy network</h2>
-      <div class="mt-6 flex gap-4">
-        <Button type="filled" on:click={() => (dialogConnection = true)}>
-          Start browsing
-        </Button>
+    <div class="flex">
+      <div class="flex flex-col flex-1 items-center gap-2 text-3xl px-2">
+        <Icon icon="material-symbols:sailing" />
+        <p>Adrift</p>
+      </div>
+      <div class="flex flex-col flex-1 text-center justify-end px-2">
+        <p class="sm:text-xl lg:text-2xl">
+          A fast and modern decentralized proxy network
+        </p>
+      </div>
+      <div class="flex flex-col flex-1 items-center justify-center px-2">
         {#if !import.meta.env.VITE_ADRIFT_SINGLEFILE}
           <Button
-            type="text"
+            type="tonal"
             on:click={() => downloadShortcut("adrift.html", "Homework")}
           >
             Get shortcut
           </Button>
         {/if}
       </div>
-    </Card>
-    <Card
-      type="elevated"
-      extraOptions={{ class: "m3-container type-elevated mt-auto" }}
-    >
+    </div>
+    <ConnectionCmp bind:state bind:stateStr />
+    <Card type="elevated">
       <div class="flex gap-8 items-center">
         <a class="mr-auto" href="https://mercurywork.shop">
           © 2023 Mercury Workshop
@@ -154,7 +147,6 @@
       </div>
     </Card>
   </div>
-  <ConnectionCmp bind:dialogConnection bind:state bind:stateStr />
 {/if}
 
 <StyleFromScheme

frontend/src/Connection.svelte

@@ -2,21 +2,22 @@
   import { initializeApp } from "firebase/app";
   import {
     Auth,
-    browserLocalPersistence,
     createUserWithEmailAndPassword,
     getAuth,
-    setPersistence,
     signInWithEmailAndPassword,
+    browserLocalPersistence,
+    setPersistence,
   } from "firebase/auth";
   import {
     Button,
     Dialog,
+    SnackbarAnim,
+    TextField,
     Divider,
     ListItemLabel,
     RadioAnim2,
-    SnackbarAnim,
-    TextField,
   } from "m3-svelte";
+  import Icon from "@iconify/svelte";
 
   import { setBareClientImplementation } from "@mercuryworkshop/bare-client-custom";
   import {
@@ -29,8 +30,6 @@
   import { UIState } from "./state";
 
   type valueof<T> = T[keyof T];
-
-  export let dialogConnection: boolean;
   let tlsWarningShown = false;
   let selectedTracker = Object.keys(trackerList)[0] as keyof typeof trackerList;
 
@@ -119,8 +118,12 @@
   }
 </script>
 
-<Dialog bind:open={dialogConnection} headline="Connect to a tracker">
-  <div class="flex flex-col -mx-4">
+<div
+  class="vertical-container m-auto rounded-2xl bg-surface-container-high p-6"
+>
+  <Icon icon="ic:round-cable" height={24} class="text-secondary" />
+  <p class="m3-font-headline-small">Connect to a tracker</p>
+  <div class="flex flex-col w-full -mx-4">
     {#each Object.entries(trackerList) as [trackerId, tracker], i}
       {#if i != 0}
         <Divider />
@@ -144,15 +147,12 @@
       </ListItemLabel>
     {/each}
   </div>
-  <p class="font-bold mt-4" class:hide-warning={!tlsWarningShown}>
+  <p class="tls-warning mt-4" class:hidden={!tlsWarningShown}>
     Your data is not end-to-end encrypted, and will not be private. While TLS
     will be implemented later, for now do not enter any private information.
     Click connect again to continue.
   </p>
-  <svelte:fragment slot="buttons">
-    <Button type="text" on:click={() => (dialogConnection = false)}>
-      Cancel
-    </Button>
+  <div class="flex gap-2 items-center mt-2 px-6">
     <Button
       type="text"
       on:click={() => {
@@ -163,27 +163,25 @@
         if (auth.currentUser) {
           connectNode();
         } else {
-          dialogConnection = false;
           dialogAccount = true;
         }
       }}
     >
-      Connect to your node
+      Connect to home node
     </Button>
     <Button
       type="tonal"
       on:click={() => {
         if (tlsWarningShown) {
           connectSwarm();
-          dialogConnection = false;
         }
         tlsWarningShown = true;
       }}
     >
       Connect
     </Button>
-  </svelte:fragment>
-</Dialog>
+  </div>
+</div>
 <Dialog bind:open={dialogAccount} headline="Sign in">
   <div class="flex gap-4 flex-col">
     <TextField name="Email" bind:value={email} />
@@ -226,9 +224,14 @@
 <SnackbarAnim bind:show={snackbar} />
 
 <style>
-  .hide-warning {
-    margin: 0;
-    height: 0;
-    visibility: hidden;
+  .vertical-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+  .tls-warning {
+    font-weight: bold;
+    max-width: 60ch;
   }
 </style>