From 85717bd36925e05b3b34fd107b9726e749030fa9 Mon Sep 17 00:00:00 2001
From: NGPixel <github@ngpixel.com>
Date: Mon, 1 Jan 2018 01:52:28 -0500
Subject: [PATCH] feat: navigator sd footer + setup icons fixes

---
 client/js/components/navigator.vue    | 44 +++++++++++-----
 client/scss/components/navigator.scss | 48 ++++++++++--------
 client/svg/icons.svg                  | 73 ++++++++++++++++-----------
 server/views/setup.pug                | 14 ++---
 4 files changed, 109 insertions(+), 70 deletions(-)

diff --git a/client/js/components/navigator.vue b/client/js/components/navigator.vue
index 3c255560..ebd8db33 100644
--- a/client/js/components/navigator.vue
+++ b/client/js/components/navigator.vue
@@ -26,33 +26,46 @@
             svg.icons.is-24(role='img')
               title Search
               use(xlink:href='#gg-search')
-          a(href='')
-            svg.icons.is-24(role='img', title='New Document')
+          a(href='', title='New Document')
+            svg.icons.is-24(role='img')
               title New Document
               use(xlink:href='#nc-plus-circle')
-          a(href='')
-            svg.icons.is-24(role='img', title='Edit Document')
+          a(href='', title='Edit Document')
+            svg.icons.is-24(role='img')
               title Edit Document
               use(xlink:href='#nc-pen-red')
-          a(href='')
-            svg.icons.is-24(role='img', title='History')
+          a(href='', title='History')
+            svg.icons.is-24(role='img')
               title History
               use(xlink:href='#nc-restore')
-          a(href='')
-            svg.icons.is-24(role='img', title='View Source')
+          a(href='', title='View Source')
+            svg.icons.is-24(role='img')
               title View Source
               use(xlink:href='#nc-code-editor')
-          a(href='')
-            svg.icons.is-24(role='img', title='Move Document')
+          a(href='', title='Move Document')
+            svg.icons.is-24(role='img')
               title Move Document
               use(xlink:href='#nc-move')
-          a(href='')
-            svg.icons.is-24(role='img', title='Delete Document')
+          a(href='', title='Delete Document')
+            svg.icons.is-24(role='img')
               title Delete Document
               use(xlink:href='#nc-trash')
         .navigator-sd-search
-          input(type='text', placeholder='Search')
+          input(type='text', ref='iptSearch', placeholder='Search')
         .navigator-sd-results
+        .navigator-sd-footer
+          a(href='', title='Settings')
+            svg.icons.is-24(role='img')
+              title Settings
+              use(xlink:href='#nc-gear')
+          a(href='', title='Users')
+            svg.icons.is-24(role='img')
+              title Users
+              use(xlink:href='#nc-users')
+          a(href='', title='Assets')
+            svg.icons.is-24(role='img')
+              title Assets
+              use(xlink:href='#nc-image')
 </template>
 
 <script>
