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: clean extra wrapper around challenge header (#51275)

Browse Source
This commit is contained in:
Muhammed Mustafa
2023-08-22 16:07:47 +03:00
committed by GitHub
parent cf3c3b50a3
commit 9f199ca8af
3 changed files with 60 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/templates/Challenges/components/__snapshots__/challenge-title.test.tsx.snap
+44 -48
View File
@@ -7,56 +7,52 @@ exports[`<ChallengeTitle/> renders correctly 1`] = `
<div
className="challenge-title"
>
<div
className="title-text"
<h1>
title text
</h1>
<svg
aria-label="icons.passed"
height="15"
viewBox="0 0 200 200"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<h1>
title text
</h1>
<svg
aria-label="icons.passed"
height="15"
viewBox="0 0 200 200"
width="15"
xmlns="http://www.w3.org/2000/svg"
<g
aria-hidden="true"
>
<g
aria-hidden="true"
>
<title>
icons.passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
strokeDasharray="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
</div>
<title>
icons.passed
</title>
<circle
cx="100"
cy="99"
fill="var(--primary-color)"
r="95"
stroke="var(--primary-color)"
strokeDasharray="null"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
transform="rotate(-45, 120, 106.321)"
width="128.85878"
x="55.57059"
y="91.32089"
/>
<rect
fill="var(--primary-background)"
height="30"
stroke="var(--primary-background)"
strokeDasharray="null"
transform="rotate(45, 66.75, 123.75)"
width="80.66548"
x="26.41726"
y="108.75"
/>
</g>
</svg>
</div>
</div>
`;
client/src/templates/Challenges/components/challenge-title.css
+14 -21
View File
@@ -3,12 +3,21 @@
}
.challenge-title {
display: flex;
flex-direction: row;
justify-content: space-around;
font-size: 16px;
height: fit-content;
min-width: 25px;
margin: 20px 0px 15px;
padding: 0px 3px;
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
max-height: fit-content;
white-space: pre-line;
flex-grow: 1;
flex-shrink: 1;
font-size: 16px;
}
.challenge-title-breadcrumbs {
@@ -81,23 +90,7 @@
margin: 5px -10px;
}
.title-text {
text-decoration: none;
min-width: 25px;
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
max-height: fit-content;
white-space: pre-line;
flex-grow: 1;
flex-shrink: 1;
padding: 0px 3px;
}
.title-text h1 {
.challenge-title h1 {
font-size: inherit;
line-height: 1.42857143;
margin: 0;
client/src/templates/Challenges/components/challenge-title.tsx
+2 -4
View File
@@ -29,10 +29,8 @@ function ChallengeTitle({
</>
)}
<div className='challenge-title'>
<div className='title-text'>
<h1>{children}</h1>
{isCompleted && <GreenPass />}
</div>
<h1>{children}</h1>
{isCompleted && <GreenPass />}
</div>
</div>
);