[superset] 31/39: Trying for more specificity

[lyndsi]

This is an automated email from the ASF dual-hosted git repository.

lyndsi pushed a commit to branch 
lyndsi/sql-lab-new-explore-button-functionality-and-move-save-dataset-to-split-save-button
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 0d56dd05d7d5b97016a68062b39feb898b6bc8ae
Author: lyndsiWilliams <kcatg...@gmail.com>
AuthorDate: Sat Jul 2 00:43:36 2022 -0500

    Trying for more specificity
---
 .../components/SaveDatasetActionButton/index.tsx   | 66 +++++++++++-----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git 
a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx 
b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
index 114607e387..2cbad48af6 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetActionButton/index.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { t, styled, useTheme } from '@superset-ui/core';
+import { t, useTheme } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 import { DropdownButton } from 'src/components/DropdownButton';
 import Button from 'src/components/Button';
@@ -34,30 +34,37 @@ export default function SaveDatasetActionButton({
 }: Props) {
   const theme = useTheme();
 
-  const ButtonComponentStyles = styled(
-    DropdownButton as React.FC<DropdownButtonProps>,
-  )`
-    &.ant-dropdown-button button.ant-btn.ant-btn-default {
-      &:first-of-type {
-        width: ${theme.gridUnit * 16}px;
-      }
-      background-color: ${theme.colors.primary.light4};
-      color: ${theme.colors.primary.dark1};
-      &:nth-child(2) {
-        &:before,
-        &:hover:before {
-          border-left: 1px solid ${theme.colors.primary.dark2};
-        }
-      }
-    }
-    span[name='caret-down'] {
-      margin-left: ${theme.gridUnit * 1}px;
-      color: ${theme.colors.primary.dark2};
-    }
-  `;
+  const FCdropdownButton = DropdownButton as React.FC<DropdownButtonProps>;
+
+  const buttonStyles = {
+    '&.ant-dropdown-button button.ant-btn.ant-btn-default': {
+      '&:first-of-type': {
+        width: `${theme.gridUnit * 16}px`,
+      },
+      backgroundColor: theme.colors.primary.light4,
+      color: theme.colors.primary.dark1,
+      '&:nth-child(2)': {
+        '&:before, &:hover:before': {
+          borderLeft: `1px solid ${theme.colors.primary.dark2}`,
+        },
+      },
+    },
+    'span[name="caret-down"]': {
+      marginLeft: `${theme.gridUnit * 1}px`,
+      color: `${theme.colors.primary.dark2}`,
+    },
+  };
 
-  return overlayMenu ? (
-    <ButtonComponentStyles
+  return !overlayMenu ? (
+    <Button
+      onClick={toggleSave}
+      buttonStyle="primary"
+      css={{ width: theme.gridUnit * 25 }}
+    >
+      {t('Save')}
+    </Button>
+  ) : (
+    <FCdropdownButton
       onClick={toggleSave}
       overlay={overlayMenu}
       icon={
@@ -67,16 +74,9 @@ export default function SaveDatasetActionButton({
         />
       }
       trigger={['click']}
+      css={buttonStyles}
     >
       {t('Save')}
-    </ButtonComponentStyles>
-  ) : (
-    <Button
-      onClick={toggleSave}
-      buttonStyle="primary"
-      css={{ width: theme.gridUnit * 25 }}
-    >
-      {t('Save')}
-    </Button>
+    </FCdropdownButton>
   );
 }