Frontpage and Heatmap CSS tweaks (#13443)

* Frontpage and Heatmap CSS tweaks

- Make heatmap use primary color
- Defined secondary color shades
- Set various blue colors to CSS vars
- Misc tweaks

* remove a useless variable

* remove another useless variable

Co-authored-by: Lauris BH <lauris@nix.lv>

1 files changed, 20 insertions, 37 deletions

diff --git a/web_src/js/components/ActivityHeatmap.vue b/web_src/js/components/ActivityHeatmap.vue
index cfa2825244..66ad435284 100644
--- a/web_src/js/components/ActivityHeatmap.vue
+++ b/web_src/js/components/ActivityHeatmap.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="heatmap-container">
     <div v-show="isLoading">
       <slot name="loading"/>
     </div>
-    <h4 v-if="!isLoading" class="total-contributions">
-      {{ values.length }} total contributions in the last 12 months
-    </h4>
+    <div v-if="!isLoading" class="total-contributions">
+      {{ values.length }} contributions in the last 12 months
+    </div>
     <calendar-heatmap
       v-show="!isLoading"
       :locale="locale"
@@ -26,45 +26,28 @@ export default {
   components: {CalendarHeatmap},
   data: () => ({
     isLoading: true,
-    colorRange: [],
-    endDate: null,
+    colorRange: [
+      'var(--color-secondary-alpha-70)',
+      'var(--color-primary-alpha-50)',
+      'var(--color-primary-alpha-60)',
+      'var(--color-primary-alpha-70)',
+      'var(--color-primary-alpha-80)',
+      'var(--color-primary)',
+    ],
+    endDate: new Date(),
     values: [],
-    suburl: AppSubUrl,
-    user: heatmapUser,
     locale: {
       contributions: 'contributions',
       no_contributions: 'No contributions',
     },
   }),
-  mounted() {
-    this.colorRange = [
-      this.getColor(0),
-      this.getColor(1),
-      this.getColor(2),
-      this.getColor(3),
-      this.getColor(4),
-      this.getColor(5)
-    ];
-    this.endDate = new Date();
-    this.loadHeatmap(this.user);
-  },
-  methods: {
-    async loadHeatmap(userName) {
-      const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`);
-      const data = await res.json();
-      this.values = data.map(({contributions, timestamp}) => {
-        return {date: new Date(timestamp * 1000), count: contributions};
-      });
-      this.isLoading = false;
-    },
-    getColor(idx) {
-      const el = document.createElement('div');
-      el.className = `heatmap-color-${idx}`;
-      document.body.appendChild(el);
-      const color = getComputedStyle(el).backgroundColor;
-      document.body.removeChild(el);
-      return color;
-    }
+  async mounted() {
+    const res = await fetch(`${AppSubUrl}/api/v1/users/${heatmapUser}/heatmap`);
+    const data = await res.json();
+    this.values = data.map(({contributions, timestamp}) => {
+      return {date: new Date(timestamp * 1000), count: contributions};
+    });
+    this.isLoading = false;
   },
 };
 </script>