jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-25 23:02:05 -04:00
Code Issues Projects Releases Wiki Activity

fix(client): update display prop on element (#42912)

Browse Source 
* fix: profile menu icon overlapping content

* refactor: profile icon usage
This commit is contained in:
Victor Duarte
2021-07-27 04:27:32 -05:00
committed by GitHub
parent 7b92f1df83
commit a4358fc56c
8 changed files with 76 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/profile/__snapshots__/Profile.test.tsx.snap
View File

@@ -18,7 +18,7 @@ exports[`<Profile/> renders correctly 1`] = `
class="row"
>
<div
class="avatar-container col-xs-12"
class="avatar-camper col-xs-12"
>
<div
class="avatar-container default-border"

2
client/src/components/profile/components/Camper.tsx
View File

@@ -90,7 +90,7 @@ function Camper({
return (
<div>
<Row>
<Col className='avatar-container' xs={12}>
<Col className='avatar-camper' xs={12}>
<AvatarRenderer
isDonating={isDonating}
isTopContributor={yearsTopContributor.length > 0}

40
client/src/components/profile/components/camper.css
View File

@@ -1,14 +1,3 @@
.avatar-container .avatar {
height: 180px;
width: 180px;
object-fit: cover;
}
.avatar-container {
display: flex;
justify-content: center;
}
.username,
.name,
.bio,
@@ -16,22 +5,21 @@
overflow-wrap: break-word;
}
.avatar-container div {
.avatar-camper {
display: flex;
justify-content: center;
}
.avatar-camper .avatar {
height: 180px;
width: 180px;
object-fit: cover;
}
.avatar-camper div {
height: 200px;
}
.avatar-container .gold-border {
border: 10px solid var(--yellow-gold);
}
.avatar-container .blue-border {
border: 10px solid var(--blue-mid);
}
.avatar-container .purple-border {
border: 10px solid var(--purple-mid);
}
.avatar-container .default-border {
border: 10px solid transparent;
.avatar-camper .avatar-container {
border-width: 10px;
}