ref(crons): Remove usage of MonitorStatus from MonitorIcon (#66885)

This renames the component MonitorIndicator as well since that seems to
make more sense for what it's being used for

static/app/views/monitors/components/detailsSidebar.tsx

@@ -13,9 +13,9 @@ import {defined} from 'sentry/utils';
 import {getFormattedDate} from 'sentry/utils/dates';
 import useCopyToClipboard from 'sentry/utils/useCopyToClipboard';
 import {DEFAULT_MAX_RUNTIME} from 'sentry/views/monitors/components/monitorForm';
-import MonitorIcon from 'sentry/views/monitors/components/monitorIcon';
+import {MonitorIndicator} from 'sentry/views/monitors/components/monitorIndicator';
 import type {Monitor, MonitorEnvironment} from 'sentry/views/monitors/types';
-import {MonitorStatus, ScheduleType} from 'sentry/views/monitors/types';
+import {ScheduleType} from 'sentry/views/monitors/types';
 import {scheduleAsText} from 'sentry/views/monitors/utils';
 
 interface Props {
@@ -73,7 +73,7 @@ export default function DetailsSidebar({monitorEnv, monitor}: Props) {
       </Schedule>
       <SectionHeading>{t('Margins')}</SectionHeading>
       <Thresholds>
-        <MonitorIcon status={MonitorStatus.MISSED_CHECKIN} size={12} />
+        <MonitorIndicator status="warning" size={12} />
         <Text>
           {defined(checkin_margin)
             ? tn(
@@ -83,7 +83,7 @@ export default function DetailsSidebar({monitorEnv, monitor}: Props) {
               )
             : t('Check-ins that are missed')}
         </Text>
-        <MonitorIcon status={MonitorStatus.ERROR} size={12} />
+        <MonitorIndicator status="error" size={12} />
         <Text>
           {tn(
             'Check-ins longer than %s min or errors',

static/app/views/monitors/components/monitorIcon.tsx

@@ -1,24 +0,0 @@
-import styled from '@emotion/styled';
-
-import {MonitorStatus} from '../types';
-
-export default styled('div')<{size: number; status: MonitorStatus}>`
-  display: inline-block;
-  position: relative;
-  border-radius: 50%;
-  height: ${p => p.size}px;
-  width: ${p => p.size}px;
-
-  ${p =>
-    p.color
-      ? `background: ${p.color};`
-      : `background: ${
-          p.status === MonitorStatus.ERROR || p.status === MonitorStatus.TIMEOUT
-            ? p.theme.error
-            : p.status === MonitorStatus.OK
-              ? p.theme.success
-              : p.status === MonitorStatus.MISSED_CHECKIN
-                ? p.theme.warning
-                : p.theme.disabled
-        };`};
-`;

static/app/views/monitors/components/monitorIndicator.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+const MonitorIndicator = styled('div')<{
+  size: number;
+  status: 'success' | 'warning' | 'error' | 'disabled';
+}>`
+  display: inline-block;
+  position: relative;
+  border-radius: 50%;
+  height: ${p => p.size}px;
+  width: ${p => p.size}px;
+  background: ${p => p.theme[p.status]};
+`;
+
+export {MonitorIndicator};