From 015174a0b6448785d3b967240ff22a4262109ea7 Mon Sep 17 00:00:00 2001
From: Mark Berger <mark.berger@globallogic.com>
Date: Mon, 6 Feb 2023 20:33:29 +0200
Subject: [PATCH] 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
---
 airbyte-webapp/src/components/icons/RotateIcon.tsx        | 5 +++--
 .../ConnectionStatusPage/ConnectionStatusPage.module.scss | 8 --------
 .../ConnectionStatusPage/ConnectionStatusPage.tsx         | 6 +-----
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/airbyte-webapp/src/components/icons/RotateIcon.tsx b/airbyte-webapp/src/components/icons/RotateIcon.tsx
index 7ce8c6868753..f58b5fb485bf 100644
--- 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
index a6b12e945b35..14902bdfb1a2 100644
--- 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
index 9e7800821411..68ad8fd6ece7 100644
--- 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>