Skip to content

Commit cf3063e

Browse files
OpenStaxClaudeclaude
OpenStaxClaude
and
claude
committed
Phase 4.2: Start study guides CSS migration (Part 1)
Migrate initial study guides components from styled-components to plain CSS: ✅ StudyGuidesListElement - Created StudyGuidesListElement.css with responsive and print styles - Bind dynamic highlight border color as CSS variable - Convert mobile breakpoints to standard media queries - Preserve accessibility with hidden-but-accessible class ✅ StudyGuidesCTA - Created StudyGuidesCTA.css for all CTA banner components - Migrate 8 styled components (wrapper, buttons, info, arrows) - Bind theme colors (deep green, text colors) as CSS variables - Preserve print styles (CTA hidden in print) - Deleted styles.tsx file Migration follows the hybrid approach from PLAIN_CSS_MIGRATION_GUIDE.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 parent 9f44f29 commit cf3063e

5 files changed

Lines changed: 384 additions & 279 deletions

File tree

‎src/app/content/studyGuides/components/StudyGuidesCTA/StudyGuidesCTA.css‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
.study-guides-cta-wrapper {
2+
display: flex;
3+
height: 20rem;
4+
padding: 0 8rem;
5+
justify-content: space-between;
6+
align-items: center;
7+
color: var(--text-color-default);
8+
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.4);
9+
overflow: hidden;
10+
}
11+
12+
.study-guides-cta-wrapper strong {
13+
white-space: nowrap;
14+
color: var(--deep-green-color);
15+
}
16+
17+
/* max-width: 75em (1200px) */
18+
@media screen and (max-width: 75em) {
19+
.study-guides-cta-wrapper {
20+
height: 17.6rem;
21+
padding: 0 1.6rem;
22+
justify-content: center;
23+
}
24+
}
25+
26+
@media print {
27+
.study-guides-cta-wrapper {
28+
display: none !important;
29+
}
30+
}
31+
32+
.study-guides-cta-inner-wrapper {
33+
display: contents;
34+
}
35+
36+
/* max-width: 75em (1200px) */
37+
@media screen and (max-width: 75em) {
38+
.study-guides-cta-inner-wrapper {
39+
display: flex;
40+
max-width: 34rem;
41+
height: 100%;
42+
overflow: visible;
43+
}
44+
}
45+
46+
.study-guides-cta-content {
47+
display: flex;
48+
flex-direction: column;
49+
flex: 1;
50+
}
51+
52+
.study-guides-cta-title {
53+
overflow: hidden;
54+
font-size: 2.4rem;
55+
margin: 0 0 1rem 0;
56+
}
57+
58+
/* max-width: 75em (1200px) */
59+
@media screen and (max-width: 75em) {
60+
.study-guides-cta-title {
61+
font-size: 1.8rem;
62+
line-height: 2.6rem;
63+
margin-top: 1rem;
64+
}
65+
}
66+
67+
.study-guides-cta-buttons {
68+
overflow: hidden;
69+
display: flex;
70+
align-items: center;
71+
flex-wrap: wrap;
72+
}
73+
74+
.study-guides-cta-button {
75+
width: 24rem;
76+
height: 4.8rem;
77+
padding: 0;
78+
display: flex;
79+
justify-content: center;
80+
align-items: center;
81+
font-size: 1.8rem;
82+
font-weight: 600;
83+
color: var(--button-text-color);
84+
background-color: var(--button-bg-color);
85+
border: none;
86+
margin-right: 1.6rem;
87+
}
88+
89+
.study-guides-cta-button:hover {
90+
background-color: var(--button-bg-color);
91+
}
92+
93+
/* max-width: 75em (1200px) */
94+
@media screen and (max-width: 75em) {
95+
.study-guides-cta-button {
96+
font-size: 1.4rem;
97+
width: 11rem;
98+
height: 3rem;
99+
}
100+
}
101+
102+
.study-guides-cta-buttons-secondary {
103+
padding: 1.4rem 0;
104+
}
105+
106+
.study-guides-cta-separator {
107+
font-size: 1.6rem;
108+
text-transform: uppercase;
109+
margin-right: 1.6rem;
110+
}
111+
112+
/* max-width: 75em (1200px) */
113+
@media screen and (max-width: 75em) {
114+
.study-guides-cta-separator {
115+
font-size: 1.4rem;
116+
margin-right: 1.2rem;
117+
}
118+
}
119+
120+
.study-guides-cta-link {
121+
font-size: 1.6rem;
122+
color: #027EB5;
123+
}
124+
125+
/* max-width: 75em (1200px) */
126+
@media screen and (max-width: 75em) {
127+
.study-guides-cta-link {
128+
font-size: 1.4rem;
129+
}
130+
}
131+
132+
.study-guides-cta-info-wrapper {
133+
flex: 1;
134+
display: flex;
135+
justify-content: center;
136+
height: 100%;
137+
text-align: center;
138+
overflow: visible;
139+
position: relative;
140+
}
141+
142+
/* max-width: 75em (1200px) */
143+
@media screen and (max-width: 75em) {
144+
.study-guides-cta-info-wrapper {
145+
justify-content: flex-start;
146+
}
147+
}
148+
149+
.study-guides-cta-info {
150+
font-size: 1.8rem;
151+
line-height: 2.5rem;
152+
width: 24rem;
153+
margin-top: 2.5rem;
154+
z-index: 1;
155+
}
156+
157+
.study-guides-cta-info strong {
158+
display: block;
159+
}
160+
161+
/* max-width: 75em (1200px) */
162+
@media screen and (max-width: 75em) {
163+
.study-guides-cta-info {
164+
width: 10rem;
165+
font-size: 1.2rem;
166+
line-height: 1.7rem;
167+
margin-left: 2rem;
168+
}
169+
}
170+
171+
.study-guides-cta-arrow-desktop {
172+
position: absolute;
173+
}
174+
175+
/* max-width: 75em (1200px) */
176+
@media screen and (max-width: 75em) {
177+
.study-guides-cta-arrow-desktop {
178+
display: none;
179+
}
180+
}
181+
182+
.study-guides-cta-arrow-mobile {
183+
position: absolute;
184+
left: -4rem;
185+
display: none;
186+
}
187+
188+
/* max-width: 75em (1200px) */
189+
@media screen and (max-width: 75em) {
190+
.study-guides-cta-arrow-mobile {
191+
display: block;
192+
}
193+
}

