Optimizing Context Menu

src/components/context.scss

@@ -8,6 +8,8 @@
     >button {
         margin: 0;
         display: block;
+        background-color: rgb(224, 224, 224);
+        color: black;
     }
 
     >*:not(:last-child) {

src/components/routes/vault/EntryList.tsx

@@ -59,6 +59,15 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
 
    onContext(evt: MouseEvent, note: BaseNote) {
       evt.preventDefault();
+      evt.stopPropagation();
+
+      const close = () => {
+         document.documentElement.removeEventListener("click", close);
+         this.setState({ context: undefined });
+      }
+      document.documentElement.addEventListener("click", close);
+
+
       const shareNote = async () => {
          let nav = window.navigator as any;
          if (nav.share !== undefined) {
@@ -82,7 +91,6 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
          }).catch(err => {
             Notifications.sendError(err);
          })
-
       }
 
       let share;
@@ -254,7 +262,7 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
          <div class="uk-container">
             <div style="display:flex;">
                <input class="uk-input" type="text" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
-               <button class="uk-button" style="padding: 0 10px;">
+               <button class="uk-button uk-button-primary" style="padding: 0 10px;">
                   <Search />
                </button>
             </div>

src/components/routes/vaults/Vaults.tsx

@@ -127,12 +127,13 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
 
    onContext(evt: MouseEvent, vault: { name: string, encrypted: boolean, id: string }) {
       evt.preventDefault();
+      evt.stopPropagation();
 
       const close = () => {
-         window.removeEventListener("click", close);
+         document.documentElement.removeEventListener("click", close);
          this.setState({ context: undefined });
       }
-      window.addEventListener("click", close);
+      document.documentElement.addEventListener("click", close);
 
       let deleteb = <button class="uk-button" onClick={async () => {
          let delete_modal = new YesNoModal("Delete Vault? Cannot be undone!");