From e9fafd5dce36fefbff95c7234174791a86c7e28e Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 18 Jun 2019 16:00:03 +0100
Subject: [PATCH] Replaced all UIKit icons with MD icons

---
 src/assets/less/theme.less                    | 32 ++++++++++++++++---
 .../controlComponents/paneCapture.vue         | 31 +++++++++++-------
 .../controlComponents/paneConnect.vue         |  8 ++---
 .../formComponents/JsonForm.vue               |  4 +--
 .../galleryComponents/captureCard.vue         |  6 ++--
 .../viewComponents/galleryDisplay.vue         | 10 +++---
 src/main.js                                   |  5 +--
 7 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/assets/less/theme.less b/src/assets/less/theme.less
index 7892ae82..32280710 100644
--- a/src/assets/less/theme.less
+++ b/src/assets/less/theme.less
@@ -198,25 +198,45 @@
 /*
  * Modal
  */
-.uk-modal-dialog {
+.uk-modal-dialoge {
     border-radius: @paper-border-radius;
     box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
     transition: 0.3s ease !important;
 }
 
+/*
+ * Notifications
+ */
+.uk-notification-message {
+    border-radius: @paper-border-radius;
+    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);
+}
+
+.uk-notification-message-danger {
+    border: 1px solid @notification-message-danger-color
+}
+
+.uk-notification-message-warning {
+    border: 1px solid @notification-message-warning-color
+}
+
+.uk-notification-message-success {
+    border: 1px solid @notification-message-success-color
+}
+
 /*
  * Links
  */
-.uk-link {
+.uk-link, .uk-button-link {
     color: @global-muted-color;
 }
 
-.uk-link:hover, a:hover {
+.uk-link:hover, .uk-button-link:hover, a:hover {
     color: @global-primary-background;
 }
 
 .hook-inverse() {
-    .uk-link:hover, a:hover {
+    .uk-link:hover, .uk-button-link:hover, a:hover {
         color: @inverse-primary-muted-color;
     }
 }
@@ -245,4 +265,8 @@
         background-color: @inverse-primary-muted-color;
         color: #fff;
     }
+}
+
+.uk-icon-button, .uk-icon-button:hover {
+    text-decoration: none
 }
\ No newline at end of file
diff --git a/src/components/controlComponents/paneCapture.vue b/src/components/controlComponents/paneCapture.vue
index bebbaafb..8c4bcac1 100644
--- a/src/components/controlComponents/paneCapture.vue
+++ b/src/components/controlComponents/paneCapture.vue
@@ -43,18 +43,20 @@
         <div class="uk-accordion-content">
 
           <form @submit.prevent="handleMetadataSubmit">
-            <div class="uk-margin-small uk-grid-small" uk-grid>
-              <div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
-              <div class="uk-margin-remove-top uk-width-2-5"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
-              <div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
+            <div class="uk-margin-remove uk-flex uk-flex-middle">
+              <div class="uk-margin-remove-top uk-padding-remove uk-grid-small uk-width-expand" uk-grid>
+                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.key" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Key"></div>
+                <div class="uk-margin-remove uk-width-1-2"><input v-model="newMetadata.value" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Value"></div>
+              </div>
+              
+              <a href="#" v-on:click="handleMetadataSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
+
             </div>
           </form>
 
-          <div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
+          <div v-for="(value, key) in customMetadata" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
             <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ value }}</div>
-            <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
-              <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon-link" uk-icon="trash"></a>
-            </div>
+            <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>
           </div>
 
         </div>
@@ -65,9 +67,16 @@
         <div class="uk-accordion-content">
 
           <form @submit.prevent="handleTagSubmit">
