From fa8ac42ef8a326c77154e5a085eb466b473c6c83 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 10 Jan 2019 11:43:49 -0800
Subject: [PATCH] Polish save as button and overlay

---
 .../dataExplorer/components/SaveAsButton.scss |  5 -----
 .../dataExplorer/components/SaveAsButton.tsx  | 22 +++++++++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/ui/src/dataExplorer/components/SaveAsButton.scss b/ui/src/dataExplorer/components/SaveAsButton.scss
index c607cbdf57..f756a3377b 100644
--- a/ui/src/dataExplorer/components/SaveAsButton.scss
+++ b/ui/src/dataExplorer/components/SaveAsButton.scss
@@ -1,8 +1,3 @@
-.save-as--close-overlay {
-  cursor: pointer;
-  font-weight: 300;
-}
-
 .save-as--options {
   display: flex;
   margin-top: -10px;
diff --git a/ui/src/dataExplorer/components/SaveAsButton.tsx b/ui/src/dataExplorer/components/SaveAsButton.tsx
index f3c9757254..dbf3bc3ea9 100644
--- a/ui/src/dataExplorer/components/SaveAsButton.tsx
+++ b/ui/src/dataExplorer/components/SaveAsButton.tsx
@@ -4,12 +4,14 @@ import React, {PureComponent} from 'react'
 // Components
 import SaveAsCellForm from 'src/dataExplorer/components/SaveAsCellForm'
 import {
+  IconFont,
   Button,
   Radio,
   OverlayTechnology,
   OverlayBody,
   OverlayHeading,
   OverlayContainer,
+  ComponentColor,
 } from 'src/clockface'
 
 // Styles
@@ -38,17 +40,19 @@ class SaveAsButton extends PureComponent<Props, State> {
 
     return (
       <>
-        <Button text="Save As..." onClick={this.handleShowOverlay} />
+        <Button
+          icon={IconFont.Export}
+          text="Save As"
+          onClick={this.handleShowOverlay}
+          color={ComponentColor.Success}
+          titleText="Save your query as a Dashboard Cell or a Task"
+        />
         <OverlayTechnology visible={isOverlayVisible}>
           <OverlayContainer>
-            <OverlayHeading title="Save As">
-              <div className="save-as--close-overlay">
-                <span
-                  className="icon remove"
-                  onClick={this.handleHideOverlay}
-                />
-              </div>
-            </OverlayHeading>
+            <OverlayHeading
+              title="Save As"
+              onDismiss={this.handleHideOverlay}
+            />
             <OverlayBody>
               <div className="save-as--options">
                 <Radio>