[Typography] [Migration] Update legacy type styles in the admin

[sarahill]

Google doc with details

[sarahill]

Update these section headings to use headinSm instead of headingXs

Order details

Draft order details

[sarahill]

Update these section headings to use headinSm instead of headingXs

Customer details

[sarahill]

Update these section headings to use headinSm instead of headingXs

Product details

[sarahill]

Pick a plan

[sarahill]

Settings > Users and permissions > Transfer ownership

[sarahill]

Settings > Shipping and delivery

Card section headings "General shipping rates" "Custom shipping rates" "Manage delivery by location" "Manage pickup by location"

[sarahill]

Settings > Markets > Domains and languages

Table headers using legacy subheading styles

Section headings: Primary domain, domain or sudomain, subfolders

[sarahill]

Settings > Apps and sales channels

Card section headings

[laurkim]

Update these section headings to use headinSm instead of headingXs

Order details

Draft order details

@sarahill I'm going to go these comment by comment and respond with screenshots of the fixes. Going to exclude the images you provided to minimize confusion of screenshots.

Order details customer card update:

Draft order details customer card update:

[laurkim]

Update these section headings to use headinSm instead of headingXs

Customer details

Customer detail page customer card

[laurkim]

Update these section headings to use headinSm instead of headingXs

Product details

Product details page product status card

[laurkim]

Settings > Shipping and delivery

Card section headings "General shipping rates" "Custom shipping rates" "Manage delivery by location" "Manage pickup by location"

Settings page shipping card

Settings page local delivery card

Settings page local pickup card

[laurkim]

Settings > Users and permissions > Transfer ownership

The translation file has the NEW STORE OWNER copy as capitalized so I've left it as so, just changed the variant.

[sarahill]

@laurkim All the above look good. I was going through all the pages and checking one more time and noticed one more odd thing.

The numbers on the customer details page are really small for some reason. See gif for comparison. It actually looks like it's using the right variant too 🤔

[sarahill]

@laurkim One more and this should be it. I went over pages a few times.

The section heading on the skeleton loading state for the customer details page. Hard to inspect it but it looks like it's using the headingXs instead of headingSm. Other pages with this loading state look correct.

[laurkim]

Settings > Markets > Domains and languages

Table headers using legacy subheading styles

Section headings: Primary domain, domain or sudomain, subfolders

@sarahill re: table headers, those aren't using any typography components, just plain old <th> elements. We should probably flag that to the team that owns it.

Settings -> Markets -> Domains and languages

[laurkim]

Settings > Apps and sales channels

Card section headings

Settings -> Apps -> Privacy details card

Settings -> Apps -> Permission details card

[sarahill]

Order details

Link Additional details on notes

[sarahill]

Settings > Users and permissions > Add staff

Headings about checkbox lists:

• General
• Admission
• Online store
• Finance
• Apps and channels

[laurkim]

Pick a plan

Settings -> Plan -> Pick a plan

[laurkim]

@laurkim All the above look good. I was going through all the pages and checking one more time and noticed one more odd thing.

The numbers on the customer details page are really small for some reason. See gif for comparison. It actually looks like it's using the right variant too 🤔

@sarahill I think it's because of the way the Text components were nested, so the inner Text component that was bodyMd that was originally migrated from TextStyle was overriding the <Text variant="headingXl" as="h3"> styling. Just fixed 👍

[laurkim]

@laurkim One more and this should be it. I went over pages a few times.

The section heading on the skeleton loading state for the customer details page. Hard to inspect it but it looks like it's using the headingXs instead of headingSm. Other pages with this loading state look correct.

Customer detail skeleton card

[laurkim]

Order details

I wasn't able to take a screenshot of this section, but I've updated this to be headingSm

[laurkim]

Settings > Users and permissions > Add staff

Headings about checkbox lists:

• General
• Admission
• Online store
• Finance
• Apps and channels

User permissions:

Apps and channels:

[sarahill]

Everything looks good! @laurkim thank you 👏