feat(wallet): add connection indicator to app bar

packages/dapp-svelte-wallet/ui/src/AppV2.svelte

@@ -4,6 +4,8 @@
   import { afterUpdate, onMount } from 'svelte';
 
   import Button from 'smelte/src/components/Button';
+  import Tooltip from 'smelte/src/components/Tooltip';
+  import Menu from 'smelte/src/components/Menu';
   import Dapps from './Dapps.svelte';
   import Payments from './Payments.svelte';
   import Inbox from './Inbox.svelte';
@@ -34,7 +36,6 @@
 
   connected.connect();
 
-  $: connectStatus = $connected ? 'Connected' : 'Disconnected';
   $: connectLabel = $connected ? 'Disconnect' : 'Connect';
   $: connectAction = $connected ? connected.disconnect : connected.connect;
 
@@ -43,6 +44,7 @@
     isMobileLayout = window.innerWidth < 769;
   };
   onMount(() => {
+    window.document.documentElement.style.setProperty('--theme-background', '#fff');
     window.addEventListener('resize', calculateLayoutSize);
     return () => {
       window.removeEventListener('resize', calculateLayoutSize);
@@ -90,7 +92,7 @@
     height: calc(max(100%, 100vh) - var(--banner-height-v2));
     border: none;
     background: rgba(0, 0, 0, 0.4);
-    z-index: 1000;
+    z-index: 21;
   }
 
   header {
@@ -106,7 +108,7 @@
     height: var(--banner-height-v2);
     z-index: 25;
     display: flex;
-    align-items: baseline;
+    align-items: center;
     flex-shrink: 0;
     justify-content: space-between;
     flex-direction: row;
@@ -117,13 +119,22 @@
     text-decoration: none;
   }
 
+  .product-link {
+    margin-left: 16px;
+  }
+
   .product-logo {
     transform: scale(0.85);
   }
 
   main {
     width: 100%;
-    padding: 32px 272px;
+    padding: 32px 32px 32px 272px;
+    position: fixed;
+    height: calc(100vh - 64px);
+    max-width: var(--content-width-v2);
+    top: 64px;
+    overflow-y: auto;
   }
 
   footer {
@@ -144,21 +155,55 @@
     display: none;
   }
 
-  .full {
-    grid-column: 1 / span 2;
-  }
-
   .app-bar-section {
     display: flex;
     flex-direction: row;
     padding: 4px;
     height: 100%;
   }
 
+  .connector {
+    margin-right: 16px;
+  }
+
+  .connection-indicator {
+    pointer-events: none; 
+    position: absolute;
+    height: 8px;
+    width: 8px;
+    background-color: #00c853;
+    border-radius: 4px;
+    top: 34px;
+    left: 34px;
+  }
+
+  .connection-indicator.disconnected {
+    background-color: #e0e0e0;
+    border-color: #9e9e9e;
+    border-width: 1px;
+  }
+
+  :global(.app-bar-section button) {
+    padding: 12px;
+  }
+
+  :global(.app-bar-section i) {
+    color: #cb2328;
+    font-size: 32px;
+  }
+
+  .product-link {
+    margin-left: 16px;
+  }
+
   @media only screen and (max-width: 768px) {
     main {
       padding: 16px 24px;
     }
+
+    .product-link {
+      margin-left: 0;
+    }
   }
 </style>
 
@@ -173,11 +218,11 @@
         {#if isMobileLayout}
           <Button
             on:click={() => isNavMenuExpanded = !isNavMenuExpanded}
-            class="text-red-500"
+            color="primary"
             icon="menu" text light flat />
         {/if}
       </div>
-      <a href="https://agoric.com" class="flex items-center">
+      <a href="https://agoric.com" class="flex items-center product-link">
         <img
           src="https://agoric.com/wp-content/themes/agoric_2021_theme/assets/img/logo.svg"
           class="product-logo"
@@ -186,6 +231,21 @@
           height="43" />
       </a>
     </div>
+    <div class="app-bar-section">
+      <div class="connector">
+          <Tooltip>
+            <div slot="activator">
+              <Button
+                on:click={connectAction}
+                color="primary"
+                icon="public"
+                text light flat />
+              <div class={`connection-indicator ${$connected ? "" : "disconnected"}`}/>
+            </div>
+            {connectLabel}
+          </Tooltip>
+      </div>
+    </div>
   </header>
   {#if !$ready}
     <div

packages/dapp-svelte-wallet/ui/src/Inbox.svelte

@@ -1,9 +1,32 @@
 <script>
+    import { inbox } from './store';
 
+    $: items = ($inbox || []).filter(({ status }) => status === undefined || status === 'pending');
 </script>
 <style>
+    .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
 
+    .splash-image {
+        opacity: 0.6;
+    }
 </style>
 <div>
     <h1>Inbox</h1>
+    <div class="content">
+        {#if items.length === 0}
+            <img class="splash-image"
+                src="generic-agoric.svg"
+                alt="Empty Inbox"
+                width="460"
+                height="460" />
+            <p class="text-gray-700">
+                There's nothing here.
+            </p>
+        {/if}
+    </div>
 </div>

packages/dapp-svelte-wallet/ui/src/NavMenu.svelte

@@ -17,28 +17,47 @@
         justify-content: space-between;
         padding: 4px;
     }
+
+    :global(.nav-menu-item) {
+        border-radius: 0 32px 32px 0;
+        width: 246px;
+    }
+
+    :global(.nav-menu-item i) {
+        font-size: 20px;
+    }
+
+    :global(.header button) {
+        padding: 12px;
+    }
+
+    :global(.header i) {
+        color: #cb2328;
+        font-size: 32px;
+    }
 </style>
 <nav role="navigation" class="nav-menu">
     <NavigationDrawer
         bind:show={isExpanded}
         persistent={!isDrawer}
         elevation={isDrawer}
-        borderClasses="border-grey-100 border-r">
+        borderClasses="">
         <div class="header">
             <h6 class="p-3 ml-1 text-m text-gray-900">
                 Wallet
             </h6>
             {#if isDrawer}
                 <Button
                     on:click={() => isExpanded = !isExpanded}
-                    class="close-button text-red-500"
+                    color="primary"
                     icon="close" text light flat />
             {/if}
         </div>
         <List items={menu}>
             <span slot="item" let:item={item} class="cursor-pointer">
                 <ListItem
                     on:click={() => navPanel = item.id}
+                    class="nav-menu-item"
                     text={item.text}
                     icon={item.icon}
                     selected={navPanel === item.id}