Make Beta Ready

package.json

@@ -14,7 +14,7 @@
    "license": "MIT",
    "dependencies": {
       "@hibas123/secure-file-wrapper": "^2.5.0",
-      "@hibas123/utils": "^2.0.5",
+      "@hibas123/utils": "^2.1.0",
       "aes-js": "^3.1.2",
       "feather-icons": "^4.21.0",
       "idb": "3.0.2",
@@ -22,31 +22,31 @@
       "js-sha512": "^0.8.0",
       "lodash.clonedeep": "^4.5.0",
       "secure-file-wrapper": "git+https://git.stamm.me/OpenServer/OSSecureFileWrapper.git",
-      "uikit": "^3.0.3",
+      "uikit": "^3.1.5",
       "uuid": "^3.3.2"
    },
    "devDependencies": {
       "@types/lodash.clonedeep": "^4.5.6",
       "@types/uikit": "^2.27.7",
       "@types/uuid": "^3.4.4",
-      "copy-webpack-plugin": "^5.0.2",
+      "copy-webpack-plugin": "^5.0.3",
       "css-loader": "^2.1.1",
       "file-loader": "^3.0.1",
       "html-webpack-plugin": "^3.2.0",
-      "mini-css-extract-plugin": "^0.6.0",
+      "mini-css-extract-plugin": "^0.7.0",
-      "node-sass": "^4.10.0",
+      "node-sass": "^4.12.0",
       "preact": "^8.3.1",
       "preact-svg-loader": "^0.2.1",
       "sass-loader": "^7.1.0",
       "style-loader": "^0.23.1",
-      "ts-loader": "^5.3.0",
+      "ts-loader": "^6.0.2",
-      "typescript": "^3.4.3",
+      "typescript": "^3.5.1",
-      "webpack": "^4.30.0",
+      "webpack": "^4.32.2",
       "webpack-bundle-analyzer": "^3.3.2",
-      "webpack-cli": "^3.3.0",
+      "webpack-cli": "^3.3.2",
-      "webpack-dev-server": "^3.3.1",
+      "webpack-dev-server": "^3.5.0",
       "webpack-visualizer-plugin": "^0.1.11",
-      "workbox-webpack-plugin": "^4.3.0",
+      "workbox-webpack-plugin": "^4.3.1",
       "worker-loader": "^2.0.0"
    }
 }

public/manifest.json

@@ -13,8 +13,7 @@
             "url": "url"
         }
     },
-    "icons": [
+    "icons": [{
-        {
             "src": "notepad16.png",
             "sizes": "16x16",
             "type": "image/png"
@@ -52,6 +51,6 @@
     ],
     "start_url": "/",
     "display": "standalone",
-    "theme_color": "#2196F3",
+    "theme_color": "#e188e5",
     "background_color": "#ffffff"
 }

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) { 
+    >*:not(:last-child) {
-        border-bottom: 1px $border_color solid;
+        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}
+            <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" style="margin-top: 1rem;" uk-grid>
-            </ul>
+               {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>;
    }

src/index.scss

@@ -28,7 +28,8 @@ header {
    margin-bottom: $header-margin;
    align-content: center;
    padding: 0.75em;
-   border-bottom: solid $border-color 1px;
+   border-bottom: solid var(--border-color) 1px;
+   background-color: var(--primary);
 
    >* {
       margin: 0;
@@ -61,4 +62,17 @@ header {
 
 .def-shadow {
    box-shadow: 0px 5px 8px 2px rgba(66, 66, 66, 0.53);
+}
+
+
+.ccontainer {
+   margin: 0 1rem;
+   max-width: 100%;
+}
+
+@media (min-width: 45rem) {
+   .ccontainer {
+      max-width: 50rem;
+      margin: 0 auto;
+   }
 }

src/index.tsx

@@ -4,6 +4,31 @@ declare global {
       cancelIdleCallback: (id: number | NodeJS.Timeout) => void;
       debug: any;
    }
+
+   namespace JSX {
+      interface IntrinsicElements {
+         "wired-button": HTMLAttributes;
+         "wired-card": HTMLAttributes;
+         "wired-checkbox": HTMLAttributes;
+         "wired-combo": HTMLAttributes;
+         "wired-fab": HTMLAttributes;
+         "wired-icon-button": HTMLAttributes;
+         "wired-input": HTMLAttributes;
+         "wired-item": HTMLAttributes;
+         "wired-lib": HTMLAttributes;
+         "wired-listbox": HTMLAttributes;
+         "wired-progress": HTMLAttributes;
+         "wired-radio-group": HTMLAttributes;
+         "wired-radio": HTMLAttributes;
+         "wired-slider": HTMLAttributes;
+         "wired-spinner": HTMLAttributes;
+         "wired-tabs": HTMLAttributes;
+         "wired-textarea": HTMLAttributes;
+         "wired-toggle": HTMLAttributes;
+         "wired-tooltip": HTMLAttributes;
+
+      }
+   }
 }
 // declare const window: Window;
 
@@ -38,11 +63,11 @@ window.debug = {};
 import { h, render } from 'preact';
 import App from './components/App';
 
-// import "mini.css/src/flavors/mini-dark.scss"
+
-// import "mini.css/src/flavors/mini-default.scss"
+import "uikit";
-// import "uikit";
 import "uikit/dist/css/uikit.css"
-import "./index.scss"
+
+import "./index.scss";
 import Navigation from './navigation';
 import VaultsPage from './components/routes/vaults/Vaults';
 import { Page } from './page';
@@ -52,8 +77,7 @@ import DemoPage from './components/demo';
 import VaultPage from './components/routes/vault/Vault';
 import SharePage from './components/routes/share/Share';
 import Notifications from './notifications';
-
+window.debug.notes = Notes;
-console.log(Notes);
 
 (async () => {
    // Initialize notes provider

src/vars.scss

@@ -1,2 +1,21 @@
-$border-color: #AAAAAA;
+:root {
+    --primary: #1E88E5;
+    // --mdc-theme-primary: var(--primary);
+    // --mdc-theme-primary-bg: var(--mdc-theme--primary);
+    // --mdc-theme-on-primary: white;
+    --error: #ff2f00;
+    --border-color: #ababab;
+    --default-font-size: 1.05rem;
+}
+
+.uk-button-primary {
+    background: var(--primary) !important;
+    color: white;
+}
+
+.uk-background-primary {
+    background: var(--primary) !important;
+    color: white;
+}
+
 $hover-background: #DDDDDD;