Guide text

app/components/Calendar.module.css

@@ -130,7 +130,6 @@
     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;
-
 }
 
 .boxModalCancelButton {
@@ -139,5 +138,18 @@
     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;
-
+}
+
+.guideText {
+    color: #555;
+    text-align: center;
+    margin-bottom: 2rem;
+    font-size: 0.8rem;
+    max-width: 35rem;
+    margin-left: auto;
+    margin-right: auto;
+
+    h3 {
+        margin-top: 0rem;
+    }
 }

app/components/Calendar.tsx

@@ -213,6 +213,11 @@ export default function Calendar() {
             <div className={styles.latestBoxBtnContainer}>
                 {renderLatestBoxButton()}
             </div>
+            <div className={styles.guideText}>
+                <h3>Käyttöohje</h3>
+                Klikkaa laatikon päivää kuitataksesi sen haetuksi tai peruuttaaksesi haun.
+                Jakopäivät näkyvät vaalean vihreinä. Jos laatikko on jo haettu, se näkyy tumman vihreänä.
+            </div>
             <div className={styles.calendarGrid}>
                 <span>Ma</span>
                 <span>Ti</span>