Icons passed to Button component must be wrapped in a div for proper …

…styling (#22176) - Added property notation for Rotate Icon to support className attribute
airbytehq · Feb 6, 2023 · 015174a · 015174a
1 parent df614d4
commit 015174a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 15 deletions.
diff --git a/airbyte-webapp/src/components/icons/RotateIcon.tsx b/airbyte-webapp/src/components/icons/RotateIcon.tsx
@@ -4,10 +4,11 @@ interface Props {
   color?: string;
   width?: string;
   height?: string;
+  className?: string;
 }
 
-export const RotateIcon = ({ color = theme.greyColor20, width = "20", height = "20" }: Props) => (
-  <svg width={width} height={height} viewBox="0 0 20 20" fill="none">
+export const RotateIcon = ({ color = theme.greyColor20, width = "20", height = "20", className }: Props) => (
+  <svg className={className} width={width} height={height} viewBox="0 0 20 20" fill="none">
     <path
       d="M3.463 2.433C5.27756 0.860661 7.59899 -0.0033494 10 1.65915e-07C15.523 1.65915e-07 20 4.477 20 10C20 12.136 19.33 14.116 18.19 15.74L15 10H18C18.0001 8.43162 17.5392 6.8978 16.6747 5.58926C15.8101 4.28071 14.5799 3.25516 13.1372 2.64012C11.6944 2.02509 10.1027 1.8477 8.55996 2.13002C7.0172 2.41233 5.59145 3.1419 4.46 4.228L3.463 2.433ZM16.537 17.567C14.7224 19.1393 12.401 20.0033 10 20C4.477 20 0 15.523 0 10C0 7.864 0.67 5.884 1.81 4.26L5 10H2C1.99987 11.5684 2.46075 13.1022 3.32534 14.4107C4.18992 15.7193 5.42007 16.7448 6.86282 17.3599C8.30557 17.9749 9.89729 18.1523 11.44 17.87C12.9828 17.5877 14.4085 16.8581 15.54 15.772L16.537 17.567Z"
       fill={color}

diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss
@@ -21,14 +21,6 @@
   .resetButton {
     margin-right: variables.$spacing-md;
   }
-
-  .syncButton {
-    .iconRotate {
-      display: flex;
-      margin-right: 12px;
-      align-items: center;
-    }
-  }
 }
 
 .footer {

diff --git a/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx b/airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx
@@ -173,11 +173,7 @@ export const ConnectionStatusPage: React.FC = () => {
                       className={styles.syncButton}
                       disabled={!allowSync}
                       onClick={onSyncNowButtonClick}
-                      icon={
-                        <div className={styles.iconRotate}>
-                          <RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />
-                        </div>
-                      }
+                      icon={<RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />}
                     >
                       <FormattedMessage id="connection.startSync" />
                     </Button>