Fix global font weights

[annarhughes]

Our style guide and designs use font weight 400 by default, with 500 being used sparingly.

Our theme was using too heavy a weight for some headings and components, these have now been reduced.

The Open_Sans used to import 600 weight and this is now replaced with 500 so it will fall back to 500 even if 600 was used. 500 was previously missing.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bloom-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2025 10:01am

[Copilot]

Pull Request Overview

This PR aligns font weights with the style guide by defaulting to 400/500 and reduces overly heavy headings, while also tweaking theme spacing and adding a subtle shadow.

• Updated theme typography margins, container paddings at various breakpoints, and added a box shadow to Paper.
• Changed Open_Sans import to include weight 500 instead of 600.
• Replaced multiple fontWeight: 600 usages with a 500 value (though casing typos were introduced).

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
styles/theme.ts	Adjusted heading margins, container breakpoints, and added boxShadow
components/session/SessionCompleteButton.tsx	Updated font weight (typo introduced)
components/resources/ResourceCompleteButton.tsx	Updated font weight (typo introduced)
components/layout/SecondaryNavigationDrawerLinks.tsx	Updated font weight (typo introduced)
components/layout/SecondaryNav.tsx	Updated font weight (typo introduced)
components/layout/PrimaryNavigationDrawerLinks.tsx	Updated font weight (typo introduced)
components/layout/BaseLayout.tsx	Changed Open_Sans weights list
components/cards/ShortsCard.tsx	Removed duplicate import; updated font weight (typo introduced)
components/cards/RelatedContentCard.tsx	Updated font weight (typo introduced)

Comments suppressed due to low confidence (9)

styles/theme.ts:327

• Remove the trailing semicolon inside the boxShadow string; it should be "0px 1px 3px 0px rgba(0, 0, 0, 0.12)" to match JSS syntax.

          boxShadow: '0px 1px 3px 0px rgba(0, 0, 0, 0.12);',

styles/theme.ts:126

• Use the ampersand selector &:first-of-type instead of :first-of-type so that the pseudo-selector applies correctly in JSS.

            ':first-of-type': {

components/session/SessionCompleteButton.tsx:21

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

  fontweight: 500,

components/resources/ResourceCompleteButton.tsx:24

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

  fontweight: 500,

components/layout/SecondaryNavigationDrawerLinks.tsx:46

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

    fontweight: 600,

components/layout/SecondaryNav.tsx:51

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

  fontweight: 500,

components/layout/PrimaryNavigationDrawerLinks.tsx:37

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

    fontweight: 500,

components/cards/ShortsCard.tsx:49

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

  fontweight: 500,

components/cards/RelatedContentCard.tsx:22

• Property name is case-sensitive; use fontWeight instead of fontweight so the style is applied.

  fontweight: 500,