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

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

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