Merge branch 'issue-47-resolve' into 'sprint-4'

Update style of the recurring event creation view

See merge request !32

src/public/css/eventAddMenu.css

@@ -52,4 +52,40 @@
   border-radius: 0px 0px 12px 12px;
   display: block;
   width: 100%;
+}
+
+}
+
+#weekDays input[type="checkbox"] {
+  display: none;
+}
+
+.day-label {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: #f0f0f0;
+  color: #555;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-right: 50px;
+}
+
+.day-label:hover {
+  background-color: #ddd;
+  color: #000;
+}
+
+#weekDays input[type="checkbox"]:checked+.day-label {
+  background-color: #ff0044;
+  color: white;
+  box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
+  padding-right: 25px;
+  padding-left: 8px;
 }
\ No newline at end of file

src/views/partials/createRecurringEvent.ejs

@@ -81,40 +81,40 @@
                  <br>
                  <div id="weekDays" style="display:inline-flex;justify-content:space-evenly;margin-top:15px;">
                  <div>
-                 <div style="justify-content:space-between;">
-                 <label>Mon.
+                 <div style="display:flex;justify-content:space-between;width:100%">
+                 <label class="day-label">Mon.
                  <input type="checkbox" id="Monday" name ="mo">
                  <span></span>
                  </label>
 
-                 <label>Tue.
+                 <label class="day-label">Tue.
                  <input type="checkbox" id="Tuesday" name="tu">
                  <span></span>
                  </label>
 
-                 <label>Wen.
+                 <label class="day-label">Wen.
                  <input type="checkbox" id="Wednesday" name="we">
                  <span></span>
                  </label>
 
-                 <label>Thu.
+                 <label class="day-label">Thu.
                  <input type="checkbox" id="Thursday" name="th">
                  <span></span>
                  </label>
-                 </div>
+                 </div class="day-label">
 
-                 <div style="justify-content:space-between;padding-top:10px;">
-                 <label>Fri.
+                 <div style="display:flex;justify-content:space-between;padding-top:10px;">
+                 <label class="day-label">Fri.
                  <input type="checkbox" id="Friday" name="fr">
                  <span></span>
                  </label>
-
-                 <label>Sat.
+                 <br>
+                 <label class="day-label">Sat.
                  <input type="checkbox" id="Saturday" name="sa">
                  <span></span>
                  </label>
-
-                 <label>Sun.
+                 <br>
+                 <label class="day-label">Sun.
                  <input type="checkbox" id="Sunday" name="su">
                  <span></span>
                  </label>
@@ -141,55 +141,55 @@
                    <br>
                    <div id="months" style="display:block;margin-top:5px;">
                      <div style="display:flex;justify-content:space-between;">
-                       <label>Jan.
+                       <label class="day-label">Jan.
                         <input type="checkbox" id="january" name="1">
                         <span></span>
                        </label>
-                       <label>Feb.
+                       <label class="day-label">Feb.
                         <input type="checkbox" id="february" name="2">
                         <span></span>
                        </label>
-                       <label>Mar.
+                       <label class="day-label">Mar.
                         <input type="checkbox" id="march" name="3">
                         <span></span>
                        </label>
-                       <label>Apr.
+                       <label class="day-label">Apr.
                         <input type="checkbox" id="april" name="4">
                         <span></span>
                        </label>
                      </div>
                      <div style="display:flex;justify-content:space-between;">
-                       <label>May.
+                       <label class="day-label">May.
                         <input type="checkbox" id="may" name="5">
                         <span></span>
                        </label>
-                       <label>Jun.
+                       <label class="day-label">Jun.
                         <input type="checkbox" id="june" name="6">
                         <span></span>
                        </label>
-                       <label>Jul.
+                       <label class="day-label">Jul.
                         <input type="checkbox" id="july" name="7">
                         <span></span>
-                       </label>
+                       </label class="day-label">
                        <label>Aug.
                         <input type="checkbox" id="august" name="8">
                         <span></span>
                        </label>
                      </div>
                      <div style="display:flex;justify-content:space-between;">
-                       <label>Sep.
+                       <label class="day-label">Sep.
                         <input type="checkbox" id="september" name="9">
                         <span></span>
                        </label>
-                       <label>Oct.
+                       <label class="day-label">Oct.
                         <input type="checkbox" id="october" name="10">
                         <span></span>
                        </label>
-                       <label>Nov..
+                       <label class="day-label">Nov.
                         <input type="checkbox" id="november" name="11">
                         <span></span>
                        </label>
-                       <label>Dec.
+                       <label class="day-label">Dec.
                         <input type="checkbox" id="decembre" name="12">
                         <span></span>
                        </label>