From 03f74e76ca484bf7bec3c4ac219a5254ca1a099d Mon Sep 17 00:00:00 2001
From: Greg Burri <greg.burri@gmail.com>
Date: Thu, 22 May 2025 02:20:12 +0200
Subject: [PATCH] Use svg for arrows in calendar

---
 backend/scss/calendar.scss      | 16 ++++++++++++++++
 backend/templates/calendar.html | 13 +++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/backend/scss/calendar.scss b/backend/scss/calendar.scss
index c637a6e..b9fa2f6 100644
--- a/backend/scss/calendar.scss
+++ b/backend/scss/calendar.scss
@@ -9,6 +9,22 @@
         width: 100%;
         font-weight: bold;
 
+        .prev.button,
+        .next.button {
+
+            .svg-arrow {
+                display: block;
+                margin: consts.$margin calc(consts.$margin / 2);
+                fill: consts.$link-color;
+                width: 0.8rem;
+                height: 0.8rem;
+            }
+
+            &:hover .svg-arrow {
+                fill: consts.$link-hover-color;
+            }
+        }
+
         .prev {
             float: left;
         }
diff --git a/backend/templates/calendar.html b/backend/templates/calendar.html
index 1112ae5..b46d4bb 100644
--- a/backend/templates/calendar.html
+++ b/backend/templates/calendar.html
@@ -1,6 +1,10 @@
 <div class="calendar">
     <div class="month-selector">
-        <div class="prev button">⯇</div>
+        <div class="prev button">
+            <svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
+                <polygon points="0.866,0 0.866,1 0,0.5" />
+            </svg>
+        </div>
 
         <div>
             <span class="year"></span>
@@ -22,7 +26,11 @@
             {% endfor %}
         </div>
 
-        <div class="next button">⯈</div>
+        <div class="next button">
+            <svg class="svg-arrow" aria-hidden="true" viewBox="0 0 1 1">
+                <polygon points="0,0 0.866,0.5 0,1" />
+            </svg>
+        </div>
     </div>
 
     <ul class="weekdays">
@@ -49,6 +57,7 @@
     <ul class="days">
         {% for i in 0..5 %}
             {% for j in 0..7 %}
+                {# All days of the current selected month will have the class 'current-month' #}
                 <li id="day-grid-{{i}}{{j}}">
                     <div class="number"></div>
                     <div class="scheduled-recipes"></div>