-            <div class="uk-margin-small uk-grid-small" uk-grid>
-              <div class="uk-margin-remove-top uk-width-4-5"><input v-model="newTag" class="uk-input uk-form-width-small uk-form-small" type="text" name="flavor" placeholder="Tag"></div>
-              <div class="uk-margin-remove-top uk-width-1-5"><button class="uk-button uk-button-default uk-form-small uk-float-right" uk-icon="plus"></button></div>
+            <div class="uk-margin-small uk-flex uk-flex-middle">
+
+              <div class="uk-margin-remove-top uk-width-expand">
+                <div class="uk-inline uk-width-1-1">
+                  <span class="uk-form-icon"><i class="material-icons">label</i></span>
+                  <input v-model="newTag" class="uk-input uk-form-small" type="text" name="flavor" placeholder="Tag">
+                </div>
+              </div>
+
+              <a href="#" v-on:click="handleTagSubmit()" class="uk-icon uk-margin-left"><i class="material-icons">add_circle</i></a>
             </div>
           </form>
 
diff --git a/src/components/controlComponents/paneConnect.vue b/src/components/controlComponents/paneConnect.vue
index efb02fa9..9eb1e0ca 100644
--- a/src/components/controlComponents/paneConnect.vue
+++ b/src/components/controlComponents/paneConnect.vue
@@ -10,7 +10,7 @@
 
       <div v-if="!localMode">
         <div class="uk-inline uk-width-1-1">
-          <span class="uk-form-icon" uk-icon="icon: server"></span>
+          <span class="uk-form-icon"><i class="material-icons">dns</i></span>
           <input v-model="hostname" v-bind:class="IpFormClasses" class="uk-input uk-form-small" type="text" placeholder="Hostname or IP address">
         </div>
       </div>
@@ -44,9 +44,9 @@
           <a class="uk-accordion-title" href="#">Saved hosts</a>
           <div class="uk-accordion-content">
             <button v-if="$store.getters.ready" v-on:click="saveHost()" class="uk-button uk-button-default uk-form-small uk-margin-small uk-width-1-1">Save Current</button>
-            <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-grid">
-              <a href="#" v-on:click="autofillHost(host)" class="uk-icon-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
-              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon-link uk-width-auto host-delete" uk-icon="trash"></a> 
+            <div v-for="host in savedHosts" :key="host.name" class="uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">
+              <a href="#" v-on:click="autofillHost(host)" class="uk-link uk-padding-remove uk-width-expand host-description"><b>{{ host.name }}</b> ({{ host.hostname }}:{{ host.port }})</a> 
+              <a href="#" v-on:click="delSavedHost(host)" class="uk-icon uk-width-auto host-delete"><i class="material-icons">delete</i></a> 
             </div>
           </div>
         </li>
diff --git a/src/components/pluginComponents/formComponents/JsonForm.vue b/src/components/pluginComponents/formComponents/JsonForm.vue
index 20b3e085..3f3e3fff 100644
--- a/src/components/pluginComponents/formComponents/JsonForm.vue
+++ b/src/components/pluginComponents/formComponents/JsonForm.vue
@@ -3,7 +3,7 @@
 
     <div class="uk-flex">
       <div class="uk-text-bold uk-text-uppercase uk-width-expand">{{ name }}</div>
-      <a href="#" v-if="selfUpdate" v-on:click="getFormData()" class="uk-icon-link uk-width-auto" uk-icon="refresh"></a>
+      <a href="#" v-if="selfUpdate" v-on:click="getFormData()" class="uk-icon uk-width-auto"><i class="material-icons">cached</i></a>
     </div>
 
     <form @submit.prevent="submitForm" class="uk-form-stacked">
@@ -26,7 +26,7 @@
         </component>
       </div>
 
-      <div class="uk-text-center uk-container" v-if="taskRunning">
+      <div class="uk-text-center uk-container uk-margin-small" v-if="taskRunning">
         <div class="center-spinner" uk-spinner></div>
       </div>
 
diff --git a/src/components/viewComponents/galleryComponents/captureCard.vue b/src/components/viewComponents/galleryComponents/captureCard.vue
index 1fa77043..041d1fc5 100644
--- a/src/components/viewComponents/galleryComponents/captureCard.vue
+++ b/src/components/viewComponents/galleryComponents/captureCard.vue
@@ -13,7 +13,9 @@
       <div class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right" uk-grid>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">{{ metadata.filename }}</div>
         <div class="uk-margin-remove-top uk-padding-remove uk-width-auto">
