From b6bb9b8d10211ee3998d4e73431233f579415c2f Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Mon, 20 May 2024 17:36:29 +0200
Subject: [PATCH] Change the look of the Card component

---
 src/charts.ts                                         |  1 +
 src/components/Card.vue                               |  6 +++---
 src/components/charts/TeaConsumptionOverTimeChart.vue | 10 ++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/charts.ts b/src/charts.ts
index b797ac1..c9a4f1a 100644
--- a/src/charts.ts
+++ b/src/charts.ts
@@ -1,4 +1,5 @@
 export const borderColors: string[] = [
+	"hsl(20 100% 40%)",
 	"hsl(20 70% 30%)",
 	"hsl(40,100%,76%)",
 	"hsl(13,100%,66%)"
diff --git a/src/components/Card.vue b/src/components/Card.vue
index 08488c2..1ea75e4 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-white border-1 border-solid border-gray-300 rounded-2xl shadow-sm flex flex-col gap-3 p-6">
-    <div class="font-bold text-lg font-serif">
+  <div class="bg-white border-1 border-solid border-gray-300 rounded-xl flex flex-col gap-3 p-6">
+    <div class="font-serif font-300 tracking-tight text-xl text-orange-900">
       {{ title }}
     </div>
-    <div class="h-2px w-full bg-orange-800 opacity-40"/>
+    <div class="h-2px w-full bg-orange-800 opacity-10"/>
     <div class="relative">
       <slot/>
     </div>
diff --git a/src/components/charts/TeaConsumptionOverTimeChart.vue b/src/components/charts/TeaConsumptionOverTimeChart.vue
index d9a1b56..8714d60 100644
--- a/src/components/charts/TeaConsumptionOverTimeChart.vue
+++ b/src/components/charts/TeaConsumptionOverTimeChart.vue
@@ -4,6 +4,12 @@
       <LineChart :data="data" :options="options"/>
     </div>
     <div class="flex flex-wrap px-1 justify-center items-center gap-x-4 gap-y-1 text-sm">
+      <div class="flex gap-1.5 items-center flex-shrink-0">
+        <div class="h-2px w-5" :style="{ backgroundColor: borderColors[0] }"></div>
+        <div>
+          Total
+        </div>
+      </div>
       <div
         v-for="(group, index) in groupedTopEvents"
         :key="group.typeOfTeaId"
@@ -100,7 +106,7 @@
     datasets: [
       {
         pointStyle: false,
-        borderColor: "hsl(20 100% 40%)",
+        borderColor: borderColors[0],
         fill: "start",
         backgroundColor: (ctx: ScriptableContext<"line">) => {
           const canvas = ctx.chart.ctx
@@ -119,7 +125,7 @@
       ...groupedTopEvents.value
         .map((group, index) => ({
           pointStyle: false,
-          borderColor: borderColors[index],
+          borderColor: borderColors[index + 1],
           borderWidth: 2,
           data: group.events.map((e, index) => ({
             x: e.timestamp.epochMilliseconds,