feat: add nav and paging, and improve formatting

- rename Transaction to Offer
- added a Config panel
- restructure main page layout to not use grid
- structure app to have effectively panels controlled by top nav

minor UI items:
- add a button type for menus (TODO: show the selection correctly)
- make ListItems support horizontal lists
- align action buttons in ListCard

Author: dtribble

.gitignore

@@ -58,3 +58,4 @@ bundle-*.js
 /.vagrant
 .DS_Store
 .vscode/
+.idea/

packages/dapp-svelte-wallet/ui/lib/ListCard.svelte

@@ -23,6 +23,12 @@
   };
 </script>
 
+<style>
+  .actions {
+    margin: 1em 0 0 2em;
+  }
+</style>
+
 <section class="fullwidth px-2 py-2">
   <slot name="title"></slot>
 
@@ -56,5 +62,7 @@
     </List>
   {/if}
 
-  <slot name="actions"></slot>
+  <div class="actions">
+    <slot name="actions"></slot>
+  </div>
 </section>

packages/dapp-svelte-wallet/ui/lib/ListItems.svelte

@@ -1,6 +1,7 @@
 <script>
   export let items;
   export let idFn = item => item.id || item;
+  export let horizontal = false;
 </script>
 
 <style>
@@ -9,6 +10,9 @@
     margin: 0;
     padding: 0 0;
   }
+  .horizontal {
+    display: inline-block;
+  }
 </style>
 
 <slot />
@@ -18,7 +22,7 @@
 {:else}
   <ul>
     {#each items as item (idFn(item))}
-      <li class="list">
+      <li class={horizontal ? "horizontal" : ""}>
         <slot name="item" {item} />
       </li>
     {/each}

packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte

@@ -0,0 +1,15 @@
+<script>
+  import Button from 'smelte/src/components/Button';
+
+  export let text = '';
+  export let id;
+  export let value = undefined;
+  export let color = undefined;
+</script>
+
+<div class={id === value ? "bg-secondary-transLighter" : ""}>
+  <Button outlined={id === value} text fab flat on:click={() => (value = id)} {color}>
+    {text}
+    <slot />
+  </Button>
+</div>