Make calendar cells clickable and improve mood heatmap colors

assets/css/app.css

@@ -417,11 +417,19 @@ button {
     width: 0.8rem;
     height: 0.8rem;
     border-radius: 6px;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgba(132, 193, 208, 0.55);
+}
+
+.calendar-dot--bad {
+    background: rgba(255, 117, 117, 0.85);
+}
+
+.calendar-dot--warn {
+    background: rgba(255, 171, 122, 0.82);
 }
 
 .calendar-dot--1 {
-    background: rgba(126, 239, 205, 0.32);
+    background: rgba(116, 226, 183, 0.7);
 }
 
 .calendar-dot--2 {
@@ -444,6 +452,24 @@ button {
     font-size: 11px;
 }
 
+.calendar-link {
+    cursor: pointer;
+}
+
+.calendar-cell--active {
+    transition: transform 140ms ease, filter 140ms ease, stroke 140ms ease, stroke-width 140ms ease;
+    transform-box: fill-box;
+    transform-origin: center;
+}
+
+.calendar-link:hover .calendar-cell--active,
+.calendar-link:focus .calendar-cell--active,
+.calendar-link:focus-visible .calendar-cell--active {
+    filter: brightness(1.08);
+    stroke: rgba(255, 255, 255, 0.8);
+    stroke-width: 1.1;
+}
+
 .line-chart,
 .bar-chart {
     min-height: 17rem;