@@ -91,6 +104,11 @@ export default {
   methods: {
     toggleMainMenu() {
       this.sdShown = !this.sdShown
+      if (this.sdShown) {
+        this.$nextTick(() => {
+          this.$refs.iptSearch.focus()
+        })
+      }
       // this.$store.dispatch('navigator/alert', {
       //   style: 'success',
       //   icon: 'gg-check',
diff --git a/client/scss/components/navigator.scss b/client/scss/components/navigator.scss
index fa638f4c..8e33e1a1 100644
--- a/client/scss/components/navigator.scss
+++ b/client/scss/components/navigator.scss
@@ -150,7 +150,6 @@
     width: 350px;
     background-color: #FFF;
     border-radius: 0 0 5px 0;
-    padding: 0 0 1rem 0;
     transition: all .4s ease;
     transform-origin: top left;
 
@@ -180,14 +179,6 @@
         &:hover {
           background-color: #FFF;
         }
-
-        svg {
-          use {
-            color: mc('blue-grey', '500');
-            fill: mc('blue-grey', '500');
-            transition: all .4s ease;
-          }
-        }
       }
     }
 
@@ -197,11 +188,12 @@
       input {
         display: block;
         width: 100%;
-        padding: 0 1rem 0 1rem;
+        padding: 0 3rem 0 1rem;
         height: 40px;
         border: 0;
         font-size: .9rem;
         color: mc('grey', '700');
+        position: relative;
 
         &:focus {
           outline: none;
@@ -209,17 +201,33 @@
         }
       }
 
-      svg {
+      &::after {
+        content: " ";
+        @include spinner(mc('blue', '200'),0.5s,18px);
         position: absolute;
-        width: 20px;
-        height: 20px;
-        top: 9px;
-        left: 15px;
-
-        use {
-          color: mc('grey', '500');
-          fill: mc('grey', '500');
-          transition: all .4s ease;
+        display: block;
+        top: 11px;
+        right: 1rem;
+      }
+    }
+
+    &-footer {
+      background-color: mc('blue-grey', '100');
+      border-top: 5px solid mc('blue-grey', '200');
+      border-radius: 0 0 5px 0;
+      display: flex;
+      justify-content: center;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        width: 50px;
+        transition: all .4s ease;
+
+        &:hover {
+          background-color: mc('blue-grey', '200');
         }
       }
     }
diff --git a/client/svg/icons.svg b/client/svg/icons.svg
index 6c85ebdc..a43d671e 100644
--- a/client/svg/icons.svg
+++ b/client/svg/icons.svg
@@ -7,7 +7,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-world-2" viewBox="0 0 64 64">
+    <symbol id="nc-world" viewBox="0 0 64 64">
         <g>
             <g class="nc-icon-wrapper">
                 <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,12 c5.5,7.3,12.5,10,22.4,10c9.8,0,16.9-2.7,22.4-10" stroke-linejoin="miter" stroke-linecap="butt"/>
@@ -20,7 +20,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-webpage-2" viewBox="0 0 48 48">
+    <symbol id="nc-webpage" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/>
@@ -38,7 +38,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-square-remove-12" viewBox="0 0 48 48">
+    <symbol id="nc-square-remove" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#E86C60" d="M45,1H3C1.89543,1,1,1.89543,1,3v42c0,1.10457,0.89543,2,2,2h42c1.10457,0,2-0.89543,2-2V3 C47,1.89543,46.10457,1,45,1z"/>
@@ -105,7 +105,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-home-52" viewBox="0 0 48 48">
+    <symbol id="nc-home" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#C9514B" d="M8,18V7c0-0.55228,0.44771-1,1-1h4c0.55229,0,1,0.44772,1,1v6.09091L8,18z"/>
@@ -118,7 +118,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-dashboard-30" viewBox="0 0 48 48">
+    <symbol id="nc-dashboard" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#444444" d="M24,47C11.31738,47,1,36.68213,1,24S11.31738,1,24,1s23,10.31787,23,23S36.68262,47,24,47z"/>
@@ -133,7 +133,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-cloud-download-95" viewBox="0 0 48 48">
+    <symbol id="nc-cloud-download" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#43A6DD" d="M38.86328,21.04102C37.89014,13.09766,31.08936,7,23,7C14.69971,7,7.84326,13.31836,7.08789,21.51074 C3.46875,22.74609,1,26.13867,1,30c0,4.96289,4.0376,9,9,9h28c4.9624,0,9-4.03711,9-9 C47,25.32812,43.42236,21.47656,38.86328,21.04102z"/>
@@ -141,7 +141,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-cloud-upload-96" viewBox="0 0 48 48">
+    <symbol id="nc-cloud-upload" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#43A6DD" d="M38.86328,21.04102C37.89062,13.09766,31.08887,7,23,7C14.69922,7,7.84277,13.31836,7.08789,21.51074 C3.46875,22.74609,1,26.13867,1,30c0,4.96289,4.03711,9,9,9h28c4.96289,0,9-4.03711,9-9 C47,25.3291,43.42285,21.47754,38.86328,21.04102z"/>
@@ -158,7 +158,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-chat-33" viewBox="0 0 48 48">
+    <symbol id="nc-chat" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#BADEFC" d="M47,29c0-7.168-7.626-13-17-13s-17,5.832-17,13s7.626,13,17,13c1.119,0,2.211-0.088,3.27-0.247l8.283,4.141 C41.694,45.965,41.847,46,42,46c0.183,0,0.365-0.05,0.526-0.149C42.82,45.668,43,45.347,43,45v-7.64C45.492,35.097,47,32.182,47,29z "/>
@@ -166,7 +166,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-man-23" viewBox="0 0 48 48">
+    <symbol id="nc-man" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <rect x="18" y="24" fill-rule="evenodd" clip-rule="evenodd" fill="#EAC3A2" width="12" height="15"/>
@@ -202,7 +202,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-ms-dots" viewBox="0 0 100 100">
+    <symbol id="wk-msdots" viewBox="0 0 100 100">
         <g>
             <g class="nc-icon-wrapper">
                 <g transform="rotate(0)">
@@ -245,7 +245,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-key-26" viewBox="0 0 48 48">
+    <symbol id="nc-key" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <path fill="#C6C6C6" d="M23,34h-8c-0.55273,0-1-0.44775-1-1v-8c0-0.26514,0.10547-0.51953,0.29297-0.70703l22-22 C36.48047,2.10547,36.73438,2,37,2h8c0.55273,0,1,0.44775,1,1v8c0,0.26514-0.10547,0.51953-0.29297,0.70703l-3,3 C42.51953,14.89453,42.26562,15,42,15h-5v5c0,0.55225-0.44727,1-1,1h-5v5c0,0.26514-0.10547,0.51953-0.29297,0.70703l-7,7 C23.51953,33.89453,23.26562,34,23,34z"/>
@@ -288,7 +288,7 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-man-38" viewBox="0 0 48 48">
+    <symbol id="nc-man" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper">
                 <rect x="17.9983292" y="24" fill-rule="evenodd" clip-rule="evenodd" fill="#EAC3A2" width="12" height="17"/>
@@ -321,24 +321,6 @@
             </g>
         </g>
     </symbol>
-    <symbol id="nc-webpage-2-2" viewBox="0 0 48 48">
-        <g>
-            <g class="nc-icon-wrapper">
-                <path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/>
-                <rect x="1" y="7" fill="#43A6DD" width="46" height="12"/>
-                <path fill="#E6E6E6" d="M16,19v27h29c1.10455,0,2-0.89545,2-2V19H16z"/>
-                <path fill="#444444" d="M1,19v25c0,1.10455,0.89545,2,2,2h13V19H1z"/>
-                <circle fill="#E6E6E6" cx="8" cy="13" r="3"/>
-                <path fill="#E6E6E6" d="M42,14h-4c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h4c0.55225,0,1,0.44727,1,1S42.55225,14,42,14z"/>
-                <path fill="#E6E6E6" d="M33,14h-9c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h9c0.55225,0,1,0.44727,1,1S33.55225,14,33,14z"/>
-                <path fill="#B3B3B3" d="M28.90455,36h-7.80911C20.49045,36,20,35.50955,20,34.90456v-9.80911C20,24.49045,20.49045,24,21.09545,24 h7.80911C29.50955,24,30,24.49045,30,25.09545v9.80911C30,35.50955,29.50955,36,28.90455,36z"/>
-                <path fill="#B3B3B3" d="M42,26h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,26,42,26z"/>
-                <path fill="#B3B3B3" d="M42,31h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,31,42,31z"/>
-                <path fill="#B3B3B3" d="M42,36h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,36,42,36z"/>
-                <path fill="#B3B3B3" d="M42,41H21c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h21c0.55225,0,1,0.44727,1,1S42.55225,41,42,41z"/>
-            </g>
-        </g>
-    </symbol>
     <symbol id="gg-apps-grid" viewBox="0 0 48 48">
         <g>
             <g class="nc-icon-wrapper" fill="currentColor">
@@ -427,4 +409,35 @@
             <path fill="#444444" d="M47.658,13.247l-8-7c-0.294-0.257-0.715-0.32-1.071-0.157C38.229,6.252,38,6.607,38,7v5 c-8.829,0-14.21,5.382-19.414,10.586C13.745,27.427,9.171,32,2,32H1c-0.552,0-1,0.448-1,1v2c0,0.552,0.448,1,1,1h1 c8.829,0,14.21-5.382,19.414-10.586C26.255,20.573,30.829,16,38,16v5c0,0.393,0.229,0.748,0.587,0.91C38.719,21.971,38.86,22,39,22 c0.237,0,0.473-0.085,0.658-0.247l8-7C47.876,14.562,48,14.288,48,14S47.876,13.438,47.658,13.247z"></path>
         </g>
     </symbol>
+    <symbol id='nc-folder-image' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#F9D44C" d="M17,8l-4-4H3C1.895,4,1,4.895,1,6v34c0,2.209,1.791,4,4,4h38c2.209,0,4-1.791,4-4V12c0-2.209-1.791-4-4-4H17 z"></path>
+            <path fill="#C7AA3D" d="M47,14H1V6c0-1.105,0.895-2,2-2h10l4,4h26c2.209,0,4,1.791,4,4V14z"></path>
+            <circle fill="#C7AA3D" cx="20.5" cy="22.5" r="2.5"></circle>
+            <path fill="#C7AA3D" d="M34.79,33.386l-7-9c-0.194-0.248-0.477-0.37-0.81-0.386c-0.315,0.007-0.61,0.162-0.793,0.419l-4.313,6.039 l-3.166-3.165c-0.212-0.212-0.504-0.315-0.806-0.288c-0.298,0.029-0.567,0.191-0.733,0.44l-4,6c-0.205,0.307-0.224,0.701-0.05,1.026 C13.292,34.797,13.631,35,14,35h20c0.382,0,0.73-0.218,0.898-0.561C35.066,34.097,35.024,33.688,34.79,33.386z"></path>
+        </g>
+    </symbol>
+    <symbol id='nc-users' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <circle fill="#5A7A84" cx="39" cy="10" r="5"></circle>
+            <circle fill="#5A7A84" cx="9" cy="10" r="5"></circle>
+            <path fill-rule="evenodd" clip-rule="evenodd" fill="#5A7A84" d="M35.9966888,17C33.2370911,17,31,19.2295895,31,22.0038109 v6.7917995c0,0.5547104,0.4171391,1.1712494,0.9327698,1.3774986L34,31l0.9164581,10.9975281 C34.9626007,42.551178,35.4530411,43,35.9970284,43h6.0059433c0.5506401,0,1.0350075-0.455761,1.0805702-1.0024719L44,31 l2.0507812-0.6835899C46.5750198,30.1416607,47,29.5525093,47,29.0014992v-6.9939594C47,19.2419491,44.758419,17,42.0033112,17 H35.9966888z"></path>
+            <path fill-rule="evenodd" clip-rule="evenodd" fill="#5A7A84" d="M5.996686,17C3.237092,17,1,19.2295895,1,22.0038109v6.7917995 c0,0.5547104,0.4171371,1.1712494,0.9327741,1.3774986L4,31l0.916461,10.9975281C4.9625978,42.551178,5.4530358,43,5.9970298,43 h6.00594c0.5506401,0,1.0350103-0.455761,1.0805702-1.0024719L14,31l2.0507812-0.6835899 C16.5750198,30.1416607,17,29.5525093,17,29.0014992v-6.9939594C17,19.2419491,14.75842,17,12.0033102,17H5.996686z"></path>
+            <circle fill="#335262" cx="24" cy="7" r="6"></circle>
+            <path fill-rule="evenodd" clip-rule="evenodd" fill="#335262" d="M20.0006599,15C16.6865902,15,14,17.6780396,14,21.0033302v8.9958 c0,0.5527592,0.39816,1.1999512,0.8877296,1.4447289L18,33l1.0039997,13.0830002C19.0470009,46.6020012,19.4790001,47,20,47h8 c0.5209999,0,0.9529991-0.3979988,0.9960003-0.9169998l0.941-13.2870026l3.1410408-1.3884583 C33.5872307,31.1824608,34,30.5553703,34,29.9991302v-8.9958C34,17.6877804,31.3234596,15,27.9993401,15H20.0006599z"></path>
+        </g>
+    </symbol>
+    <symbol id='nc-image' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#223E49" d="M45,45H3c-1.105,0-2-0.895-2-2V5c0-1.105,0.895-2,2-2h42c1.105,0,2,0.895,2,2v38C47,44.105,46.105,45,45,45z "></path>
+            <circle fill="#EFD358" cx="21" cy="15" r="4"></circle>
+            <path fill="#5A7A84" d="M41.792,35.39l-10-13c-0.378-0.492-1.207-0.492-1.585,0l-8.243,10.715l-6.184-7.73 c-0.379-0.475-1.183-0.475-1.562,0l-8,10C5.697,36.028,6.161,37,7,37h34C41.829,37,42.298,36.047,41.792,35.39z"></path>
+        </g>
+    </symbol>
+    <symbol id='nc-gear' viewBox="0 0 48 48">
+        <g class="nc-icon-wrapper">
+            <path fill="#5A7A84" d="M46,19h-5.76807c-0.31299-1.01953-0.7207-2.00488-1.21777-2.94336l4.07764-4.07715 c0.1875-0.1875,0.29297-0.44141,0.29297-0.70703s-0.10547-0.51953-0.29297-0.70703L37.43506,4.9082 c-0.39062-0.39062-1.02344-0.39062-1.41406,0l-4.07812,4.07715C31.00488,8.48926,30.01953,8.08105,29,7.76855V2 c0-0.55273-0.44775-1-1-1h-8c-0.55225,0-1,0.44727-1,1v5.76855c-1.01953,0.3125-2.00488,0.7207-2.94287,1.2168L11.979,4.9082 c-0.39062-0.39062-1.02344-0.39062-1.41406,0L4.9082,10.56543c-0.1875,0.1875-0.29297,0.44141-0.29297,0.70703 s0.10547,0.51953,0.29297,0.70703l4.07764,4.07715C8.48877,16.99512,8.08105,17.98047,7.76807,19H2c-0.55225,0-1,0.44727-1,1v8 c0,0.55273,0.44775,1,1,1h5.76807c0.31299,1.01953,0.7207,2.00488,1.21777,2.94336L4.9082,36.02051 c-0.1875,0.1875-0.29297,0.44141-0.29297,0.70703s0.10547,0.51953,0.29297,0.70703l5.65674,5.65723 c0.39062,0.39062,1.02344,0.39062,1.41406,0l4.07812-4.07715c0.93799,0.49609,1.92334,0.9043,2.94287,1.2168V46 c0,0.55273,0.44775,1,1,1h8c0.55225,0,1-0.44727,1-1v-5.76855c1.01953-0.3125,2.00488-0.7207,2.94287-1.2168L36.021,43.0918 c0.39062,0.39062,1.02344,0.39062,1.41406,0l5.65674-5.65723c0.1875-0.1875,0.29297-0.44141,0.29297-0.70703 s-0.10547-0.51953-0.29297-0.70703l-4.07764-4.07715c0.49707-0.93848,0.90479-1.92383,1.21777-2.94336H46c0.55225,0,1-0.44727,1-1 v-8C47,19.44727,46.55225,19,46,19z M24,31c-3.86597,0-7-3.13403-7-7c0-3.86603,3.13403-7,7-7c3.86603,0,7,3.13397,7,7 C31,27.86597,27.86603,31,24,31z"></path>
+            <path fill="#335262" d="M24,13c-6.07513,0-11,4.92487-11,11s4.92487,11,11,11s11-4.92487,11-11S30.07513,13,24,13z M24,31 c-3.86597,0-7-3.13403-7-7c0-3.86603,3.13403-7,7-7c3.86603,0,7,3.13397,7,7C31,27.86597,27.86603,31,24,31z"></path>
+        </g>
+    </symbol>
 </svg>
\ No newline at end of file
diff --git a/server/views/setup.pug b/server/views/setup.pug
index 17fc9dc6..e397dce5 100644
--- a/server/views/setup.pug
+++ b/server/views/setup.pug
@@ -54,7 +54,7 @@ block body
                     .is-logo
                       svg.icons.is-64: use(xlink:href='#nc-metrics')
                       h4 System Check
-                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Checking your system for compatibility...
+                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#wk-msdots')] Checking your system for compatibility...
                     p(v-if='!loading && syscheck.ok')
                       ul
                         li(v-for='rs in syscheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
@@ -81,7 +81,7 @@ block body
                   .panel-content.form-sections
                     section
                       .is-logo
-                        svg.icons.is-64: use(xlink:href='#nc-webpage-2-2')
+                        svg.icons.is-64: use(xlink:href='#nc-webpage')
                         h4 General Information
                       p.control.is-fullwidth
                         label.label Site Title
@@ -249,14 +249,14 @@ block body
                     .is-logo
                       img(src='svg/logo-git.svg', alt='Git Logo')
                       h4 Git Repository Check
-                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#nc-ms-dots')] Verifying Git repository settings...
+                    p(v-if='loading') #[svg.icons.is-24.is-text: use(xlink:href='#wk-msdots')] Verifying Git repository settings...
                     p(v-if='!loading && gitcheck.ok')
                       ul
                         li(v-for='rs in gitcheck.results') #[svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')] {{rs}}
                     p(v-if='!loading && gitcheck.ok')
                       svg.icons.is-18.is-text: use(xlink:href='#nc-check-bold')
                       strong  Git settings are correct!
-                    p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ gitcheck.error }}
+                    p(v-if='!loading && !gitcheck.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove')] Error: {{ gitcheck.error }}
                   .panel-footer
                     .progress-bar: div(v-bind:style='{width: currentProgress}')
                     button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToGit', v-bind:disabled='loading') Back
