Move sign in button to header

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/SiweConnect.svelte

@@ -7,7 +7,7 @@
 
   export let seed: Seed;
   export let config: Config;
-  export let caption = "Sign in with Ethereum";
+  export let caption = "Sign in";
 
   let connection: Connection = Connection.Disconnected;
 </script>

src/base/seeds/View.svelte

@@ -34,19 +34,12 @@
   }
   main > header {
     display: flex;
+    width: 100%;
+    flex-direction: row;
     align-items: center;
-    justify-content: left;
+    justify-content: space-between;
     margin-bottom: 2rem;
   }
-  main > header > * {
-    margin: 0 1rem 0 0;
-  }
-  .info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: left;
-  }
   .fields {
     display: grid;
     grid-template-columns: 5rem 4fr 2fr;
@@ -95,12 +88,27 @@
 {:then seed}
   <main>
     <header>
-      <div class="info">
-        <span class="title">
-          <span class="bold">
-            {host} <span class="desktop inline">{seed.emoji}</span>
-          </span>
+      <span class="title">
+        <span class="bold">
+          {host} <span class="desktop inline">{seed.emoji}</span>
         </span>
+      </span>
+      <!-- User Session -->
+      <div class="siwe">
+        {#if session?.signer}
+          {#if siweSession}
+            <div class="desktop">
+              <Address address={siweSession.address} {config} resolve />
+            </div>
+            <div class="mobile">
+              <Address address={siweSession.address} {config} compact resolve />
+            </div>
+          {:else}
+            <SiweConnect {seed} {config} />
+          {/if}
+        {:else}
+          <div class="subtle">Please connect your wallet.</div>
+        {/if}
       </div>
     </header>
 
@@ -120,28 +128,6 @@
       <div class="label">Version</div>
       <div>{seed.version}</div>
       <div class="desktop" />
-      <!-- User Session -->
-      <div class="label">Connection</div>
-      <div>
-        {#if session?.signer}
-          {#if siweSession}
-            <div class="desktop">
-              <Address address={siweSession.address} {config} resolve />
-            </div>
-            <div class="mobile">
-              <Address address={siweSession.address} {config} compact resolve />
-            </div>
-          {:else}
-            <SiweConnect
-              {seed}
-              {config}
-            />
-          {/if}
-        {:else}
-          <div class="subtle">Please connect your wallet.</div>
-        {/if}
-      </div>
-      <div class="desktop" />
     </div>
     <!-- Seed Projects -->
     <Projects {seed} {config} />