fix(explore): Chart header icon paddings (apache#19534)

ValtechMobility · Jun 9, 2022 · f3d3bbc · f3d3bbc
1 parent 17dfbf9
commit f3d3bbc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/superset-frontend/src/components/AlteredSliceTag/index.jsx b/superset-frontend/src/components/AlteredSliceTag/index.jsx
@@ -182,10 +182,7 @@ export default class AlteredSliceTag extends React.Component {
   renderTriggerNode() {
     return (
       <Tooltip id="difference-tooltip" title={t('Click to see difference')}>
-        <span
-          className="label label-warning m-l-5"
-          style={{ fontSize: '12px' }}
-        >
+        <span className="label label-warning" style={{ fontSize: '12px' }}>
           {t('Altered')}
         </span>
       </Tooltip>

diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx
@@ -68,11 +68,7 @@ const FaveStar = ({
       data-test="fave-unfave-icon"
       role="button"
     >
-      {isStarred ? (
-        <Icons.FavoriteSelected iconSize="xxl" />
-      ) : (
-        <Icons.FavoriteUnselected iconSize="xxl" />
-      )}
+      {isStarred ? <Icons.FavoriteSelected /> : <Icons.FavoriteUnselected />}
     </StyledLink>
   );
 

diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -96,8 +96,19 @@ const StyledHeader = styled.div`
 `;
 
 const StyledButtons = styled.span`
-  display: flex;
-  align-items: center;
+  ${({ theme }) => css`
+    display: flex;
+    align-items: center;
+    padding-left: ${theme.gridUnit * 2}px;
+
+    & .fave-unfave-icon {
+      padding: 0 ${theme.gridUnit}px;
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+  `}
 `;
 
 export class ExploreChartHeader extends React.PureComponent {
@@ -236,16 +247,14 @@ export class ExploreChartHeader extends React.PureComponent {
             onSave={actions.updateChartTitle}
             placeholder={t('Add the name of the chart')}
           />
-          {slice?.certified_by && (
-            <>
-              <CertifiedBadge
-                certifiedBy={slice.certified_by}
-                details={slice.certification_details}
-              />{' '}
-            </>
-          )}
           {slice && (
             <StyledButtons>
+              {slice.certified_by && (
+                <CertifiedBadge
+                  certifiedBy={slice.certified_by}
+                  details={slice.certification_details}
+                />
+              )}
               {user.userId && (
                 <FaveStar
                   itemId={slice.slice_id}