Rebrand parent letter to CodeAI and migrate styling to MUI - #72979
Conversation
* en_us.json: rename "Code.org" → "CodeAI" in all parentLetter* keys.
The "code.org/athome" display text stays because it mirrors the real
link target. Other locales will catch up via the normal CrowdIn flow.
* parent_letter.html.haml: swap logoUrl from logo.png to logo-codeai.svg
and drop the custom h1 rule from the inline <style> block — MUI owns
heading styling now. Keep the body max-width rule, which is the print
page constraint.
* ParentLetter.jsx: replace div/article/header/h1/p with MUI Box and
Typography. Wrap ol/li content in Typography where it was bare text;
preserve native ol/li for the sign-in step lists since MUI <List> is
designed for app UIs, not printed letters. Drop the inline styles
object and the color.teal import.
* parent_letter.js: wrap the render in <ThemeProvider theme={CdoTheme}>
so MUI Typography picks up the design system's type scale.
* ParentLetterTest.jsx: wrap renders via a renderWithTheme helper and
assert the rendered letter says "CodeAI" but not "Code.org" (except
the allowed "code.org/athome" URL display).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| "parentsAndStudents": "Parents and Students", | ||
| "parentLetterClever1": "Have your students log in to their Clever account at [www.clever.com]({cleverLink}) (click \"Sign in as a student\" at the top right)", | ||
| "parentLetterClever2": "Click on the Code.org logo on the Clever dashboard. The logo looks like this:", | ||
| "parentLetterClever2": "Click on the CodeAI logo on the Clever dashboard. The logo looks like this:", |
There was a problem hiding this comment.
@carl-codeorg Is the rebrand work for platform integrations going to land at the same time as all of the other on-site work? I want to make sure this sentence still makes sense in the context of the parent letter.
There was a problem hiding this comment.
The rebrand work for integrations is starting now but not landing all at once. For the Clever integration, we have to go through Clever support. The first thing to change will be the logos, so I expect that this will make sense.
| "parentLetterGoogle2": "Sign in via the Google sign-in dialog", | ||
| "parentLetterHello": "Hello!", | ||
| "parentLetterIntro": "In my class, {studentName} is learning computer science on [Code.org]({homeLink}), a fun, creative platform for learning computer science and basic coding to create interactive animations, games, or apps. Your interest in what your child is learning is critical, and Code.org makes it easy to stay involved.", | ||
| "parentLetterIntro": "In my class, {studentName} is learning computer science on [CodeAI]({homeLink}), a fun, creative platform for learning computer science and basic coding to create interactive animations, games, or apps. Your interest in what your child is learning is critical, and CodeAI makes it easy to stay involved.", |
There was a problem hiding this comment.
@bethanyaconnor Should the text here also change to include artificial intelligence in the list of things the platform offers? I'd assume so but know there are marketing "rules" about how we talk about things now.
There was a problem hiding this comment.
Discussed offline - let's change to "learning computer science and AI"!
| </header> | ||
| ); | ||
| }; | ||
| const Header = ({logoUrl = '/shared/images/CodeLogo_White.png'}) => ( |
There was a problem hiding this comment.
@bethanyaconnor or @MollyPeredo do we have a CodeAI logo to use here?
There was a problem hiding this comment.
@Erin007 Yes, I'll send it to you in Slack
| <img | ||
| <Box | ||
| component="img" | ||
| src="/shared/images/clever_code_org_logo.png" |
There was a problem hiding this comment.
@bethanyaconnor and @carl-codeorg we'll need an asset for the Clever CodeAI logo
There was a problem hiding this comment.
For Clever the current plan is to use the normal horizontal CodeAI logo. I don't believe we'll have any separate logos per integration.
|
bethanyaconnor
left a comment
bethanyaconnor
left a comment
There was a problem hiding this comment.
Thanks for picking this up!
4 participants
Trello card
https://trello.com/c/qcfo1JdI
Summary
parentLetter*keys inapps/i18n/common/en_us.json(per user direction: all occurrences, including the LMS "Launch CodeAI" tile label). The one exception is thecode.org/athomeURL-display inparentLetterStep2Details, which mirrors the real link target.logo.pngtologo-codeai.svg.div/article/header/h1/p) with MUI<Box>/<Typography>, dropped the inlinestylesobject and thecolor.tealimport, and added a<ThemeProvider theme={CdoTheme}>wrap in the page entry so Typography picks up the design system type scale.<ol>/<li>for the sign-in step lists — MUI<List>/<ListItem>is designed for app UI rows, not printed letters — and wrapped bare list-item text in<Typography>.h1 { color: #8c52ba; ... }rule from the haml inline<style>block since MUI'sMuiTypography-h1class would override it silently. Kept the bodymax-width: 8.5inrule, which is the print-page constraint.Notes for review
common/*.jsonparentLetter* entries still say "Code.org". Perapps/README.md, sending strings to CrowdIn is a separate engineer-triggered job.Cdo::Brand. This was the user's explicit choice ("all occurrences"); if you want the parent letter to be brand-conditional later, the steady state would be to interpolateCdo::Brand.legal_nameinto the strings and useCdo::Brand.logo_filename(request)in the haml.Test plan
yarn test:unit test/unit/templates/teacherDashboard/ParentLetterTest.jsx— 3 passing (1 new)yarn run typecheck./tools/hooks/pre-commit/teacher_dashboard/sections/<section-id>/parent_letter, hit Print Preview, and compare the rendered/PDF output against a snapshot of the previous letter. Specifically check:#8c52ba.🤖 Generated with Claude Code