gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(client): heatmap-colors (#36660)

Browse Source 
* fix/heatmap-colors

* fix/simplify-variables

* fix/if-statements+typo
This commit is contained in:
Tom
2019-08-26 08:22:39 -05:00
committed by mrugesh
parent 432e4a40a3
commit 2e205b04e8
2 changed files with 26 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/profile/components/HeatMap.js
View File

@ -56,13 +56,11 @@ function HeatMap({ calendar, streak }) {
<FullWidthRow>
<CalendarHeatMap
classForValue={value => {
if (!value || value.count < 1) {
return 'colour-empty';
}
if (value.count > 4) {
return 'colour-scale-a-lot';
}
return `colour-scale-${value.count}`;
if (!value || value.count < 1) return 'color-empty';
if (value.count < 4) return 'color-scale-1';
if (value.count < 8) return 'color-scale-2';
if (value.count >= 8) return 'color-scale-a-lot';
return 'color-empty';
}}
endDate={endOfCalendar}
startDate={startOfCalendar}
@ -76,7 +74,7 @@ function HeatMap({ calendar, streak }) {
valueCount = 'No points';
}
return {
'data-tip': `<strong>${valueCount}</strong> on ${new Date(
'data-tip': `<b>${valueCount}</b> on ${new Date(
value.date
).toLocaleDateString('en-US', {
year: 'numeric',
@ -93,10 +91,10 @@ function HeatMap({ calendar, streak }) {
<FullWidthRow>
<div className='streak-container'>
<span className='streak'>
<strong>Longest Streak:</strong> {streak.longest || 0}
<b>Longest Streak:</b> {streak.longest || 0}
</span>
<span className='streak'>
<strong>Current Streak:</strong> {streak.current || 0}
<b>Current Streak:</b> {streak.current || 0}
</span>
</div>
</FullWidthRow>

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

@ -3,36 +3,32 @@
justify-content: space-around;
align-items: center;
font-size: 18px;
color: var(--secondary-color);
color: var(--primary-color);
}
.streak strong {
color: var(--secondary-color);
.react-calendar-heatmap-month-label {
color: var(--primary-color);
}
.night .streak strong {
color: #ccc;
.react-calendar-heatmap .color-empty {
fill: var(--tertiary-background);
}
.react-calendar-heatmap .colour-empty {
fill: #eee;
.react-calendar-heatmap .color-scale-1 {
fill: var(--gray-45);
}
.react-calendar-heatmap .colour-scale-1 {
fill: #d6e685;
.react-calendar-heatmap .color-scale-2 {
fill: var(--quaternary-color);
}
.react-calendar-heatmap .colour-scale-2 {
fill: #8cc665;
}
.react-calendar-heatmap .colour-scale-3 {
fill: #44a340;
}
.react-calendar-heatmap .colour-scale-4 {
fill: #1e6823;
}
.react-calendar-heatmap .colour-scale-a-lot {
fill: #006400;
.react-calendar-heatmap .color-scale-a-lot {
fill: var(--primary-color);
}
.react-tooltip {
background-color: #006400 !important;
border: 1px solid black !important;
color: var(--primary-color) !important;
background-color: var(--primary-background) !important;
border: 1px solid var(--primary-color) !important;
}
.__react_component_tooltip:after {
border-top-color: var(--primary-color) !important;
}