Make Beta Ready

src/components/context.scss

@@ -1,18 +1,16 @@
-@import "../vars.scss";
-
 .context-menu {
     position: fixed;
     z-index: 10;
     display: flex;
     flex-direction: column;
-    border: 1px $border_color solid;
+    border: 1px var(--border-color) solid;
 
-    > button {
+    >button {
         margin: 0;
         display: block;
     }
 
-    > *:not(:last-child) { 
-        border-bottom: 1px $border_color solid;
+    >*:not(:last-child) {
+        border-bottom: 1px var(--border-color) solid;
     }
 }

src/components/modals/YesNoModal.tsx

@@ -32,10 +32,10 @@ export class YesNoModal extends Modal<boolean> {
                <div style="text-align: right;">
                   <button class="uk-button uk-button-primary uk-margin-right" style="display: inline-block;" onClick={() => {
                      this.props.modal.result(false);
-                  }}>No</button>
+                  }}><span style="text-decoration: underline;">N</span>o</button>
                   <button class="uk-button uk-button-primary" style="display: inline-block;" onClick={() => {
                      this.props.modal.result(true);
-                  }}>Yes</button>
+                  }}><span style="text-decoration: underline;">Y</span>es</button>
                </div>
             </div>
          </Modal.BaseModal>

src/components/routes/vault/EntryList.tsx

@@ -230,23 +230,10 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
          Navigation.setPage("/vault", { id: this.vault.id }, { id, entry: "true" })
       }
 
-      let elms = this.state.notes.map(note => {
-         let [first, second] = note.preview.split("\n", 2);
-         return <li class="vault-vault" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
-            open_entry(note._id)
-         }}>
-            <div>{first}</div>
-            <div>{second}</div>
-         </li>
-      })
-
-
       return <div>
          {this.state.context}
          <header class="uk-background-primary">
-            {/* <div> */}
             <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
-            {/* </div> */}
             <h3 style="display:inline" class="header-title" onClick={() => Navigation.setPage("/")}>{this.vault ? this.vault.name : ""}</h3>
             <span></span>
             {/* <a class="button header_icon_button"><MoreVertival height={undefined} width={undefined} /></a> */}
@@ -259,9 +246,20 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
                   <Search />
                </button>
             </div>
-            <ul class="uk-list uk-list-divider">
-               {elms}
-            </ul>
+
+            <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" style="margin-top: 1rem;" uk-grid>
+               {this.state.notes.map(note => {
+                  let [first, second] = note.preview.split("\n", 2);
+                  return <div class="" onContextMenu={evt => this.onContext(evt, note)} onClick={() => {
+                     open_entry(note._id)
+                  }}>
+                     <div class="uk-card uk-card-default uk-card-body vault-vault" style="box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3)">
+                        <div>{first}</div>
+                        <div>{second}</div>
+                     </div>
+                  </div>
+               })}
+            </div>
          </div>
       </div>;
    }