added spacing for alert details and changed okay to resolved (#25465)

static/app/views/alerts/alertBadge.tsx

@@ -15,7 +15,7 @@ type Props = {
 };
 
 function AlertBadge({status, hideText = false, isIssue}: Props) {
-  let statusText = t('Okay');
+  let statusText = t('Resolved');
   let Icon = IconCheckmark;
   let color: Color = 'green300';
   if (isIssue) {

static/app/views/alerts/rules/details/body.tsx

@@ -158,48 +158,58 @@ export default class DetailsBody extends React.Component<Props> {
 
     return (
       <React.Fragment>
-        <SidebarHeading>{t('Metric')}</SidebarHeading>
-        <RuleText>{this.getMetricText()}</RuleText>
-
-        <SidebarHeading>{t('Environment')}</SidebarHeading>
-        <RuleText>{rule.environment ?? 'All'}</RuleText>
-
-        <SidebarHeading>{t('Filters')}</SidebarHeading>
-        {this.getFilter()}
-
-        <SidebarHeading>{t('Conditions')}</SidebarHeading>
-        {criticalTrigger && this.renderTrigger(criticalTrigger)}
-        {warningTrigger && this.renderTrigger(warningTrigger)}
-
-        <SidebarHeading>{t('Other Details')}</SidebarHeading>
-        <KeyValueTable>
-          <Feature features={['organizations:team-alerts-ownership']}>
-            <KeyValueTableRow
-              keyName={t('Team')}
-              value={
-                teamActor ? (
-                  <ActorAvatar actor={teamActor} size={24} />
-                ) : (
-                  <IconUser size="20px" color="gray400" />
-                )
-              }
-            />
-          </Feature>
-
-          {rule.createdBy && (
-            <KeyValueTableRow
-              keyName={t('Created By')}
-              value={<CreatedBy>{rule.createdBy.name ?? '-'}</CreatedBy>}
-            />
-          )}
-
-          {rule.dateModified && (
-            <KeyValueTableRow
-              keyName={t('Last Modified')}
-              value={<TimeSince date={rule.dateModified} suffix={t('ago')} />}
-            />
-          )}
-        </KeyValueTable>
+        <SidebarGroup>
+          <SidebarHeading>{t('Metric')}</SidebarHeading>
+          <RuleText>{this.getMetricText()}</RuleText>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarHeading>{t('Environment')}</SidebarHeading>
+          <RuleText>{rule.environment ?? 'All'}</RuleText>
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarHeading>{t('Filters')}</SidebarHeading>
+          {this.getFilter()}
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarHeading>{t('Conditions')}</SidebarHeading>
+          {criticalTrigger && this.renderTrigger(criticalTrigger)}
+          {warningTrigger && this.renderTrigger(warningTrigger)}
+        </SidebarGroup>
+
+        <SidebarGroup>
+          <SidebarHeading>{t('Other Details')}</SidebarHeading>
+          <KeyValueTable>
+            <Feature features={['organizations:team-alerts-ownership']}>
+              <KeyValueTableRow
+                keyName={t('Team')}
+                value={
+                  teamActor ? (
+                    <ActorAvatar actor={teamActor} size={24} />
+                  ) : (
+                    <IconUser size="20px" color="gray400" />
+                  )
+                }
+              />
+            </Feature>
+
+            {rule.createdBy && (
+              <KeyValueTableRow
+                keyName={t('Created By')}
+                value={<CreatedBy>{rule.createdBy.name ?? '-'}</CreatedBy>}
+              />
+            )}
+
+            {rule.dateModified && (
+              <KeyValueTableRow
+                keyName={t('Last Modified')}
+                value={<TimeSince date={rule.dateModified} suffix={t('ago')} />}
+              />
+            )}
+          </KeyValueTable>
+        </SidebarGroup>
       </React.Fragment>
     );
   }
@@ -287,7 +297,7 @@ export default class DetailsBody extends React.Component<Props> {
                   )}
                 </StyledAlert>
               </StyledLayoutBody>
-              <Layout.Body>
+              <StyledLayoutBodyWrapper>
                 <Layout.Main>
                   <HeaderContainer>
                     <HeaderGrid>
@@ -378,7 +388,7 @@ export default class DetailsBody extends React.Component<Props> {
                   <Timeline api={api} orgId={orgId} rule={rule} incidents={incidents} />
                   {this.renderRuleDetails()}
                 </Layout.Side>
-              </Layout.Body>
+              </StyledLayoutBodyWrapper>
             </React.Fragment>
           ) : (
             <Placeholder height="200px" />
@@ -389,6 +399,10 @@ export default class DetailsBody extends React.Component<Props> {
   }
 }
 
+const SidebarGroup = styled('div')`
+  margin-bottom: ${space(3)};
+`;
+
 const DetailWrapper = styled('div')`
   display: flex;
   flex: 1;
@@ -419,6 +433,10 @@ const StyledLayoutBody = styled(Layout.Body)`
   }
 `;
 
+const StyledLayoutBodyWrapper = styled(Layout.Body)`
+  margin-bottom: -${space(3)};
+`;
+
 const StyledAlert = styled(Alert)`
   margin: 0;
 `;

tests/js/spec/views/alerts/alertBadge.spec.jsx

@@ -8,7 +8,7 @@ import {IncidentStatus} from 'app/views/alerts/types';
 describe('AlertBadge', function () {
   it('displays status', function () {
     const wrapper = mountWithTheme(<AlertBadge status={IncidentStatus.CLOSED} />);
-    expect(wrapper.text()).toBe('Okay');
+    expect(wrapper.text()).toBe('Resolved');
   });
   it('hides status text', function () {
     const wrapper = mountWithTheme(