From 63375d0f3785213bff490697114f3f9c3bc8eda0 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Thu, 13 Sep 2018 21:23:13 -0700
Subject: [PATCH] Update navigation icons

---
 resources/assets/scripts/components/Icon.vue   | 18 ++++++++++++++++++
 .../scripts/components/core/Navigation.vue     | 13 ++++++-------
 .../assets/styles/components/navigation.css    |  5 +++--
 3 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 resources/assets/scripts/components/Icon.vue

diff --git a/resources/assets/scripts/components/Icon.vue b/resources/assets/scripts/components/Icon.vue
new file mode 100644
index 000000000..9f4f7785d
--- /dev/null
+++ b/resources/assets/scripts/components/Icon.vue
@@ -0,0 +1,18 @@
+<template>
+    <i class="ion" :class="iconClass"></i>
+</template>
+
+<script>
+    export default {
+        props: {
+            type: {type: String, required: true},
+            iconStyle: {type: String, default: 'ios'},
+        },
+
+        computed: {
+            iconClass: function () {
+                return `ion-${this.iconStyle}-${this.type}`;
+            }
+        },
+    }
+</script>
diff --git a/resources/assets/scripts/components/core/Navigation.vue b/resources/assets/scripts/components/core/Navigation.vue
index 92b485b27..dc1b155f6 100644
--- a/resources/assets/scripts/components/core/Navigation.vue
+++ b/resources/assets/scripts/components/core/Navigation.vue
@@ -44,22 +44,22 @@
             <ul>
                 <li>
                     <router-link :to="{ name: 'dashboard' }">
-                        <server-icon aria-label="Server dashboard" class="h-4"/>
+                        <Icon type="cube"/>
                     </router-link>
                 </li>
                 <li>
                     <router-link :to="{ name: 'account' }">
-                        <user-icon aria-label="Profile management" class="h-4"/>
+                        <Icon type="contact"/>
                     </router-link>
                 </li>
                 <li>
                     <a :href="this.route('admin.index')">
-                        <settings-icon aria-label="Administrative controls" class="h-4"/>
+                        <Icon type="cog"/>
                     </a>
                 </li>
                 <li>
                     <a :href="this.route('auth.logout')" v-on:click.prevent="doLogout">
-                        <log-out-icon aria-label="Sign out" class="h-4"/>
+                        <Icon type="log-out"/>
                     </a>
                 </li>
             </ul>
@@ -70,12 +70,11 @@
 <script>
     import debounce from 'lodash/debounce';
     import { mapState } from 'vuex';
-    import { LogOutIcon, ServerIcon, SettingsIcon, UserIcon } from 'vue-feather-icons'
+    import Icon from '../Icon';
 
     export default {
         name: 'navigation',
-        components: { LogOutIcon, ServerIcon, SettingsIcon, UserIcon },
-
+        components: {Icon},
         data: function () {
             return {
                 loadingResults: false,
diff --git a/resources/assets/styles/components/navigation.css b/resources/assets/styles/components/navigation.css
index 74a50d3a6..a73ce134c 100644
--- a/resources/assets/styles/components/navigation.css
+++ b/resources/assets/styles/components/navigation.css
@@ -17,7 +17,8 @@
 
     & > .search-box {
         & > .search-input {
-            @apply .text-sm .p-2 .mt-3 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
+            @apply .text-sm .p-2 .mx-3 .rounded .border .border-blue-darker .bg-grey-lightest .text-grey-darkest;
+            margin-top: 0.6rem;
             width: 26rem;
             opacity: 0.7;
             transition: ease-in-out opacity 150ms;
@@ -53,7 +54,7 @@
             & > li {
                 @apply .inline-block;
                 & > a {
-                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-sm .p-5;
+                    @apply .block .h-full .no-underline .text-grey-lighter .font-light .text-xl .px-5 .py-4;
 
                     &:hover {
                         @apply .bg-blue-dark;