fix: highlight selected menu

Agoric · Aug 7, 2020 · 4c3c169 · 4c3c169
1 parent d9d73d2
commit 4c3c169
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte b/packages/dapp-svelte-wallet/ui/lib/MenuButton.svelte
@@ -5,11 +5,18 @@
   export let id;
   export let value = undefined;
   export let color = undefined;
+  $: highlighted = value === id;
 </script>
 
-<div class={id === value ? "bg-secondary-transLighter" : ""}>
-  <Button outlined={id === value} text fab flat on:click={() => (value = id)} {color}>
-    {text}
-    <slot />
-  </Button>
+<style>
+  .highlighted {
+    background-color: var(--color-secondary-500);
+  }
+</style>
+
+<div class:highlighted>
+  <Button outlined={id === value}
+    text fab flat
+    on:click={() => (value = id)} {color}
+  ><slot>{text}</slot></Button>
 </div>
diff --git a/packages/dapp-svelte-wallet/ui/src/App.svelte b/packages/dapp-svelte-wallet/ui/src/App.svelte
@@ -73,7 +73,7 @@
     top: var(--banner-height);
     left: 0;
     width: 100%;
-    height: calc(100vh - var(--banner-height));
+    height: calc(max(100%, 100vh) - var(--banner-height));
     border: none;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1000;