‎src/app/content/studyGuides/components/StudyGuidesCTA/index.tsx‎

Lines changed: 63 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,19 @@ import {
77
signupLink as signupLinkSelector,
88
} from '../../../../auth/selectors';
99
import htmlMessage from '../../../../components/htmlMessage';
10+
import Button from '../../../../components/Button';
11+
import theme from '../../../../theme';
1012
import arrowDesktop from './assets/arrow-desktop.svg';
1113
import arrowMobile from './assets/arrow-mobile.svg';
12-
import * as Styled from './styles';
14+
import './StudyGuidesCTA.css';
1315

14-
const StudyGuidesCTATitle = htmlMessage('i18n:studyguides:cta:title', Styled.StudyGuidesCTATitle);
16+
const StudyGuidesCTATitle = htmlMessage('i18n:studyguides:cta:title', (props) => (
17+
<h2 className="study-guides-cta-title" {...props} />
18+
));
1519

16-
const StudyGuidesCTAInfo = htmlMessage('i18n:studyguides:cta:info', Styled.StudyGuidesCTAInfo);
20+
const StudyGuidesCTAInfo = htmlMessage('i18n:studyguides:cta:info', (props) => (
21+
<div className="study-guides-cta-info" {...props} />
22+
));
1723

1824
const StudyGuidesCTA = () => {
1925
const isNotLoggedIn = useSelector(loggedOut);
@@ -22,39 +28,61 @@ const StudyGuidesCTA = () => {
2228

2329
if (!isNotLoggedIn) { return null; }
2430

25-
return <Styled.StudyGuidesCTAWrapper>
26-
<Styled.StudyGuidesCTAInnerWrapper>
27-
<Styled.StudyGuidesCTAContent>
28-
<StudyGuidesCTATitle />
29-
<Styled.StudyGuidesCTAButtons>
30-
<FormattedMessage id='i18n:studyguides:cta:button'>
31-
{(msg) => <Styled.StudyGuidesCTAButton
32-
// eslint-disable-next-line jsx-a11y/anchor-has-content
33-
component={<a href={signupLink} data-analytics-label='signup' />}
34-
>{msg}</Styled.StudyGuidesCTAButton>}
35-
</FormattedMessage>
36-
<Styled.StudyGuidesCTAButtonsSecondary>
37-
<Styled.StudyGuidesCTASeparator>
38-
<FormattedMessage id='i18n:studyguides:cta:separator'>
39-
{(msg) => msg}
40-
</FormattedMessage>
41-
</Styled.StudyGuidesCTASeparator>
42-
<FormattedMessage id='i18n:studyguides:cta:login'>
43-
{(msg) => <Styled.StudyGuidesCTALink
44-
data-analytics-label='login'
45-
href={loginLink}
46-
>{msg}</Styled.StudyGuidesCTALink>}
31+
return (
32+
<div
33+
className="study-guides-cta-wrapper"
34+
style={{
35+
'--text-color-default': theme.color.text.default,
36+
'--deep-green-color': theme.color.secondary.deepGreen.base,
37+
} as React.CSSProperties}
38+
>
39+
<div className="study-guides-cta-inner-wrapper">
40+
<div className="study-guides-cta-content">
41+
<StudyGuidesCTATitle />
42+
<div className="study-guides-cta-buttons">
43+
<FormattedMessage id='i18n:studyguides:cta:button'>
44+
{(msg) => (
45+
<Button
46+
className="study-guides-cta-button"
47+
// eslint-disable-next-line jsx-a11y/anchor-has-content
48+
component={<a href={signupLink} data-analytics-label='signup' />}
49+
style={{
50+
'--button-text-color': theme.color.text.white,
51+
'--button-bg-color': theme.color.secondary.deepGreen.base,
52+
} as React.CSSProperties}
53+
>
54+
{msg}
55+
</Button>
56+
)}
4757
</FormattedMessage>
48-
</Styled.StudyGuidesCTAButtonsSecondary>
49-
</Styled.StudyGuidesCTAButtons>
50-
</Styled.StudyGuidesCTAContent>
51-
<Styled.StudyGuidesCTAInfoWrapper>
52-
<StudyGuidesCTAInfo />
53-
<Styled.StudyGuidesCTAArrowDesktop src={arrowDesktop} alt='' />
54-
<Styled.StudyGuidesCTAArrowMobile src={arrowMobile} alt='' />
55-
</Styled.StudyGuidesCTAInfoWrapper>
56-
</Styled.StudyGuidesCTAInnerWrapper>
57-
</Styled.StudyGuidesCTAWrapper>;
58+
<div className="study-guides-cta-buttons-secondary">
59+
<span className="study-guides-cta-separator">
60+
<FormattedMessage id='i18n:studyguides:cta:separator'>
61+
{(msg) => msg}
62+
</FormattedMessage>
63+
</span>
64+
<FormattedMessage id='i18n:studyguides:cta:login'>
65+
{(msg) => (
66+
<a
67+
className="study-guides-cta-link"
68+
data-analytics-label='login'
69+
href={loginLink}
70+
>
71+
{msg}
72+
</a>
73+
)}
74+
</FormattedMessage>
75+
</div>
76+
</div>
77+
</div>
78+
<div className="study-guides-cta-info-wrapper">
79+
<StudyGuidesCTAInfo />
80+
<img src={arrowDesktop} alt='' className="study-guides-cta-arrow-desktop" />
81+
<img src={arrowMobile} alt='' className="study-guides-cta-arrow-mobile" />
82+
</div>
83+
</div>
84+
</div>
85+
);
5886
};
5987

6088
export default StudyGuidesCTA;

0 commit comments

Comments
 (0)