From 75cf0aa2d3eb69aa7afa2f590e3f54a081972897 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 28 Apr 2019 19:08:48 +0100
Subject: [PATCH] Style project view switcher buttons

---
 src/components/ProjectViewSwitcher.vue | 36 ++++++++++++++++++++++++--
 src/views/Projects.vue                 |  2 +-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/ProjectViewSwitcher.vue b/src/components/ProjectViewSwitcher.vue
index 12d49e7..edfb043 100644
--- a/src/components/ProjectViewSwitcher.vue
+++ b/src/components/ProjectViewSwitcher.vue
@@ -1,6 +1,38 @@
 <template>
   <div>
-    <button type="button" @click="$emit('changed', 'grid')">Grid</button>
-    <button type="button" @click="$emit('changed', 'list')" class="ml-2">List</button>
+    <button type="button" class="p-2" :class="{ active: activeMode == 'grid'}" @click="$emit('changed', 'grid')">
+      <span class="visuallyhidden">View projects in a grid</span>
+      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><clipPath id="a"><path d="M12.2 5v4.8H17V5zm0 12H17v-4.8h-4.8zM5 5h4.8v4.8H5zm0 12v-4.8h4.8V17z" fill="none" clip-rule="evenodd"/></clipPath><clipPath id="b"><path fill="none" d="M0 0h22v22H0z"/></clipPath><clipPath id="c"><path fill="none" d="M5 5h12v12H5z"/></clipPath></defs><g clip-path="url(&quot;#a&quot;)"><g clip-path="url(&quot;#b&quot;)" style="clip-path:url(&quot;#icon-grid-b&quot;)"><g clip-path="url(&quot;#c&quot;)"><path d="M0 0h22v22H0z"/></g></g></g></svg>
+    </button>
+
+    <button type="button" class="p-2 ml-2" :class="{ active: activeMode == 'list'}" @click="$emit('changed', 'list')">
+      <span class="visuallyhidden">View projects in a list</span>
+      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22"><defs><clipPath id="link-icon-a"><path d="M5,5V7H19V5Zm14,7V10H5v2ZM5,17H19V15H5Z" style="fill: none; clip-rule: evenodd;"></path></clipPath><clipPath id="link-icon-b"><rect width="24" height="22" style="fill: none;"></rect></clipPath><clipPath id="link-icon-c"><rect x="5" y="5" width="14" height="12" style="fill: none;"></rect></clipPath></defs><title>Asset 1</title><g style="clip-path: url(&quot;#link-icon-a&quot;);"><g style="clip-path: url(&quot;#link-icon-b&quot;);"><g style="clip-path: url(&quot;#link-icon-c&quot;);"><rect width="24" height="22"></rect></g></g></g></svg>
+    </button>
   </div>
 </template>
+
+<script>
+export default {
+  props: {
+    activeMode: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style type="postcss" scoped>
+  button {
+    @apply text-gray-700;
+
+    &:hover {
+    @apply bg-white rounded shadow
+  }
+  }
+
+  .active {
+    @apply bg-white rounded shadow text-blue-400
+  }
+</style>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index e88e3b7..adeb6dc 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -8,7 +8,7 @@
       <div class="flex justify-between items-baseline">
         <page-title class="mb-6">All Projects</page-title>
 
-        <project-view-switcher @changed="projectViewSwitched"></project-view-switcher>
+        <project-view-switcher @changed="projectViewSwitched" :active-mode="displayMode"></project-view-switcher>
       </div>
 
       <div v-if="displayMode == 'grid'" class="flex flex-wrap mt-4 -mx-4 -mb-8">