Change the look of the Card component

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%)"

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="bg-white border-1 border-solid border-gray-300 rounded-xl flex flex-col gap-3 p-6">
-    <div class="font-bold text-lg font-serif">
+    <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>

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,