Skip to content

Commit 214df90

Browse files
huyenltnguyenahmaxed
huyenltnguyen
and
ahmaxed
authored
refactor(client): change donation alerts to use div instead of Callout (freeCodeCamp#62890)
Co-authored-by: ahmad abdolsaheb <[email protected]>
1 parent fed3479 commit 214df90

File tree

4 files changed

+103
-88
lines changed

4 files changed

+103
-88
lines changed

‎client/src/components/Intro/learn-alert.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.learn-alert {
2+
padding: 20px;
3+
margin-bottom: 40px;
4+
border: 1px solid #31708f;
5+
color: #31708f;
6+
background: linear-gradient(
7+
-10deg,
8+
rgba(217, 237, 247, 1) 35%,
9+
rgba(237, 202, 216, 0) 75%,
10+
rgb(255 215 224) 100%
11+
),
12+
radial-gradient(
13+
circle,
14+
rgba(255, 202, 225, 1) 0%,
15+
rgba(218, 234, 252, 1) 100%
16+
);
17+
}
18+
19+
.learn-alert .btn {
20+
background-color: transparent;
21+
color: #31708f;
22+
border-color: #31708f;
23+
}
24+
.learn-alert .btn:hover,
25+
.learn-alert .btn:focus,
26+
.learn-alert a:hover,
27+
.learn-alert a:focus {
28+
background-color: #31708f;
29+
color: #d9edf7;
30+
border-color: #31708f;
31+
}
32+
33+
.university-alert p,
34+
.learn-alert p {
35+
color: inherit;
36+
}
37+
38+
.learn-alert .progress-wrapper {
39+
display: inline-block;
40+
width: 100%;
41+
margin: 1.2rem 0;
42+
flex-direction: row;
43+
border: 1px solid var(--blue70);
44+
}
45+
46+
.learn-alert h3,
47+
.learn-alert h2 {
48+
color: var(--blue70);
49+
}
50+
51+
.learn-alert .progress-bar-wrap,
52+
.progress-bar-background {
53+
background-color: transparent;
54+
}
55+
56+
.learn-alert hr {
57+
border-top-color: var(--blue10);
58+
}
59+
60+
.learn-alert .btn-container {
61+
display: flex;
62+
justify-content: center;
63+
}
64+
65+
.learn-alert .donate-button,
66+
.university-alert .donate-button {
67+
border-color: #31708f;
68+
}
69+
70+
.university-alert {
71+
background-color: var(--blue05);
72+
background-repeat: repeat;
73+
animation: slideBackground 10s linear infinite;
74+
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="144" height="113" viewBox="0 0 144 113" fill="none"><path d="M83.0205 89.0206L83.0515 78.5206L98.0293 86.0649L114.053 78.1122L114.02 89.1121C114.02 89.1121 107.6 96.0932 97.9998 96.0648C88.3998 96.0365 83.0205 89.0206 83.0205 89.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M76 72L98 59L121 72V81L123.5 87.5H117L120 81V72.5L98 83L76 72Z" fill="%233099F0" fill-opacity="0.1"/><path d="M10.0205 33.0206L10.0515 22.5206L25.0293 30.0649L41.0529 22.1122L41.0204 33.1121C41.0204 33.1121 34.5997 40.0932 24.9998 40.0648C15.3998 40.0365 10.0205 33.0206 10.0205 33.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M3 16L25 3L48 16V25L50.5 31.5H44L47 25V16.5L25 27L3 16Z" fill="%233099F0" fill-opacity="0.1"/></svg>');
75+
}
76+
77+
@keyframes slideBackground {
78+
from {
79+
background-position: 0 0;
80+
}
81+
to {
82+
background-position: 144px 113px;
83+
}
84+
}
85+
86+
.learn-alert .progress-bar-percent {
87+
border-right: 1px solid var(--blue70);
88+
background-color: var(--blue-mid);
89+
background-image: linear-gradient(to right, #31708f, #198eee);
90+
box-shadow: none;
91+
}

‎client/src/components/Intro/learn-alert.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react';
2-
import { Callout, Spacer } from '@freecodecamp/ui';
2+
import { Spacer } from '@freecodecamp/ui';
33
import { useFeature } from '@growthbook/growthbook-react';
44
import { useTranslation } from 'react-i18next';
5+
56
import { Link } from '../helpers';
67
import { ProgressBar } from '../Progress/progress-bar';
8+
import './learn-alert.css';
79

810
interface LearnAlertProps {
911
onLearnDonationAlertClick: () => void;
@@ -19,7 +21,7 @@ const LearnAlert = ({
1921
const progressAlertFlag2024 = useFeature('progress-alert-2024');
2022
const createUniversityFlag = useFeature('university-alert');
2123
const progressAlertDefault = (text: string, value?: number) => (
22-
<Callout variant='info' className='annual-donation-alert'>
24+
<div className='learn-alert annual-donation-alert'>
2325
{value && (
2426
<>
2527
<div className='text-center'>
@@ -36,7 +38,7 @@ const LearnAlert = ({
3638
)}
3739
<p>{text}</p>
3840
<Spacer size='m' />
39-
<div className={'text-center'}>
41+
<p className={'btn-container'}>
4042
<Link
4143
className='btn donate-button'
4244
key='donate'
@@ -46,12 +48,12 @@ const LearnAlert = ({
4648
>
4749
{t('buttons.donate')}
4850
</Link>
49-
</div>
50-
</Callout>
51+
</p>
52+
</div>
5153
);
5254

5355
const seasonalAlertFlagAlert = (
54-
<Callout variant='info' className='annual-donation-alert'>
56+
<div className='learn-alert annual-donation-alert'>
5557
<p>
5658
<b>{t('learn.season-greetings-fcc')}</b>
5759
</p>
@@ -68,7 +70,7 @@ const LearnAlert = ({
6870
{t('buttons.donate')}
6971
</Link>
7072
</p>
71-
</Callout>
73+
</div>
7274
);
7375

7476
const progressAlert2024 = progressAlertDefault(
@@ -77,13 +79,13 @@ const LearnAlert = ({
7779
);
7880

7981
const universityAlert = (
80-
<Callout variant='info' className='university-alert'>
82+
<div className='learn-alert university-alert'>
8183
<p>
8284
<b>{t('learn.building-a-university')}</b>
8385
</p>
8486
<p>{t('learn.if-help-university')}</p>
8587
<Spacer size='m' />
86-
<p className={'text-center'}>
88+
<p className='btn-container text-center'>
8789
<Link
8890
className='btn donate-button'
8991
key='donate'
@@ -94,7 +96,7 @@ const LearnAlert = ({
9496
{t('buttons.donate')}
9597
</Link>
9698
</p>
97-
</Callout>
99+
</div>
98100
);
99101

100102
if (!isDonating) {

‎client/src/components/layouts/global.css‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -600,25 +600,6 @@ pre code {
600600
border-color: #31708f;
601601
}
602602

603-
.annual-donation-alert {
604-
background: linear-gradient(
605-
-10deg,
606-
rgba(217, 237, 247, 1) 35%,
607-
rgba(237, 202, 216, 0) 75%,
608-
rgb(255 215 224) 100%
609-
),
610-
radial-gradient(
611-
circle,
612-
rgba(255, 202, 225, 1) 0%,
613-
rgba(218, 234, 252, 1) 100%
614-
);
615-
}
616-
617-
.university-alert p,
618-
.annual-donation-alert p {
619-
color: inherit;
620-
}
621-
622603
/* gatsby 404 */
623604
#search {
624605
background-color: var(--quaternary-background);

‎client/src/templates/Introduction/intro.css‎

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
font-size: 1.17rem;
33
}
44

5-
.super-block-intro-page .alert p {
6-
font-size: inherit;
7-
}
8-
95
.big-subheading {
106
font-size: 2rem;
117
overflow-wrap: break-word;
@@ -520,61 +516,6 @@ a.map-grid-item.challenge-completed {
520516
margin-inline-end: 0.25em;
521517
}
522518

523-
.annual-donation-alert .progress-wrapper {
524-
display: inline-block;
525-
width: 100%;
526-
margin: 1.2rem 0;
527-
flex-direction: row;
528-
border: 1px solid var(--blue70);
529-
}
530-
531-
.annual-donation-alert h3,
532-
.annual-donation-alert h2 {
533-
color: var(--blue70);
534-
}
535-
536-
.annual-donation-alert .progress-bar-wrap,
537-
.progress-bar-background {
538-
background-color: transparent;
539-
}
540-
541-
.annual-donation-alert hr {
542-
border-top-color: var(--blue10);
543-
}
544-
545-
.annual-donation-alert .btn-container {
546-
display: flex;
547-
justify-content: center;
548-
}
549-
550-
.annual-donation-alert .donate-button,
551-
.university-alert .donate-button {
552-
border-color: #31708f;
553-
}
554-
555-
.university-alert {
556-
background-repeat: repeat;
557-
animation: slideBackground 10s linear infinite;
558-
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="144" height="113" viewBox="0 0 144 113" fill="none"><path d="M83.0205 89.0206L83.0515 78.5206L98.0293 86.0649L114.053 78.1122L114.02 89.1121C114.02 89.1121 107.6 96.0932 97.9998 96.0648C88.3998 96.0365 83.0205 89.0206 83.0205 89.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M76 72L98 59L121 72V81L123.5 87.5H117L120 81V72.5L98 83L76 72Z" fill="%233099F0" fill-opacity="0.1"/><path d="M10.0205 33.0206L10.0515 22.5206L25.0293 30.0649L41.0529 22.1122L41.0204 33.1121C41.0204 33.1121 34.5997 40.0932 24.9998 40.0648C15.3998 40.0365 10.0205 33.0206 10.0205 33.0206Z" fill="%23198EEE" fill-opacity="0.1"/><path d="M3 16L25 3L48 16V25L50.5 31.5H44L47 25V16.5L25 27L3 16Z" fill="%233099F0" fill-opacity="0.1"/></svg>');
559-
}
560-
561-
@keyframes slideBackground {
562-
from {
563-
background-position: 0 0;
564-
}
565-
to {
566-
background-position: 144px 113px;
567-
}
568-
}
569-
/* story starts here */
570-
571-
.annual-donation-alert .progress-bar-percent {
572-
border-right: 1px solid var(--blue70);
573-
background-color: var(--blue-mid);
574-
background-image: linear-gradient(to right, #31708f, #198eee);
575-
box-shadow: none;
576-
}
577-
578519
.tags-wrapper {
579520
display: flex;
580521
width: 100%;

0 commit comments

Comments
 (0)