Update sidebar colours

src/components/Sidebar.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased fixed pin-l h-full overflow-y-scroll">
+  <div class="w-auto lg:w-64 bg-grey-light text-grey-darker antialiased fixed pin-l h-full overflow-y-scroll">
     <div>
       <ul class="list-reset">
-        <li v-for="link in links" :key="link.title" class="border-b border-grey-darkest">
+        <li v-for="link in links" :key="link.title">
           <a
             href="#0"
-            class="flex items-center no-underline hover:underline focus:underline border-l-6 px-4 py-5"
+            class="flex items-center no-underline focus:underline px-4 py-3 text-sm"
             :class="{
-              'border-blue bg-grey-darker': link.active,
+              'bg-grey-darker text-white': link.active,
-              'border-transparent hover:bg-grey-darker': !link.active,
+              'border-transparent hover:bg-grey hover:text-blue-dark': !link.active,
               'text-grey cursor-not-allowed': link.disabled,
-              'text-white': !link.disabled,
+              'text-grey-darker': !link.disabled,
             }"
           >
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>

tailwind.js

@@ -11,7 +11,7 @@ var colors = {
   'green': '#398002',
   'grey': '#B7B7B7',
   'grey-dark': '#888888',
-  'grey-darker': '#444444',
+  'grey-darker': '#555555',
   'grey-darkest': '#333333',
   'grey-light': '#DDDDDD',
   'grey-lighter': '#eeeeee',