From 7bd37559beec4e9b2b820a8deb338dbacf6a3478 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Tue, 28 Apr 2020 18:01:25 -0400
Subject: [PATCH] Fixes #1255, make sidebar expand/contract buttonmore
 notceable, also adjust toolbar button colors to be WCAG AA

---
 client/styles/abstracts/_variables.scss |  4 +--
 client/styles/components/_sidebar.scss  | 40 +++++++++++++++++--------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 3cc94503..4fca97fd 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/client/styles/abstracts/_variables.scss
@@ -49,7 +49,7 @@ $themes: (
     button-secondary-background-color: $medium-light,
     button-color: $black,
     button-border-color: $middle-light,
-    toolbar-button-color: $p5js-pink,
+    toolbar-button-color: $dark,
     toolbar-button-background-color: $medium-light,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: $p5js-active-pink,
@@ -124,7 +124,7 @@ $themes: (
     button-secondary-background-color: $medium-dark,
     button-color: $light,
     button-border-color: $middle-dark,
-    toolbar-button-color: $p5js-pink,
+    toolbar-button-color: $lightest,
     toolbar-button-background-color: $medium-dark,
     button-background-hover-color: $p5js-pink,
     button-background-active-color: $p5js-active-pink,
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index 7ec8532f..d7b782af 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -179,29 +179,45 @@
   }
 }
 
-.sidebar__expand {
+.sidebar__expand,
+.sidebar__contract {
   @include icon();
   position: absolute;
-  top: #{7 / $base-font-size}rem;
-  left: #{1 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
+  top: #{2 / $base-font-size}rem;
+  left: #{0 / $base-font-size}rem;
+  height: #{25 / $base-font-size}rem;
+  width: #{49 / $base-font-size}rem;
+  border-radius: 2px;
   & svg {
-    height: #{14 / $base-font-size}rem;
+    height: #{25 / $base-font-size}rem;
   }
+  @include themify() {
+    background-color: getThemifyVariable("toolbar-button-background-color");
+    & polygon {
+      fill: getThemifyVariable("toolbar-button-color");
+    }
+    &:hover {
+      background-color: getThemifyVariable("button-background-hover-color");
+      & polygon {
+        fill: getThemifyVariable("button-hover-color");
+      }
+    }
+  }
+}
+
+.sidebar__expand {
   display: none;
+  &:hover {
+    cursor: e-resize;
+  }
   .sidebar--contracted & {
     display: inline-block;
   }
 }
 
 .sidebar__contract {
-  @include icon();
-  position: absolute;
-  top: #{7 / $base-font-size}rem;
-  left: #{1 / $base-font-size}rem;
-  height: #{14 / $base-font-size}rem;
-  & svg {
-    height: #{14 / $base-font-size}rem;
+  &:hover {
+    cursor: w-resize;
   }
   .sidebar--contracted & {
     display: none;