CSS tweaks

app/components/Calendar.module.css

@@ -25,6 +25,7 @@
     border: 1px solid #ccc;
     border-radius: 10px;
     padding: 10px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
     &:hover {
         background-color: #7dcf8c;
@@ -65,9 +66,10 @@
     padding: 10px 20px;
     cursor: pointer;
     margin-bottom: 2rem;
-    border: 1px solid #ccc;
+    border: 2px solid #57d545;
     border-radius: 10px;
     font-size: 1.3rem;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
     &:hover {
         background-color: #7dcf8c;
@@ -99,7 +101,7 @@
     font-size: 1.3rem;
 }
 
-.latestBoxModal {
+.boxModal {
     position: fixed;
     top: 0;
     left: 0;
@@ -109,27 +111,33 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: var(--font-main);
 }
 
-.latestBoxModalContent {
+.boxModalContent {
     background-color: #fff;
     padding: 2rem;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     text-align: center;
+    margin: 1rem;
 }
 
-.latestBoxConfirmButton {
-    background-color: #86f56d;
-    border: none;
+.boxModalConfirmButton {
+    background-color: #a7ebb0;
+    border: 2px solid #57d545;
     border-radius: 10px;
     padding: 10px 20px;
     margin-right: 1rem;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+
 }
 
-.latestBoxCancelButton {
+.boxModalCancelButton {
     background-color: #f56d6d;
-    border: none;
+    border: 2px solid #f02020;
     border-radius: 10px;
     padding: 10px 20px;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+
 }

app/components/Calendar.tsx

@@ -139,7 +139,10 @@ export default function Calendar() {
                     className={styles.latestBoxDeliveredBtn}
                     onClick={handleLatestBoxClick}
                 >
-                    Kuittaa viimeisin laatikko haetuksi
+                    Kuittaa {new Date(latestBox.delivery_date).toLocaleDateString("fi-FI", {
+                        day: "2-digit",
+                        month: "2-digit",
+                    })} laatikko haetuksi
                 </button>;
             default:
                 return <span className={styles.latestBoxStatus}>Virhe</span>;
@@ -224,16 +227,16 @@ export default function Calendar() {
             <Modal
                 open={showLatestBoxModal}
                 onClose={() => setShowLatestBoxModal(false)}
-                className={styles.latestBoxModal}
+                className={styles.boxModal}
             >
-                <div className={styles.latestBoxModalContent}>
+                <div className={styles.boxModalContent}>
                     <h2>Viimeisin laatikko</h2>
                     <p>Oletko varma, että haluat kuitata viimeisimmän laatikon ({new Date(latestBox.delivery_date).toLocaleDateString("fi-FI", {
                         day: "2-digit",
                         month: "2-digit",
                     })}) haetuksi?</p>
                     <button
-                        className={styles.latestBoxConfirmButton}
+                        className={styles.boxModalConfirmButton}
                         onClick={() => {
                             markLatestBoxPickedUp();
                             setShowLatestBoxModal(false);
@@ -242,7 +245,7 @@ export default function Calendar() {
                         Kyllä
                     </button>
                     <button
-                        className={styles.latestBoxCancelButton}
+                        className={styles.boxModalCancelButton}
                         onClick={() => setShowLatestBoxModal(false)}
                     >
                         Peruuta
@@ -252,9 +255,9 @@ export default function Calendar() {
             <Modal
                 open={showClickedBoxModal}
                 onClose={() => setShowClickedBoxModal(false)}
-                className={styles.latestBoxModal}
+                className={styles.boxModal}
             >
-                <div className={styles.latestBoxModalContent}>
+                <div className={styles.boxModalContent}>
                     <h2>Satolaatikko {" "}
                         {new Date(clickedBox.delivery_date).toLocaleDateString("fi-FI", {
                             day: "2-digit",
@@ -267,7 +270,7 @@ export default function Calendar() {
                             month: "2-digit",
                         })} päivän laatikon {clickedBox.pickup_date ? "haun" : "haetuksi"}?</p>
                     <button
-                        className={styles.latestBoxConfirmButton}
+                        className={styles.boxModalConfirmButton}
                         onClick={() => {
                             changeClickedBoxStatus();
                             setShowClickedBoxModal(false);
@@ -276,7 +279,7 @@ export default function Calendar() {
                         Kyllä
                     </button>
                     <button
-                        className={styles.latestBoxCancelButton}
+                        className={styles.boxModalCancelButton}
                         onClick={() => setShowClickedBoxModal(false)}
                     >
                         Peruuta