From 394fdeb6aa0caa6ea0fac7dfc0d507fd9fa8d51a Mon Sep 17 00:00:00 2001
From: Erin <erin@atomicbear.com>
Date: Fri, 26 Jul 2019 06:06:55 -0500
Subject: [PATCH] toggle styling done

---
 components/Sidebar.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 50cafbd..68983aa 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,7 @@
     .sidebar
       template(v-for='category in categories')
         nuxt-link(:to='category.slug') {{ category.title }}
-      div(@click="toggleCardsShown")
+      div(class="toggleWrapper" @click="toggleCardsShown")
         div(class="viewToggle" :class="{active: cardsShown}") Cards
         div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
@@ -44,14 +44,23 @@ export default {
     padding: 0.5rem 1rem 0.5rem 1rem;
     font-weight: 600;
   }
-	.viewToggle {
-		background-color: yellow;
+	.toggleWrapper {
+		display: grid;
+  	grid-template-columns: 1fr 1fr;
+		width: min-content;
 		border: 3px;
+		border-color: #08e5ff;
 		border-style: solid;
-
+		border-radius: .5rem;
+		overflow:hidden;
+	}
+	.viewToggle {
+		padding: 0 .2rem;
+		color: #008190;
 	}
 	.active {
-		background-color: green;
+		background-color: #08e5ff;
+		color: #232331;
 	}
 }