-          <a href="#" v-on:click="delCaptureConfirm()" class="uk-icon-link" uk-icon="trash"></a>
+          <a href="#" v-on:click="delCaptureConfirm()" class="uk-icon">
+            <i class="material-icons">delete</i>
+          </a>
         </div>
       </div>
 
@@ -59,7 +61,7 @@
       <form class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }" @submit.prevent="handleTagSubmit">
 
           <div class="uk-inline">
-            <span class="uk-form-icon" uk-icon="icon: tag"></span>
+            <span class="uk-form-icon"><i class="material-icons">label</i></span>
             <input v-model="newtag" class="uk-input uk-form-width-medium uk-form-small" type="text" name="tagname" placeholder="tag">
 
             <button class="uk-button uk-button-default uk-margin-left uk-form-small uk-modal-close" type="button">Cancel</button>
diff --git a/src/components/viewComponents/galleryDisplay.vue b/src/components/viewComponents/galleryDisplay.vue
index cf8c2a87..38800cb8 100644
--- a/src/components/viewComponents/galleryDisplay.vue
+++ b/src/components/viewComponents/galleryDisplay.vue
@@ -4,8 +4,8 @@
     <nav class="uk-navbar-container uk-navbar-transparent navbar" uk-navbar="mode: click">
         <div class="uk-navbar-left uk-padding-remove-top uk-padding-remove-bottom">
             <ul class="uk-navbar-nav">
-              <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon-link" href="#" uk-icon="icon: arrow-down"></a></li>
-              <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon-link" href="#" uk-icon="icon: arrow-up"></a></li>
+              <li v-bind:class="[sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=true;" class="uk-icon" href="#"><i class="material-icons">keyboard_arrow_down</i></a></li>
+              <li v-bind:class="[!sortDescending ? 'uk-active' : '']"><a v-on:click="sortDescending=false;" class="uk-icon" href="#"><i class="material-icons">keyboard_arrow_up</i></a></li>
               <li>
                 <a href="#">Filter</a>
                 <div class="uk-navbar-dropdown" v-bind:class="{ 'uk-light uk-background-secondary': $store.state.globalSettings.darkMode }">
@@ -25,9 +25,9 @@
 
     <div v-if="$store.getters.ready" class="uk-padding-remove-top" uk-lightbox="toggle: .lightbox-link">
 
-      <div v-if="(galleryFolder)" class="uk-padding uk-padding-remove-right uk-padding-remove-bottom">
-        <a href="#" v-on:click="galleryFolder=''" class="uk-icon-button" uk-icon="arrow-left"></a> 
-        <h3 class="uk-inline uk-float-right uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
+      <div v-if="(galleryFolder)" class="uk-flex uk-flex-middle uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
+        <a href="#" v-on:click="galleryFolder=''" class="uk-icon uk-margin-remove"><i class="material-icons">arrow_back</i></a>
+        <h3 class="uk-margin-remove"><b>SCAN</b> {{ allScans[galleryFolder].metadata.filename }}</h3>
       </div>
 
       <div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
diff --git a/src/main.js b/src/main.js
index 71ffe558..a4e4129b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,9 +3,6 @@ import App from './App.vue'
 import store from './store'
 
 import UIkit from 'uikit';
-// Import UIkit icon set
-import Icons from 'uikit/dist/js/uikit-icons';
-UIkit.use(Icons);
 
 // Import MD icons
 import 'material-design-icons/iconfont/material-icons.css'
@@ -81,7 +78,7 @@ Vue.mixin({
         console.log(errormsg)
       }
       this.$store.commit('setError', errormsg);
-      UIkit.notification({message: `<span uk-icon=\'icon: warning\'></span> ${errormsg}`, status: 'danger'})
+      UIkit.notification({message: `${errormsg}`, status: 'danger'})
     },
 
     getLocalStorageObj: function(keyName) {