gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(client): change donation alerts to use div instead of Callout (#62890)

Browse Source 
Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Huyen Nguyen
2025-10-31 07:15:31 -07:00
committed by GitHub
parent fed347908d
commit 214df90d9d
4 changed files with 103 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Intro/learn-alert.css
+91
View File
@@ -0,0 +1,91 @@
.learn-alert {
padding: 20px;
margin-bottom: 40px;
border: 1px solid #31708f;
color: #31708f;
background: linear-gradient(
-10deg,
rgba(217, 237, 247, 1) 35%,
rgba(237, 202, 216, 0) 75%,
rgb(255 215 224) 100%
),
radial-gradient(
circle,
rgba(255, 202, 225, 1) 0%,
rgba(218, 234, 252, 1) 100%
);
}
.learn-alert .btn {
background-color: transparent;
color: #31708f;
border-color: #31708f;
}
.learn-alert .btn:hover,
.learn-alert .btn:focus,
.learn-alert a:hover,
.learn-alert a:focus {
background-color: #31708f;
color: #d9edf7;
border-color: #31708f;
}
.university-alert p,
.learn-alert p {
color: inherit;
}
.learn-alert .progress-wrapper {
display: inline-block;
width: 100%;
margin: 1.2rem 0;
flex-direction: row;
border: 1px solid var(--blue70);
}
.learn-alert h3,
.learn-alert h2 {
color: var(--blue70);
}
.learn-alert .progress-bar-wrap,
.progress-bar-background {
background-color: transparent;
}
.learn-alert hr {
border-top-color: var(--blue10);
}
.learn-alert .btn-container {
display: flex;
justify-content: center;
}
.learn-alert .donate-button,
.university-alert .donate-button {
border-color: #31708f;
}
.university-alert {
background-color: var(--blue05);
background-repeat: repeat;
animation: slideBackground 10s linear infinite;
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>');
}
@keyframes slideBackground {
from {
background-position: 0 0;
}
to {
background-position: 144px 113px;
}
}
.learn-alert .progress-bar-percent {
border-right: 1px solid var(--blue70);
background-color: var(--blue-mid);
background-image: linear-gradient(to right, #31708f, #198eee);
box-shadow: none;
}
client/src/components/Intro/learn-alert.tsx
+12 -10
View File
@@ -1,9 +1,11 @@
import React from 'react';
import { Callout, Spacer } from '@freecodecamp/ui';
import { Spacer } from '@freecodecamp/ui';
import { useFeature } from '@growthbook/growthbook-react';
import { useTranslation } from 'react-i18next';
import { Link } from '../helpers';
import { ProgressBar } from '../Progress/progress-bar';
import './learn-alert.css';
interface LearnAlertProps {
onLearnDonationAlertClick: () => void;
@@ -19,7 +21,7 @@ const LearnAlert = ({
const progressAlertFlag2024 = useFeature('progress-alert-2024');
const createUniversityFlag = useFeature('university-alert');
const progressAlertDefault = (text: string, value?: number) => (
<Callout variant='info' className='annual-donation-alert'>
<div className='learn-alert annual-donation-alert'>
{value && (
<>
<div className='text-center'>
@@ -36,7 +38,7 @@ const LearnAlert = ({
)}
<p>{text}</p>
<Spacer size='m' />
<div className={'text-center'}>
<p className={'btn-container'}>
<Link
className='btn donate-button'
key='donate'
@@ -46,12 +48,12 @@ const LearnAlert = ({
>
{t('buttons.donate')}
</Link>
</div>
</Callout>
</p>
</div>
);
const seasonalAlertFlagAlert = (
<Callout variant='info' className='annual-donation-alert'>
<div className='learn-alert annual-donation-alert'>
<p>
<b>{t('learn.season-greetings-fcc')}</b>
</p>
@@ -68,7 +70,7 @@ const LearnAlert = ({
{t('buttons.donate')}
</Link>
</p>
</Callout>
</div>
);
const progressAlert2024 = progressAlertDefault(
@@ -77,13 +79,13 @@ const LearnAlert = ({
);
const universityAlert = (
<Callout variant='info' className='university-alert'>
<div className='learn-alert university-alert'>
<p>
<b>{t('learn.building-a-university')}</b>
</p>
<p>{t('learn.if-help-university')}</p>
<Spacer size='m' />
<p className={'text-center'}>
<p className='btn-container text-center'>
<Link
className='btn donate-button'
key='donate'
@@ -94,7 +96,7 @@ const LearnAlert = ({
{t('buttons.donate')}
</Link>
</p>
</Callout>
</div>
);
if (!isDonating) {
client/src/components/layouts/global.css
-19
View File
@@ -600,25 +600,6 @@ pre code {
border-color: #31708f;
}
.annual-donation-alert {
background: linear-gradient(
-10deg,
rgba(217, 237, 247, 1) 35%,
rgba(237, 202, 216, 0) 75%,
rgb(255 215 224) 100%
),
radial-gradient(
circle,
rgba(255, 202, 225, 1) 0%,
rgba(218, 234, 252, 1) 100%
);
}
.university-alert p,
.annual-donation-alert p {
color: inherit;
}
/* gatsby 404 */
#search {
background-color: var(--quaternary-background);
client/src/templates/Introduction/intro.css
-59
View File
@@ -2,10 +2,6 @@
font-size: 1.17rem;
}
.super-block-intro-page .alert p {
font-size: inherit;
}
.big-subheading {
font-size: 2rem;
overflow-wrap: break-word;
@@ -520,61 +516,6 @@ a.map-grid-item.challenge-completed {
margin-inline-end: 0.25em;
}
.annual-donation-alert .progress-wrapper {
display: inline-block;
width: 100%;
margin: 1.2rem 0;
flex-direction: row;
border: 1px solid var(--blue70);
}
.annual-donation-alert h3,
.annual-donation-alert h2 {
color: var(--blue70);
}
.annual-donation-alert .progress-bar-wrap,
.progress-bar-background {
background-color: transparent;
}
.annual-donation-alert hr {
border-top-color: var(--blue10);
}
.annual-donation-alert .btn-container {
display: flex;
justify-content: center;
}
.annual-donation-alert .donate-button,
.university-alert .donate-button {
border-color: #31708f;
}
.university-alert {
background-repeat: repeat;
animation: slideBackground 10s linear infinite;
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>');
}
@keyframes slideBackground {
from {
background-position: 0 0;
}
to {
background-position: 144px 113px;
}
}
/* story starts here */
.annual-donation-alert .progress-bar-percent {
border-right: 1px solid var(--blue70);
background-color: var(--blue-mid);
background-image: linear-gradient(to right, #31708f, #198eee);
box-shadow: none;
}
.tags-wrapper {
display: flex;
width: 100%;