ref(project-creation): Polish typography and copy across SCM create flow

static/app/views/onboarding/components/scmFeatureInfoCards.tsx

@@ -1,6 +1,6 @@
 import {Tag} from '@sentry/scraps/badge';
 import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
-import {Heading, Text} from '@sentry/scraps/text';
+import {Text} from '@sentry/scraps/text';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import type {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
@@ -36,17 +36,17 @@ export function ScmFeatureInfoCards({
     <Stack gap="xl" width="100%" justify="center">
       <Stack gap="md">
         {platformName ? (
-          <Heading as="h3" size="xl">
+          <Text bold size="md" density="comfortable">
             {tct('Available with [platformName]', {
               platformName: (
                 <Text as="span" bold variant="accent">
                   {platformName}
                 </Text>
               ),
             })}
-          </Heading>
+          </Text>
         ) : null}
-        <Text size="lg" variant="secondary" density="comfortable">
+        <Text size="md" variant="secondary" density="comfortable">
           {t('In the next step, run our setup wizard to choose what to instrument')}
         </Text>
       </Stack>

static/app/views/onboarding/components/scmFeatureSelectionCards.tsx

@@ -1,5 +1,5 @@
 import {Flex, Stack} from '@sentry/scraps/layout';
-import {Heading, Text} from '@sentry/scraps/text';
+import {Text} from '@sentry/scraps/text';
 
 import type {ProductSolution} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import type {DisabledProducts} from 'sentry/components/onboarding/productSelection';
@@ -30,9 +30,9 @@ export function ScmFeatureSelectionCards({
   return (
     <Stack gap="xl" width="100%" justify="center">
       <Flex justify="between" align="center">
-        <Heading as="h3" size="xl">
+        <Text bold size="md" density="comfortable">
           {t('What do you want to instrument?')}
-        </Heading>
+        </Text>
         {availableFeatures.length > 1 ? (
           <Text size="sm" variant="secondary">
             {t('Choose one or more')}

static/app/views/onboarding/components/scmIntegrationConnect.tsx

@@ -197,7 +197,7 @@ export function ScmIntegrationConnect({
           onChange={handleIntegrationSelect}
         />
       ) : (
-        <Text variant="secondary" bold size="sm" density="compressed" uppercase>
+        <Text bold size="sm" density="compressed" uppercase>
           {t(
             'Connected to %s / %s',
             effectiveIntegration.provider.name,

static/app/views/onboarding/components/scmPlatformFeaturesCore.tsx

@@ -16,7 +16,7 @@ import {
   platformProductAvailability,
 } from 'sentry/components/onboarding/productSelection';
 import {PLATFORM_PRODUCT_INFO} from 'sentry/data/platformProductInfo.generated';
-import {IconBroadcast, IconBusiness, IconGeneric} from 'sentry/icons';
+import {IconBroadcast, IconBusiness} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
 import type {Repository} from 'sentry/types/integrations';
 import type {OnboardingSelectedSDK} from 'sentry/types/onboarding';
@@ -440,8 +440,8 @@ export function ScmPlatformFeaturesCore({
         >
           <Flex justify="between" align="center">
             <Flex align="center" gap="sm">
-              <IconBroadcast size="sm" variant="secondary" />
-              <Text variant="secondary" bold size="sm" density="comfortable" uppercase>
+              <IconBroadcast size="sm" />
+              <Text bold size="md" density="comfortable">
                 {t('Auto-detected from your repository')}
               </Text>
             </Flex>
@@ -491,8 +491,7 @@ export function ScmPlatformFeaturesCore({
         >
           <Flex justify="between" align="center">
             <Flex align="center" gap="sm">
-              <IconGeneric size="sm" variant="secondary" />
-              <Text variant="secondary" bold size="sm" density="comfortable" uppercase>
+              <Text bold size="md" density="comfortable">
                 {t('Select a platform')}
               </Text>
             </Flex>

static/app/views/onboarding/components/scmProjectDetailsCore.spec.tsx

@@ -35,8 +35,8 @@ describe('ScmProjectDetailsCore', () => {
   it('renders the project name, team, and alert-frequency fields', () => {
     renderCore();
 
-    expect(screen.getByText('Give your project a name')).toBeInTheDocument();
-    expect(screen.getByText('Assign a team')).toBeInTheDocument();
+    expect(screen.getByText('Project name')).toBeInTheDocument();
+    expect(screen.getByText('Team')).toBeInTheDocument();
     expect(screen.getByText('Alert frequency')).toBeInTheDocument();
     expect(screen.getByPlaceholderText('project-name')).toHaveValue('my-project');
   });
@@ -54,7 +54,7 @@ describe('ScmProjectDetailsCore', () => {
   it('hides the team selector for a no-access member', () => {
     renderCore({isOrgMemberWithNoAccess: true});
 
-    expect(screen.getByText('Give your project a name')).toBeInTheDocument();
-    expect(screen.queryByText('Assign a team')).not.toBeInTheDocument();
+    expect(screen.getByText('Project name')).toBeInTheDocument();
+    expect(screen.queryByText('Team')).not.toBeInTheDocument();
   });
 });

static/app/views/onboarding/components/scmProjectDetailsCore.tsx

@@ -1,11 +1,10 @@
 import {useEffect} from 'react';
 
 import {Input} from '@sentry/scraps/input';
-import {Container, Flex, Stack} from '@sentry/scraps/layout';
+import {Container, Grid, Stack} from '@sentry/scraps/layout';
 import {Text} from '@sentry/scraps/text';
 
 import {TeamSelector} from 'sentry/components/teamSelector';
-import {IconGroup, IconProject, IconSiren} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import type {Team} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
@@ -66,61 +65,71 @@ export function ScmProjectDetailsCore({
 
   return (
     <Stack gap="3xl" width="100%" maxWidth={contentMaxWidth}>
-      <Stack gap="md">
-        <Flex gap="md" align="center">
-          <IconProject size="md" variant="secondary" />
-          <Container>
-            <Text bold size="lg" density="comfortable">
-              {t('Give your project a name')}
-            </Text>
-          </Container>
-        </Flex>
-        <Input
-          type="text"
-          placeholder={t('project-name')}
-          value={projectName}
-          onChange={e => onProjectNameChange(e.target.value)}
-          onBlur={onProjectNameBlur}
-        />
-      </Stack>
-
-      {!isOrgMemberWithNoAccess && (
+      <Grid width="100%" columns={{sm: '1fr', md: '1fr 1fr'}} gap="2xl">
         <Stack gap="md">
-          <Flex gap="md" align="center">
-            <IconGroup size="md" />
+          <Stack gap="xs">
             <Container>
-              <Text bold size="lg" density="comfortable">
-                {t('Assign a team')}
+              <Text bold size="md" density="comfortable">
+                {t('Project name')}
               </Text>
             </Container>
-          </Flex>
-          <TeamSelector
-            allowCreate
-            name="team"
-            aria-label={t('Select a Team')}
-            clearable={false}
-            placeholder={t('Select a Team')}
-            teamFilter={(tm: Team) => tm.access.includes('team:admin')}
-            value={teamSlug}
-            onChange={onTeamChange}
+            <Container>
+              <Text variant="muted" density="comfortable">
+                {t('Slug used in URLs and SDK config')}
+              </Text>
+            </Container>
+          </Stack>
+          <Input
+            type="text"
+            placeholder={t('project-name')}
+            value={projectName}
+            onChange={e => onProjectNameChange(e.target.value)}
+            onBlur={onProjectNameBlur}
           />
         </Stack>
-      )}
+
+        {!isOrgMemberWithNoAccess && (
+          <Stack gap="md">
+            <Stack gap="xs">
+              <Container>
+                <Text bold size="md" density="comfortable">
+                  {t('Team')}
+                </Text>
+              </Container>
+              <Container>
+                <Text variant="muted" density="comfortable">
+                  {t('Set who owns alerts for this project')}
+                </Text>
+              </Container>
+            </Stack>
+            <TeamSelector
+              allowCreate
+              name="team"
+              aria-label={t('Select a Team')}
+              clearable={false}
+              placeholder={t('Select a Team')}
+              teamFilter={(tm: Team) => tm.access.includes('team:admin')}
+              value={teamSlug}
+              onChange={onTeamChange}
+            />
+          </Stack>
+        )}
+      </Grid>
 
       <Stack gap="md">
-        <Flex gap="md" align="center">
-          <IconSiren size="md" />
+        <Stack gap="xs">
           <Container>
-            <Text bold size="lg" density="comfortable">
+            <Text bold size="md" density="comfortable">
               {t('Alert frequency')}
             </Text>
           </Container>
-        </Flex>
-        <Container>
-          <Text variant="muted" size="lg" density="comfortable">
-            {t('Get notified when things go wrong')}
-          </Text>
-        </Container>
+          <Container>
+            <Text variant="muted" density="comfortable">
+              {t('Get notified when things go wrong')}
+            </Text>
+          </Container>
+        </Stack>
+
         <ScmAlertFrequency {...alertRuleConfig} onFieldChange={onAlertChange} />
       </Stack>
     </Stack>

static/app/views/onboarding/scmPlatformFeatures.spec.tsx

@@ -138,9 +138,7 @@ describe('ScmPlatformFeatures', () => {
     const props = defaultProps({selectedRepository: mockRepository});
     render(<ScmPlatformFeatures {...props} />, {organization});
 
-    expect(
-      await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'})
-    ).toBeInTheDocument();
+    expect(await screen.findByText(/^Available with/)).toBeInTheDocument();
     expect(props.onPlatformChange).toHaveBeenCalledWith(
       expect.objectContaining({key: 'javascript-nextjs'})
     );
@@ -158,9 +156,7 @@ describe('ScmPlatformFeatures', () => {
         {organization}
       );
 
-      expect(
-        await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'})
-      ).toBeInTheDocument();
+      expect(await screen.findByText(/^Available with/)).toBeInTheDocument();
       expect(screen.getByText('Error monitoring')).toBeInTheDocument();
       expect(screen.getByText('Tracing')).toBeInTheDocument();
       expect(screen.getByText('Session replay')).toBeInTheDocument();
@@ -187,9 +183,7 @@ describe('ScmPlatformFeatures', () => {
         await screen.findByText('What do you want to instrument?')
       ).toBeInTheDocument();
       expect(screen.getByRole('checkbox', {name: /Tracing/})).toBeInTheDocument();
-      expect(
-        screen.queryByRole('heading', {level: 3, name: /^Available with /})
-      ).not.toBeInTheDocument();
+      expect(screen.queryByText(/^Available with/)).not.toBeInTheDocument();
     });
 
     it('skips the feature-cards block for platforms in neither map', async () => {
@@ -217,9 +211,7 @@ describe('ScmPlatformFeatures', () => {
 
       await screen.findByRole('button', {name: 'Continue'});
 
-      expect(
-        screen.queryByRole('heading', {level: 3, name: /^Available with /})
-      ).not.toBeInTheDocument();
+      expect(screen.queryByText(/^Available with/)).not.toBeInTheDocument();
       expect(
         screen.queryByText('What do you want to instrument?')
       ).not.toBeInTheDocument();
@@ -513,7 +505,7 @@ describe('ScmPlatformFeatures', () => {
         {organization}
       );
 
-      await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'});
+      await screen.findByText(/^Available with/);
 
       const detectedCalls = trackAnalyticsSpy.mock.calls.filter(
         ([event, params]) =>
@@ -549,7 +541,7 @@ describe('ScmPlatformFeatures', () => {
       );
 
       // First repo auto-detects Next.js and fires the detected event once.
-      await screen.findByRole('heading', {level: 3, name: 'Available with Next.js'});
+      await screen.findByText(/^Available with/);
       expect(
         trackAnalyticsSpy.mock.calls.filter(
           ([event, params]) =>

static/app/views/onboarding/scmProjectDetails.spec.tsx

@@ -89,13 +89,13 @@ describe('ScmProjectDetails', () => {
     expect(await screen.findByText('Project details')).toBeInTheDocument();
   });
 
-  it('renders section headers with icons', async () => {
+  it('renders section headers', async () => {
     render(<ScmProjectDetails {...defaultProps({selectedPlatform: mockPlatform})} />, {
       organization,
     });
 
-    expect(await screen.findByText('Give your project a name')).toBeInTheDocument();
-    expect(screen.getByText('Assign a team')).toBeInTheDocument();
+    expect(await screen.findByText('Project name')).toBeInTheDocument();
+    expect(screen.getByText('Team')).toBeInTheDocument();
     expect(screen.getByText('Alert frequency')).toBeInTheDocument();
     expect(screen.getByText('Get notified when things go wrong')).toBeInTheDocument();
   });