From d38aa177dc962f4f11d19d5370162342ee6a9f23 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Thu, 8 Jul 2021 11:19:11 -0700
Subject: [PATCH 1/5] initial commit

---
 .../components/RunQueryActionButton.tsx       | 10 ++++++---
 .../src/SqlLab/components/SaveQuery.tsx       | 21 +++++++++---------
 .../SqlLab/components/ShareSqlLabQuery.tsx    | 22 +++++++++++++------
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
index 9d22ce5b7c70b..0769043862942 100644
--- a/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
+++ b/superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx
@@ -21,7 +21,7 @@ import { t, styled, supersetTheme } from '@superset-ui/core';
 
 import { Menu } from 'src/common/components';
 import Button, { ButtonProps } from 'src/components/Button';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import {
   DropdownButton,
   DropdownButtonProps,
@@ -77,6 +77,10 @@ const StyledButton = styled.span`
     &:last-of-type {
       margin-right: ${({ theme }) => theme.gridUnit * 2}px;
     }
+    span[name='caret-down'] {
+      display: flex;
+      margin-right: ${({ theme }) => theme.gridUnit * -2}px;
+    }
   }
 `;
 
@@ -116,8 +120,8 @@ const RunQueryActionButton = ({
           ? {
               overlay: overlayCreateAsMenu,
               icon: (
-                <Icon
-                  color={
+                <Icons.CaretDown
+                  iconColor={
                     isDisabled
                       ? supersetTheme.colors.grayscale.base
                       : supersetTheme.colors.grayscale.light5
diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index 6b589b758677d..b2134a8be5df7 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -18,15 +18,20 @@
  */
 import React, { useState } from 'react';
 import { Row, Col, Input, TextArea } from 'src/common/components';
-import { t, supersetTheme, styled } from '@superset-ui/core';
+import { t, styled, useTheme } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 
 const Styles = styled.span`
-  svg {
-    vertical-align: -${supersetTheme.gridUnit * 1.25}px;
+  span[role='img'] {
+    display: flex;
+    margin: 0;
+    svg {
+      vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px;
+      margin: 0;
+    }
   }
 `;
 
@@ -147,15 +152,11 @@ export default function SaveQuery({
     </Form>
   );
 
+  const theme = useTheme();
   return (
     <Styles className="SaveQuery">
       <Button buttonSize="small" onClick={toggleSave}>
-        <Icon
-          name="save"
-          color={supersetTheme.colors.primary.base}
-          width={20}
-          height={20}
-        />{' '}
+        <Icons.Save iconColor={theme.colors.primary.base} iconSize="xl" />
         {isSaved ? t('Save') : t('Save as')}
       </Button>
       <Modal
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
index 10e3e43c31c25..e1000831c3c18 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { t, useTheme } from '@superset-ui/core';
+import { t, useTheme, styled } from '@superset-ui/core';
 
 import Button from 'src/components/Button';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
-import Icon from 'src/components/Icon';
+import Icons from 'src/components/Icons';
 import CopyToClipboard from 'src/components/CopyToClipboard';
 import { storeQuery } from 'src/utils/common';
 import { getClientErrorObject } from 'src/utils/getClientErrorObject';
@@ -39,6 +39,16 @@ interface ShareSqlLabQueryPropTypes {
   addDangerToast: (msg: string) => void;
 }
 
+const SytledIcon = styled(Icons.Link)`
+  &:first-of-type {
+    margin: 0;
+    display: flex;
+    svg {
+      margin: 0;
+    }
+  }
+`;
+
 function ShareSqlLabQuery({
   queryEditor,
   addDangerToast,
@@ -86,14 +96,12 @@ function ShareSqlLabQuery({
       : t('Save the query to enable this feature');
     return (
       <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
-        <Icon
-          name="link"
+        <SytledIcon
           color={
             canShare ? theme.colors.primary.base : theme.colors.grayscale.base
           }
-          width={20}
-          height={20}
-        />{' '}
+          iconSize="xl"
+        />
         {t('Copy link')}
       </Button>
     );

From 385c431f117050267c598450b0e60ef11c5f5b2e Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Fri, 9 Jul 2021 14:58:18 -0700
Subject: [PATCH 2/5] rid of theme

---
 superset-frontend/src/SqlLab/components/SaveQuery.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/SaveQuery.tsx b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
index b2134a8be5df7..1c0dee4269407 100644
--- a/superset-frontend/src/SqlLab/components/SaveQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveQuery.tsx
@@ -18,7 +18,7 @@
  */
 import React, { useState } from 'react';
 import { Row, Col, Input, TextArea } from 'src/common/components';
-import { t, styled, useTheme } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 import Button from 'src/components/Button';
 import { Form, FormItem } from 'src/components/Form';
 import Modal from 'src/components/Modal';
@@ -28,6 +28,7 @@ const Styles = styled.span`
   span[role='img'] {
     display: flex;
     margin: 0;
+    color: ${({ theme }) => theme.colors.grayscale.base};
     svg {
       vertical-align: -${({ theme }) => theme.gridUnit * 1.25}px;
       margin: 0;
@@ -152,11 +153,10 @@ export default function SaveQuery({
     </Form>
   );
 
-  const theme = useTheme();
   return (
     <Styles className="SaveQuery">
       <Button buttonSize="small" onClick={toggleSave}>
-        <Icons.Save iconColor={theme.colors.primary.base} iconSize="xl" />
+        <Icons.Save iconSize="xl" />
         {isSaved ? t('Save') : t('Save as')}
       </Button>
       <Modal

From 4b508c91a23f660ca73252409858ad99d0b47e43 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 12 Jul 2021 08:24:17 -0700
Subject: [PATCH 3/5] Update
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
---
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
index e1000831c3c18..07088ef304c4e 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
@@ -39,7 +39,7 @@ interface ShareSqlLabQueryPropTypes {
   addDangerToast: (msg: string) => void;
 }
 
-const SytledIcon = styled(Icons.Link)`
+const StyledIcon = styled(Icons.Link)`
   &:first-of-type {
     margin: 0;
     display: flex;

From 923806e1021133041b5d66c2308c601e47a69c10 Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 12 Jul 2021 08:25:34 -0700
Subject: [PATCH 4/5] Update
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
---
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
index 07088ef304c4e..e28bc70554330 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
@@ -97,7 +97,7 @@ function ShareSqlLabQuery({
     return (
       <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
         <SytledIcon
-          color={
+          iconColor={
             canShare ? theme.colors.primary.base : theme.colors.grayscale.base
           }
           iconSize="xl"

From 6b1f61371810ad5026e7710f996d443395a42c6c Mon Sep 17 00:00:00 2001
From: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Date: Mon, 12 Jul 2021 08:25:44 -0700
Subject: [PATCH 5/5] Update
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx

Co-authored-by: David Aaron Suddjian <1858430+suddjian@users.noreply.github.com>
---
 superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
index e28bc70554330..5f6c89c7b73cf 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery.tsx
@@ -96,7 +96,7 @@ function ShareSqlLabQuery({
       : t('Save the query to enable this feature');
     return (
       <Button buttonSize="small" tooltip={tooltip} disabled={!canShare}>
-        <SytledIcon
+        <StyledIcon
           iconColor={
             canShare ? theme.colors.primary.base : theme.colors.grayscale.base
           }