Skip to content

Commit

Permalink
Icons passed to Button component must be wrapped in a div for proper …
Browse files Browse the repository at this point in the history
…styling

- Added property notation for Rotate Icon to support className attribute
  • Loading branch information
Mark Berger committed Feb 6, 2023
1 parent ac370c9 commit 828c0f2
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 15 deletions.
5 changes: 3 additions & 2 deletions airbyte-webapp/src/components/icons/RotateIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,6 @@
.resetButton {
margin-right: variables.$spacing-md;
}

.syncButton {
.iconRotate {
display: flex;
margin-right: 12px;
align-items: center;
}
}
}

.footer {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 828c0f2

Please sign in to comment.