alert: drop custom alert (#91892)

Fixes DE-33

Before
![CleanShot 2025-05-19 at 15 53
24@2x](https://github.com/user-attachments/assets/e606483f-bb0e-4a9a-b8b7-210a24a18c20)

After
![CleanShot 2025-05-19 at 15 54
53@2x](https://github.com/user-attachments/assets/7b6fff41-43aa-4fae-9886-a6b63965c978)


Fwiw, this was also quite broken in dark mode...
![CleanShot 2025-05-19 at 15 53
17@2x](https://github.com/user-attachments/assets/9cfffcc6-e450-45ad-bdb5-23c5872b2767)

Author: JonasBa

static/app/components/pageAlertBar.tsx

@@ -60,7 +60,7 @@ import {
   IssueDetailsTourContext,
   ORDERED_ISSUE_DETAILS_TOUR,
 } from 'sentry/views/issueDetails/issueDetailsTour';
-import SampleEventAlert from 'sentry/views/issueDetails/sampleEventAlert';
+import {SampleEventAlert} from 'sentry/views/issueDetails/sampleEventAlert';
 import {GroupDetailsLayout} from 'sentry/views/issueDetails/streamline/groupDetailsLayout';
 import {useIssueActivityDrawer} from 'sentry/views/issueDetails/streamline/hooks/useIssueActivityDrawer';
 import {useMergedIssuesDrawer} from 'sentry/views/issueDetails/streamline/hooks/useMergedIssuesDrawer';

static/app/views/issueDetails/groupDetails.tsx

@@ -1,51 +1,45 @@
-import styled from '@emotion/styled';
-
+import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import PageAlertBar from 'sentry/components/pageAlertBar';
 import {IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import type {AvatarProject} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 
-function SampleEventAlert({
+export function SampleEventAlert({
   organization,
   project,
 }: {
   organization: Organization;
   project: AvatarProject;
 }) {
   return (
-    <PageAlertBar>
-      <IconLightning />
-      <TextWrapper>
-        {t(
-          'You are viewing a sample error. Configure Sentry to start viewing real errors.'
-        )}
-      </TextWrapper>
-      <LinkButton
-        size="xs"
-        priority="primary"
-        to={`/${organization.slug}/${project.slug}/getting-started/${
-          project.platform || ''
-        }`}
-        onClick={() =>
-          trackAnalytics('growth.sample_error_onboarding_link_clicked', {
-            project_id: project.id?.toString(),
-            organization,
-            platform: project.platform,
-          })
-        }
-      >
-        {t('Get Started')}
-      </LinkButton>
-    </PageAlertBar>
+    <Alert
+      system
+      type="info"
+      icon={<IconLightning />}
+      trailingItems={
+        <LinkButton
+          size="xs"
+          priority="primary"
+          to={`/${organization.slug}/${project.slug}/getting-started/${
+            project.platform || ''
+          }`}
+          onClick={() =>
+            trackAnalytics('growth.sample_error_onboarding_link_clicked', {
+              project_id: project.id?.toString(),
+              organization,
+              platform: project.platform,
+            })
+          }
+        >
+          {t('Get Started')}
+        </LinkButton>
+      }
+    >
+      {t(
+        'You are viewing a sample error. Configure Sentry to start viewing real errors.'
+      )}
+    </Alert>
   );
 }
-
-export default SampleEventAlert;
-
-const TextWrapper = styled('span')`
-  margin: 0 ${space(1)};
-`;

static/app/views/issueDetails/sampleEventAlert.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 
+import {Alert} from 'sentry/components/core/alert';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
-import PageAlertBar from 'sentry/components/pageAlertBar';
 import {IconLightning} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -16,28 +16,32 @@ export default function FinishSetupAlert({
   projectId: string;
 }) {
   return (
-    <PageAlertBar>
-      <IconLightning />
+    <Alert
+      type="info"
+      icon={<IconLightning />}
+      trailingItems={
+        <LinkButton
+          size="xs"
+          priority="primary"
+          external
+          href="https://docs.sentry.io/performance-monitoring/getting-started/"
+          onClick={() =>
+            trackAnalytics('growth.sample_transaction_docs_link_clicked', {
+              project_id: projectId,
+              organization,
+            })
+          }
+        >
+          {t('Get Started')}
+        </LinkButton>
+      }
+    >
       <TextWrapper>
         {t(
           'You are viewing a sample transaction. Configure performance to start viewing real transactions.'
         )}
       </TextWrapper>
-      <LinkButton
-        size="xs"
-        priority="primary"
-        external
-        href="https://docs.sentry.io/performance-monitoring/getting-started/"
-        onClick={() =>
-          trackAnalytics('growth.sample_transaction_docs_link_clicked', {
-            project_id: projectId,
-            organization,
-          })
-        }
-      >
-        {t('Get Started')}
-      </LinkButton>
-    </PageAlertBar>
+    </Alert>
   );
 }