fix(relay-settings): Fix styling issue (#57809)

Fix text flow of items.
Use CodeSnippet for terminal display (fixes dark mode colors & adds copy
button).

- Closes https://github.com/getsentry/sentry/issues/54816

static/app/views/settings/organizationRelay/modals/add/index.tsx

@@ -30,24 +30,32 @@ class Add extends ModalManager {
     return (
       <StyledList symbol="colored-numeric">
         <Item
-          title={tct('Initialize the configuration. [link: Learn how]', {
-            link: (
-              <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#initializing-configuration" />
-            ),
-          })}
+          title={
+            <div>
+              {tct('Initialize the configuration. [link: Learn how]', {
+                link: (
+                  <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#initializing-configuration" />
+                ),
+              })}
+            </div>
+          }
           subtitle={t('Within your terminal:')}
         >
           <Terminal command="relay config init" />
         </Item>
         <Item
-          title={tct(
-            'Go to the file [jsonFile: credentials.json] to find the public key and enter it below.',
-            {
-              jsonFile: (
-                <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#registering-relay-with-sentry" />
-              ),
-            }
-          )}
+          title={
+            <div>
+              {tct(
+                'Go to the file [jsonFile: credentials.json] to find the public key and enter it below.',
+                {
+                  jsonFile: (
+                    <ExternalLink href="https://docs.sentry.io/product/relay/getting-started/#registering-relay-with-sentry" />
+                  ),
+                }
+              )}
+            </div>
+          }
         >
           {super.getForm()}
         </Item>

static/app/views/settings/organizationRelay/modals/add/item.tsx

@@ -17,6 +17,7 @@ const Item = styled(({title, subtitle, children, className}: Props) => (
     <div>{children}</div>
   </ListItem>
 ))`
+  padding-top: ${space(0.25)};
   display: grid;
   gap: ${space(1.5)};
 `;

static/app/views/settings/organizationRelay/modals/add/terminal.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import {CodeSnippet} from 'sentry/components/codeSnippet';
 import {space} from 'sentry/styles/space';
 
 type Props = {
@@ -7,27 +8,18 @@ type Props = {
 };
 
 function Terminal({command}: Props) {
-  return (
-    <Wrapper>
-      <Prompt>{'\u0024'}</Prompt>
-      {command}
-    </Wrapper>
-  );
+  return <StyledCodeSnippet language="bash">{command}</StyledCodeSnippet>;
 }
 
 export default Terminal;
 
-const Wrapper = styled('div')`
-  background: ${p => p.theme.gray500};
-  padding: ${space(1.5)} ${space(3)};
-  font-family: ${p => p.theme.text.familyMono};
-  color: ${p => p.theme.white};
-  border-radius: ${p => p.theme.borderRadius};
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: ${space(0.75)};
-`;
-
-const Prompt = styled('div')`
-  color: ${p => p.theme.gray300};
+const StyledCodeSnippet = styled(CodeSnippet)`
+  padding-left: ${space(2)};
+  &:before {
+    content: '\u0024';
+    position: absolute;
+    padding-top: ${space(1)};
+    color: var(--prism-comment);
+    font-size: ${p => p.theme.codeFontSize};
+  }
 `;