From d596b0eab106258cfc4f8ea22e10cadecfba6399 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Mon, 30 Jun 2025 13:44:31 -0400
Subject: [PATCH 1/2] gsapp: use link

---
 .../components/powerFeatureHovercard.tsx      | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/static/gsApp/components/powerFeatureHovercard.tsx b/static/gsApp/components/powerFeatureHovercard.tsx
index 954a8a05cc8afb..64f21b7d1f8de8 100644
--- a/static/gsApp/components/powerFeatureHovercard.tsx
+++ b/static/gsApp/components/powerFeatureHovercard.tsx
@@ -1,8 +1,8 @@
 import {Component} from 'react';
 import styled from '@emotion/styled';
 
-import {linkStyles} from 'sentry/components/core/link';
 import {Hovercard} from 'sentry/components/hovercard';
+import ExternalLink from 'sentry/components/links/externalLink';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
@@ -104,9 +104,13 @@ class PowerFeatureHovercard extends Component<Props> {
                   ? t('Better With %s Plan', planName)
                   : t('Requires %s Plan', planName)}
               </div>
-              <LearnMoreLink onClick={this.handleClick} data-test-id="power-learn-more">
+              <ExternalLink
+                href=""
+                onClick={this.handleClick}
+                data-test-id="power-learn-more"
+              >
                 {t('Learn More')}
-              </LearnMoreLink>
+              </ExternalLink>
             </LearnMoreTextBody>
           );
         }}
@@ -128,21 +132,6 @@ class PowerFeatureHovercard extends Component<Props> {
   }
 }
 
-const LearnMoreLink = styled('button')`
-  ${p => linkStyles({theme: p.theme})}
-  background: none;
-  border: none;
-  padding: 0;
-
-  color: ${p => p.theme.subText};
-  text-decoration: underline;
-
-  &:hover {
-    color: ${p => p.theme.subText};
-    text-decoration: none;
-  }
-`;
-
 const LearnMoreTextBody = styled('div')`
   padding: ${space(1)};
 `;

From bc54b46542c128e0158dd9ccb3384432438db9fa Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Mon, 30 Jun 2025 14:34:48 -0400
Subject: [PATCH 2/2] gsapp: use button

---
 .../components/powerFeatureHovercard.tsx      | 32 +++++++++++--------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/static/gsApp/components/powerFeatureHovercard.tsx b/static/gsApp/components/powerFeatureHovercard.tsx
index 64f21b7d1f8de8..de712394299cc7 100644
--- a/static/gsApp/components/powerFeatureHovercard.tsx
+++ b/static/gsApp/components/powerFeatureHovercard.tsx
@@ -1,8 +1,10 @@
 import {Component} from 'react';
 import styled from '@emotion/styled';
 
+import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
 import {Hovercard} from 'sentry/components/hovercard';
-import ExternalLink from 'sentry/components/links/externalLink';
+import {IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
@@ -99,18 +101,22 @@ class PowerFeatureHovercard extends Component<Props> {
 
           return (
             <LearnMoreTextBody data-test-id="power-hovercard">
-              <div>
-                {partial
-                  ? t('Better With %s Plan', planName)
-                  : t('Requires %s Plan', planName)}
-              </div>
-              <ExternalLink
-                href=""
-                onClick={this.handleClick}
-                data-test-id="power-learn-more"
-              >
-                {t('Learn More')}
-              </ExternalLink>
+              <Flex direction="column" gap={space(1)}>
+                <div>
+                  {partial
+                    ? t('Better With %s Plan', planName)
+                    : t('Requires %s Plan', planName)}
+                </div>
+                <Button
+                  priority="primary"
+                  onClick={this.handleClick}
+                  data-test-id="power-learn-more"
+                  size="xs"
+                  icon={<IconLightning size="xs" />}
+                >
+                  {t('Learn More')}
+                </Button>
+              </Flex>
             </LearnMoreTextBody>
           );
         }}