From 30c3dba573a9b31196795eb6548e0cee4a0ee9c4 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Fri, 9 Nov 2018 11:03:57 -0600
Subject: [PATCH 1/2] decrease size of toggle bar

---
 .../components/expression/expression.js       |  2 +-
 .../public/components/toolbar/toolbar.scss    | 21 +++++++++++++++++++
 .../public/components/toolbar/tray/tray.js    |  2 +-
 .../public/components/toolbar/tray/tray.scss  |  4 ++++
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/expression/expression.js b/x-pack/plugins/canvas/public/components/expression/expression.js
index 676c6865cd0ef6..1ee8a5211eb3db 100644
--- a/x-pack/plugins/canvas/public/components/expression/expression.js
+++ b/x-pack/plugins/canvas/public/components/expression/expression.js
@@ -27,7 +27,7 @@ export const Expression = ({
   toggleAutocompleteEnabled,
 }) => {
   return (
-    <EuiPanel>
+    <EuiPanel className="canvasTray__panel">
       <ExpressionInput
         functionDefinitions={functionDefinitions}
         error={error}
diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
index 1219a8d1dce5f5..b82fa794af2da5 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
+++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -1,3 +1,24 @@
+.canvasToolbar {
+  position: relative;
+}
+
+.canvasTray__toggle {
+  position: absolute;
+  top: $euiSize * -1;
+  left: 50%;
+  background-color: $euiColorEmptyShade;
+  margin: 0;
+  border-radius: $euiBorderRadius $euiBorderRadius 0 0;
+
+  > .euiFlexItem {
+    margin: 0;
+  }
+
+  button {
+    padding: $euiSizeXS $euiSizeM;
+  }
+}
+
 .canvasToolbar__controls {
   padding: $euiSizeM;
   height: 100%;
diff --git a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js
index 07cb732f046910..bc8aa5e0dadec4 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js
+++ b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.js
@@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon } from '@elastic/eui';
 export const Tray = ({ children, done }) => {
   return (
     <Fragment>
-      <EuiFlexGroup justifyContent="spaceAround">
+      <EuiFlexGroup className="canvasTray__toggle" justifyContent="spaceAround">
         <EuiFlexItem grow={false}>
           <EuiButtonIcon size="s" onClick={done} aria-label="Dismiss tray" iconType="arrowDown" />
         </EuiFlexItem>
diff --git a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
index 9d8b6d13dde940..1c941a6f2b1f3c 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
+++ b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
@@ -3,3 +3,7 @@
   flex-direction: column;
   @include euiBottomShadowFlat;
 }
+
+.canvasTray__panel {
+  border-radius: 0;
+}

From 02cf127ed0c0d70d9d372658f7deb42187114fa4 Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Mon, 12 Nov 2018 16:27:38 -0600
Subject: [PATCH 2/2] change bg colors for toggle

---
 x-pack/plugins/canvas/public/components/toolbar/toolbar.scss | 5 +++--
 .../plugins/canvas/public/components/toolbar/tray/tray.scss  | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
index b82fa794af2da5..f625bff0e4b547 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
+++ b/x-pack/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -4,9 +4,9 @@
 
 .canvasTray__toggle {
   position: absolute;
-  top: $euiSize * -1;
+  top: $euiSize * -1.25;
   left: 50%;
-  background-color: $euiColorEmptyShade;
+  background-color: $euiColorLightestShade;
   margin: 0;
   border-radius: $euiBorderRadius $euiBorderRadius 0 0;
 
@@ -16,6 +16,7 @@
 
   button {
     padding: $euiSizeXS $euiSizeM;
+    box-shadow: 0 -2px 1px rgba($euiColorFullShade, .10)
   }
 }
 
diff --git a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
index 1c941a6f2b1f3c..beba97760253e3 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
+++ b/x-pack/plugins/canvas/public/components/toolbar/tray/tray.scss
@@ -5,5 +5,6 @@
 }
 
 .canvasTray__panel {
+  background-color: $euiColorLightestShade;
   border-radius: 0;
 }