Show avatar in sign in button

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

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "radicle-interface",
       "version": "1.0.0",
       "dependencies": {
         "@datamodels/identity-profile-basic": "^0.1.2",

public/index.css

@@ -403,6 +403,11 @@ label.input {
   }
 }
 
+span.align {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
 span.small, .text-xsmall {
 	font-size: 0.75rem;
 }

src/Address.svelte

@@ -13,6 +13,7 @@
   export let noBadge = false;
   export let noAvatar = false;
   export let compact = false;
+  export let small = false;
   // This property allows components eg. Header.svelte to pass a resolved profile object.
   export let profile: Profile | null = null;
 
@@ -55,7 +56,7 @@
   }
 </style>
 
-<div class="address" title={address} class:no-badge={noBadge}>
+<div class="address" title={address} class:no-badge={noBadge} class:text-small={small}>
   {#if !noAvatar}
     {#if resolve && profile?.avatar}
       <Avatar inline source={profile.avatar} {address}/>

src/SiweConnect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Avatar from "@app/Avatar.svelte";
   import type { Seed } from "@app/base/seeds/Seed";
   import type { Config } from "@app/config";
   import { signInWithEthereum } from "@app/siwe";
@@ -10,6 +11,7 @@
   export let caption = "Sign in";
   export let tooltip = "";
   export let disabled = false;
+  export let address: string | null = null;
 
   let connection: Connection = Connection.Disconnected;
 </script>
@@ -34,9 +36,14 @@
     }
   }}
 >
-  {#if connection === Connection.Connecting}
-    <Loading small />
-  {:else}
-    {caption}
-  {/if}
+  <span class="align">
+    {#if address}
+      <Avatar address={address} source={address} inline />
+    {/if}
+    {#if connection === Connection.Connecting}
+      <Loading small />
+    {:else}
+      {caption}
+    {/if}
+  </span>
 </button>

src/base/seeds/View.svelte

@@ -63,6 +63,9 @@
   .session-info {
     display: flex;
     flex-direction: row;
+    background: var(--color-secondary-background);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--border-radius);
   }
   .desktop {
     display: block !important;
@@ -109,11 +112,11 @@
         {#if session?.signer}
           {#if siweSession}
             <div class="session-info">
-              <span class="signed-in">Signed in as</span>
-              <Address address={siweSession.address} {config} compact resolve />
+              <span class="signed-in text-small">Signed in as</span>
+              <Address address={siweSession.address} {config} small compact resolve />
             </div>
           {:else}
-            <SiweConnect {seed} {config} />
+            <SiweConnect {seed} address={session.address} {config} />
           {/if}
         {:else}
           <SiweConnect disabled {seed} {config} tooltip={"Connect your wallet to sign in"} />