ref(alerts): Update UI (#66938)

**Before ——**
<img width="1446" alt="Screenshot 2024-03-13 at 5 22 24 PM"
src="https://github.com/getsentry/sentry/assets/44172267/a36d102b-f77e-4155-a7d5-76747657cae2">
<img width="1446" alt="Screenshot 2024-03-13 at 5 23 22 PM"
src="https://github.com/getsentry/sentry/assets/44172267/8cbca7c9-a137-4b8f-ba10-32c11bdc4684">


**After ——**
<img width="1446" alt="Screenshot 2024-03-13 at 5 22 43 PM"
src="https://github.com/getsentry/sentry/assets/44172267/26af0853-c36a-4b8e-9415-7aee054cee7e">
<img width="1446" alt="Screenshot 2024-03-13 at 5 23 08 PM"
src="https://github.com/getsentry/sentry/assets/44172267/10f62f20-bf43-4688-94d7-667d28d2e962">

**After, in context ——**
<img width="1488" alt="Screenshot 2024-03-13 at 5 24 03 PM"
src="https://github.com/getsentry/sentry/assets/44172267/f57341cb-e9e0-4c94-8b7f-5aaad6d7093a">

static/app/components/alert.tsx

@@ -141,6 +141,7 @@ const alertStyles = ({
       ${showExpand && 'max-content'};
     gap: ${space(1)};
     margin: 0 0 ${space(2)};
+    color: ${alertColors.color};
     font-size: ${theme.fontSizeMedium};
     border-radius: ${theme.borderRadius};
     border: 1px solid ${alertColors.border};
@@ -153,15 +154,15 @@ const alertStyles = ({
       : `${alertColors.backgroundLight}`};
 
     a:not([role='button']) {
-      color: ${theme.textColor};
-      text-decoration-color: ${theme.translucentBorder};
+      color: ${alertColors.color};
+      text-decoration-color: ${alertColors.border};
       text-decoration-style: solid;
       text-decoration-line: underline;
       text-decoration-thickness: 0.08em;
       text-underline-offset: 0.06em;
     }
     a:not([role='button']):hover {
-      text-decoration-color: ${theme.subText};
+      text-decoration-color: ${alertColors.color};
       text-decoration-style: solid;
     }
 
@@ -170,17 +171,7 @@ const alertStyles = ({
       margin: ${space(0.5)} 0 0;
     }
 
-    ${IconWrapper}, ${ExpandIconWrap} {
-      color: ${alertColors.iconColor};
-    }
-
-    ${hovered &&
-    `
-      border-color: ${alertColors.borderHover};
-      ${IconWrapper}, ${IconChevron} {
-        color: ${alertColors.iconHoverColor};
-      }
-    `}
+    ${hovered && `border-color: ${alertColors.borderHover};`}
 
     ${showExpand &&
     `cursor: pointer;

static/app/components/alertLink.tsx

@@ -82,17 +82,29 @@ const StyledLink = styled(
   display: flex;
   align-items: center;
   background-color: ${p => p.theme.alert[p.priority].backgroundLight};
-  color: ${p => p.theme.textColor};
+  color: ${p => p.theme.alert[p.priority].color};
   font-size: ${p => p.theme.fontSizeMedium};
+  text-decoration-color: ${p => p.theme.alert[p.priority].border};
+  text-decoration-style: solid;
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.06em;
   border: 1px solid ${p => p.theme.alert[p.priority].border};
   padding: ${p => (p.size === 'small' ? `${space(1)} ${space(1.5)}` : space(2))};
   margin-bottom: ${p => (p.withoutMarginBottom ? 0 : space(3))};
   border-radius: 0.25em;
   transition: 0.2s border-color;
 
+  &:hover {
+    color: ${p => p.theme.alert[p.priority].color};
+    text-decoration-color: ${p => p.theme.alert[p.priority].color};
+    text-decoration-style: solid;
+    text-decoration-line: underline;
+  }
+
   &:focus-visible {
     outline: none;
-    box-shadow: ${p => p.theme.alert[p.priority].border}7f 0 0 0 2px;
+    box-shadow: ${p => p.theme.alert[p.priority].border} 0 0 0 2px;
   }
 
   ${p =>

static/app/components/alerts/notificationBar.tsx

@@ -5,7 +5,7 @@ import {space} from 'sentry/styles/space';
 
 const StyledNotificationBarIconInfo = styled(IconInfo)`
   margin-right: ${space(1)};
-  color: ${p => p.theme.alert.info.iconColor};
+  color: ${p => p.theme.alert.info.color};
 `;
 
 export const NotificationBar = styled('div')`
@@ -18,6 +18,6 @@ export const NotificationBar = styled('div')`
   font-size: 14px;
   line-height: normal;
   ${StyledNotificationBarIconInfo} {
-    color: ${p => p.theme.alert.info.iconColor};
+    color: ${p => p.theme.alert.info.color};
   }
 `;

static/app/components/eventTitleError.tsx

@@ -24,7 +24,7 @@ const Title = styled('span')`
 `;
 
 const ErrorMessage = styled('span')`
-  color: ${p => p.theme.alert.error.iconColor};
+  color: ${p => p.theme.alert.error.color};
   background: ${p => p.theme.alert.error.backgroundLight};
   font-size: ${p => p.theme.fontSizeMedium};
   padding: 0 ${space(0.5)};

static/app/utils/theme.tsx

@@ -437,40 +437,35 @@ const generateAlertTheme = (colors: BaseColors, alias: Aliases) => ({
     backgroundLight: alias.backgroundSecondary,
     border: alias.border,
     borderHover: alias.border,
-    iconColor: 'inherit',
-    iconHoverColor: 'inherit',
+    color: 'inherit',
   },
   info: {
     background: colors.blue300,
     backgroundLight: colors.blue100,
     border: colors.blue200,
     borderHover: colors.blue300,
-    iconColor: colors.blue400,
-    iconHoverColor: colors.blue400,
+    color: colors.blue400,
   },
   warning: {
     background: colors.yellow300,
     backgroundLight: colors.yellow100,
     border: colors.yellow200,
     borderHover: colors.yellow300,
-    iconColor: colors.yellow400,
-    iconHoverColor: colors.yellow400,
+    color: colors.yellow400,
   },
   success: {
     background: colors.green300,
     backgroundLight: colors.green100,
     border: colors.green200,
     borderHover: colors.green300,
-    iconColor: colors.green400,
-    iconHoverColor: colors.green400,
+    color: colors.green400,
   },
   error: {
     background: colors.red300,
     backgroundLight: colors.red100,
     border: colors.red200,
     borderHover: colors.red300,
-    iconColor: colors.red400,
-    iconHoverColor: colors.red400,
+    color: colors.red400,
     textLight: colors.red200,
   },
 });

static/app/views/alerts/rules/metric/details/errorMigrationWarning.tsx

@@ -136,10 +136,9 @@ export function ErrorMigrationWarning({project, rule}: ErrorMigrationWarningProp
 }
 
 const DismissButton = styled(Button)`
-  color: ${p => p.theme.alert.warning.iconColor};
+  color: ${p => p.theme.alert.warning.color};
   pointer-events: all;
   &:hover {
-    color: ${p => p.theme.alert.warning.iconHoverColor};
     opacity: 0.5;
   }
 `;

static/app/views/discover/sampleDataAlert.tsx

@@ -59,10 +59,9 @@ export function SampleDataAlert({query}: {query?: string}) {
 }
 
 const DismissButton = styled(Button)`
-  color: ${p => p.theme.alert.warning.iconColor};
+  color: ${p => p.theme.alert.warning.color};
   pointer-events: all;
   &:hover {
-    color: ${p => p.theme.alert.warning.iconHoverColor};
     opacity: 0.5;
   }
 `;

static/app/views/performance/browser/webVitals/webVitalsLandingPage.tsx

@@ -208,10 +208,9 @@ export const AlertContent = styled('div')`
 `;
 
 export const DismissButton = styled(Button)`
-  color: ${p => p.theme.alert.info.iconColor};
+  color: ${p => p.theme.alert.info.color};
   pointer-events: all;
   &:hover {
-    color: ${p => p.theme.alert.info.iconHoverColor};
     opacity: 0.5;
   }
 `;