Use design palette highlight color (#f8eedf) for all page headers

[Copilot]

Headers across multiple pages were rendering in faint grey — either from undefined utility classes (text-heading, text-body) falling back to Toastify's --toastify-text-color-light: #757575, from text-foreground-200 (#b3adaa), or from having no color class at all.

Changes

• Home.tsx — h2 "Instructing" / "Attending": no color → text-highlight-500
• exercise_id.tsx — h2/h3/h4 using undefined text-heading → text-highlight-500; <p> using undefined text-body → text-white
• ImportExercisesPanel.tsx — h3 text-foreground-200 → text-highlight-500
• TeacherView.tsx — h1/h2 text-foreground-200 → text-highlight-500
• Read.tsx — h3 "No Exercises": no color → text-highlight-500

highlight-500 is already defined in tailwind.config.js as #f8eedf:

highlight: {
  500: '#f8eedf',  // Khaki Yellow — design palette highlight
}

[kbuffardi]

@aaditi2 can you check the colors used on all the pages throughout the website to make sure that on more than OS and on {Chrome, Firefox, Edge, Brave} browsers that the text adheres to the colors specified in design color palettes and shows contrast with the background. This is documented in issue #159

[aaditi2]

@kbuffardi yes I'll check it

[aaditi2]

@kbuffardi Yes it seems like the issue is still persistent. I can still see gray color headings instead of #f8eedf for the headings on Chrome, Firefox and Edge. I checked Chrome through my mac and other 2 through Windows and it gave the same issue.

[kbuffardi]

@kbuffardi Yes it seems like the issue is still persistent. I can still see gray color headings instead of #f8eedf for the headings on Chrome, Firefox and Edge. I checked Chrome through my mac and other 2 through Windows and it gave the same issue.

Thanks. Can you go through all the unique pages and create a list of the pages that had any gray headings/text?

[aaditi2]

Hi @kbuffardi, I’ve verified the theme changes. Most are looking great, though I've found a slight discrepancy in the text color for the exercise view.

Correct intended views:

1. Home.tsx: "Instructing" / "Attending" headers are now correctly using text-highlight-500 and #F8EEDF color.
2. ImportExercisesPanel.tsx: "Student progress" successfully updated to text-highlight-500.
3. TeacherView.tsx: Main headers are rendering correctly in text-highlight-500 and #F8EEDF.

Issue:

1. exercise_id.tsx: Headers are correctly showing text-highlight-500, but the p tags (body text) are rendering in #F8EEDF instead of the intended white.

[NickK21]

@DAC098 requesting changes on the shared heading helper, since the current implementation introduces jsx-a11y/heading-has-content warnings by relying on {...props} for children. Rendering children explicitly in the wrapper should preserve the behavior and avoid the added lint noise.

The "typeography" to "typography" filename spelling and the TeacherView heading change are smaller follow-up items.