feat(ui): Tweak Alert type styles (#16094)

Change to make the text to be a different color, uppercase, and bold

Author: billyvg

src/sentry/static/sentry/app/views/settings/projectAlerts/ruleRowNew.tsx

@@ -54,7 +54,7 @@ class RuleRow extends React.Component<Props, State> {
 
     return (
       <RuleItem>
-        <div>{t('Issue')}</div>
+        <RuleType>{t('Issue')}</RuleType>
         <div>
           {canEdit ? <RuleName to={editLink}>{data.name}</RuleName> : data.name}
           <RuleDescription>
@@ -98,7 +98,7 @@ class RuleRow extends React.Component<Props, State> {
 
     return (
       <RuleItem>
-        <div>{t('Metric')}</div>
+        <RuleType>{t('Metric')}</RuleType>
         <div>
           {canEdit ? <RuleName to={editLink}>{data.name}</RuleName> : data.name}
           <RuleDescription />
@@ -147,6 +147,13 @@ const RuleItem = styled(PanelItem)`
   grid-auto-flow: column;
 `;
 
+const RuleType = styled('div')`
+  color: ${p => p.theme.gray3};
+  font-size: ${p => p.theme.fontSizeSmall};
+  font-weight: bold;
+  text-transform: uppercase;
+`;
+
 const RuleName = styled(Link)`
   font-weight: bold;
 `;