Moving to new theme

src/components/routes/vault/Entry.tsx

@@ -165,17 +165,17 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
       console.log("Rerender")
 
       return <div>
-         <header class="uk-background-primary">
+         <header class="header">
             <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
             {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
             <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
             <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
          </header>
-         <div class="uk-container">
+         <div class="container">
             <textarea
                value={this.text}
                rows={this.rows}
-               class="doc uk-textarea"
+               class="inp"
                style="width:100%;"
                onInput={this.textAreaChange}
                onKeyDown={this.textAreaKeyPress}

src/components/routes/vault/EntryList.tsx

@@ -107,15 +107,15 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
 
       let share;
       if ((window.navigator as any).share) {
-         share = <button class="uk-button" onClick={shareNote}>
+         share = <button class="btn" onClick={shareNote}>
             share
          </button>
       }
 
       let context = <ContextMenu event={evt} >
          {share}
-         <button class="uk-button" onClick={deleteNote}>delete</button>
-         <button class="uk-button" onClick={copyNote}>copy</button>
+         <button class="btn" onClick={deleteNote}>delete</button>
+         <button class="btn" onClick={copyNote}>copy</button>
       </ContextMenu>
 
       this.setState({ context });
@@ -265,28 +265,28 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
 
       return <div>
          {this.state.context}
-         <header class="uk-background-primary">
+         <header class="header">
             <a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
             <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> */}
          </header>
          <AddButton onClick={() => open_entry(null)} />
-         <div class="uk-container">
+         <div class="container">
             <div style="display:flex;">
-               <input class="uk-input" type="text" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
-               <button class="uk-button uk-button-primary" style="padding: 0 10px;">
+               <input class="inp" type="text" style="width: 100%; height: 40px;" onKeyUp={this.searchChanged} ref={elm => this.searchInput = elm} />
+               <button class="btn btn-primary" style="padding: 5px 10px; margin: 0; height: 40px; width: 40px;">
                   <Search />
                </button>
             </div>
 
-            <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" style="margin-top: 1rem;" uk-grid>
+            <div class="vault-list" style="margin-top: 1rem;">
                {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 class="card vault-vault">
                         <div>{first}</div>
                         <div>{second}</div>
                      </div>

src/components/routes/vault/vault.scss

@@ -1,13 +1,22 @@
-.uk-container> :last-child {
+.container> :last-child {
    margin-bottom: 15px !important;
 }
 
+.vault-list {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-gap: 1rem;
+   grid-auto-rows: auto;
+}
+
+// TODO Media Query for small screens
+
 .vault-vault {
    width: 100%;
 
    >div {
       width: 100%;
-      font-size: 1rem;
+      font-size: 1.1rem;
       margin-left: 1rem;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -25,22 +34,4 @@
          white-space: pre;
       }
    }
-}
-
-// .vault_vault {
-//    padding: 0.5rem;
-//    border-bottom: solid 1px var(--card-border-color);
-// }
-
-// .vault_vault:hover {
-//    background: var(--nav-hover-back-color);
-// }
-
-// .vault_vault>svg {
-//    height: 2rem;
-//    margin-right: 1rem;
-// }
-
-// .vault_vault:last-child {
-//    border-bottom: none;
-// }
+}