ref(crons): Monitor form visual tweaks (#45738)

Changes:
- Change add monitor icon to `+` and capitalize both words
- Change project placeholder to `Choose Project`
- Remove units from next to the inputs and show in description

Before:
<img width="315" alt="image"
src="https://user-images.githubusercontent.com/9372512/224841483-96938a0b-6a99-44a3-8753-ee553b3ef93b.png">
<img width="774" alt="image"
src="https://user-images.githubusercontent.com/9372512/224841508-ded670d9-5611-4672-af39-49ac29a75d00.png">


After:
<img width="313" alt="Screenshot 2023-03-13 at 2 57 31 PM"
src="https://user-images.githubusercontent.com/9372512/224841456-91ba9828-c607-45d1-9ed2-59e6469dc781.png">
<img width="952" alt="image"
src="https://user-images.githubusercontent.com/9372512/224842471-5641b5ad-f8a7-463f-9117-c07e4ea3a929.png">

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

@@ -36,8 +36,8 @@ import {
 } from '../types';
 
 const SCHEDULE_OPTIONS: RadioOption<string>[] = [
-  [ScheduleType.INTERVAL, t('Interval')],
   [ScheduleType.CRONTAB, t('Crontab')],
+  [ScheduleType.INTERVAL, t('Interval')],
 ];
 
 const DEFAULT_MONITOR_TYPE = 'cron_job';
@@ -181,6 +181,7 @@ function MonitorForm({
           <StyledSentryProjectSelectorField
             name="project"
             projects={projects.filter(project => project.isMember)}
+            placeholder={t('Choose Project')}
             disabled={!!monitor}
             disabledReason={t('Existing monitors cannot be moved between projects')}
             valueIsSlug
@@ -197,7 +198,7 @@ function MonitorForm({
 
         <StyledListItem>{t('Choose your schedule type')}</StyledListItem>
         <ListItemSubText>
-          {tct('You can use our simple schedule or [link:the crontab syntax].', {
+          {tct('You can use [link:the crontab syntax] or our interval schedule.', {
             link: <ExternalLink href="https://en.wikipedia.org/wiki/Cron" />,
           })}
         </ListItemSubText>
@@ -274,6 +275,7 @@ function MonitorForm({
                       options={getIntervals(
                         Number(form.current.getValue('config.schedule.frequency') ?? 1)
                       )}
+                      placeholder="minute"
                       required
                       stacked
                       inline={false}
@@ -287,35 +289,29 @@ function MonitorForm({
         </InputGroup>
         <StyledListItem>{t('Set a missed status')}</StyledListItem>
         <ListItemSubText>
-          {t('How long to wait before we consider a check-in as missed.')}
+          {t("The number of minutes we'll wait before we consider a check-in as missed.")}
         </ListItemSubText>
         <InputGroup>
-          <LabeledInputs>
-            <StyledNumberField
-              name="config.checkin_margin"
-              placeholder="e.g. 30"
-              stacked
-              inline={false}
-            />
-            <LabelText>{t('Minutes')}</LabelText>
-          </LabeledInputs>
+          <StyledNumberField
+            name="config.checkin_margin"
+            placeholder="e.g. 30"
+            stacked
+            inline={false}
+          />
         </InputGroup>
         <StyledListItem>{t('Set a failed status')}</StyledListItem>
         <ListItemSubText>
           {t(
-            "How long a check-in is allowed to run before it's considered failed. If the job encounters an error it will also fail."
+            "The number of minutes a check-in is allowed to run before it's considered failed."
           )}
         </ListItemSubText>
         <InputGroup>
-          <LabeledInputs>
-            <StyledNumberField
-              name="config.max_runtime"
-              placeholder="e.g. 30"
-              stacked
-              inline={false}
-            />
-            <LabelText>{t('Minutes')}</LabelText>
-          </LabeledInputs>
+          <StyledNumberField
+            name="config.max_runtime"
+            placeholder="e.g. 30"
+            stacked
+            inline={false}
+          />
         </InputGroup>
       </StyledList>
     </Form>
@@ -325,7 +321,7 @@ function MonitorForm({
 export default MonitorForm;
 
 const StyledList = styled(List)`
-  width: 500px;
+  width: 600px;
 `;
 
 const StyledTextCopyInput = styled(TextCopyInput)`
@@ -377,14 +373,10 @@ const InputGroup = styled('div')`
   gap: ${space(1)};
 `;
 
-const LabeledInputs = styled('div')`
+const ScheduleGroupInputs = styled('div')<{interval?: boolean}>`
   display: grid;
-  grid-template-columns: 1fr auto;
   align-items: center;
   gap: ${space(1)};
-`;
-
-const ScheduleGroupInputs = styled(LabeledInputs)<{interval?: boolean}>`
   grid-template-columns: ${p => p.interval && 'auto'} 1fr 2fr;
 `;
 

static/app/views/monitors/monitors.tsx

@@ -119,8 +119,8 @@ class Monitors extends AsyncView<Props, State> {
           <Layout.HeaderActions>
             <ButtonBar gap={1}>
               <CronsFeedbackButton />
-              <NewMonitorButton size="sm" icon={<IconAdd isCircled size="xs" />}>
-                {t('Add monitor')}
+              <NewMonitorButton size="sm" icon={<IconAdd size="xs" />}>
+                {t('Add Monitor')}
               </NewMonitorButton>
             </ButtonBar>
           </Layout.HeaderActions>