Style improvements

app/components/Calendar.module.css

@@ -18,16 +18,18 @@
 }
 
 .monthNavBtn {
-    background-color: #d4f0dd;
+    background-color: #a7ebb0;
-}
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 10px;
 
-.emptyBtn {
+    &:hover {
-    background-color: #d4f0dd;
+        background-color: #7dcf8c;
+    }
 }
 
 .calendarCell {
-    background-color: #d4f0dd;
+    border: 2px solid #ccc;
-    border: 1px solid #ccc;
     padding: 0.5rem;
     cursor: pointer;
     height: 3rem;
@@ -36,14 +38,27 @@
 }
 
 .deliveredCell {
-    background-color: #62ed8e;
+    background-color: #27db60;
+
+    &:hover {
+        background-color: #1ebd50;
+    }
 }
 
 .pickedUpCell {
-    background-color: #6287ed;
+    background-color: #a7ebb0;
+
+    &:hover {
+        background-color: #7dcf8c;
+    }
 }
 
 .firstWeekPaddingCell {
     height: 3rem;
     width: 3rem;
 }
+
+.statusText {
+    font-size: 0.8rem;
+    color: #555;
+}

app/components/Calendar.tsx

@@ -76,6 +76,12 @@ export default function Calendar() {
                             day: "2-digit",
                             month: "2-digit",
                         })}
+                        <br />
+                        {matchingBox.pickup_date ? (
+                            <span className={styles.statusText}>Jako</span>
+                        ) : (
+                            <span className={styles.statusText}>Haettu</span>
+                        )}
                     </div>
                 );
             }