fix: resolve external link icon alignment issue (#16909)

Author: dizel852

airbyte-webapp/src/components/ui/Link/ExternalLink.tsx

@@ -2,8 +2,6 @@ import { PropsWithChildren } from "react";
 
 import { getLinkClassNames } from "./getLinkClassNames";
 import { LinkProps } from "./Link";
-import { Box } from "../Box";
-import { Icon } from "../Icon";
 
 interface ExternalLinkProps extends LinkProps {
   href: string;
@@ -28,11 +26,6 @@ export const ExternalLink: React.FC<PropsWithChildren<ExternalLinkProps>> = ({
       target={opensInNewTab ? "_blank" : undefined}
     >
       {children}
-      {withIcon && (
-        <Box ml="sm" as="span">
-          <Icon type="share" size="sm" />
-        </Box>
-      )}
     </a>
   );
 };

airbyte-webapp/src/packages/cloud/views/billing/OrganizationBillingPage/SubscribeCards/SubscribeCards.tsx

@@ -125,11 +125,11 @@ export const SubscribeCards: React.FC = () => {
           <TeamsCard />
         </FlexContainer>
         <FlexItem>
-          <Text size="lg">
-            <ExternalLink href={links.pricingPage} opensInNewTab withIcon>
+          <ExternalLink href={links.pricingPage} opensInNewTab>
+            <Button variant="clear" size="sm" icon="share" iconPosition="right" iconSize="sm">
               <FormattedMessage id="settings.organization.billing.pricingFeatureComparison" />
-            </ExternalLink>
-          </Text>
+            </Button>
+          </ExternalLink>
         </FlexItem>
       </FlexContainer>
     </Box>