From 6eac268c3dfefe8164bfc0c4873e7e03d6bab09c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= <veikko@lintujarvi.fi>
Date: Sun, 29 Jun 2025 18:45:15 +0300
Subject: [PATCH] Guide text

---
 app/components/Calendar.module.css | 14 +++++++++++++-
 app/components/Calendar.tsx        |  5 +++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/components/Calendar.module.css b/app/components/Calendar.module.css
index 2f65dc2..13b1c7a 100644
--- a/app/components/Calendar.module.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/app/components/Calendar.tsx b/app/components/Calendar.tsx
index fd7c56d..a26f2cc 100644
--- a/app/components/Calendar.tsx
+++ b/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>