@@ -274,7 +274,7 @@ block body
                     i(v-if='loading')
                   .panel-content.is-text
                     .is-logo
-                      svg.icons.is-64: use(xlink:href='#nc-man-38')
+                      svg.icons.is-64: use(xlink:href='#nc-man')
                       h4 Administrator Account
                     p A root administrator account will be created for local authentication. From this account, you can create or authorize more users.
                   .panel-content.form-sections
@@ -335,7 +335,7 @@ block body
                     i(v-if='loading')
                   .panel-content.is-text
                     .is-logo(v-if='loading')
-                      svg.icons.is-64: use(xlink:href='#nc-ms-dots')
+                      svg.icons.is-64: use(xlink:href='#wk-msdots')
                       h4 Finalizing your installation...
                     .is-logo(v-if='!loading && final.ok')
                       svg.icons.is-64: use(xlink:href='#nc-check-bold')
@@ -343,7 +343,7 @@ block body
                     p(v-if='!loading && final.ok'): strong Wiki.js was configured successfully and is now ready for use.
                     p(v-if='!loading && final.ok')
                       | Click the <strong>Start</strong> button below to launch your newly configured wiki.
-                    p(v-if='!loading && !final.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove-12')] Error: {{ final.error }}
+                    p(v-if='!loading && !final.ok') #[svg.icons.is-18.is-text: use(xlink:href='#nc-square-remove')] Error: {{ final.error }}
                   .panel-footer
                     .progress-bar: div(v-bind:style='{width: currentProgress}')
                     button.button.is-small.is-light-blue.is-outlined(v-on:click='proceedToAdmin', v-bind:disabled='loading') Back