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

* fix/heatmap-colors

* fix/simplify-variables

* fix/if-statements+typo

client/src/components/profile/components/HeatMap.js

@@ -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>

client/src/components/profile/components/heatmap.css

@@ -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;
 }