Cleanup calendar styles

web/src/pages/database/Calendar.tsx

@@ -1,7 +1,7 @@
-import moment from "moment";
+import moment from 'moment'
-import { Accessor, Component, Setter } from "solid-js";
+import { Accessor, Component, Setter } from 'solid-js'
 
-import "../../css/calendar.css";
+import styles from './calendar.module.css'
 
 export const Calendar: Component<{
     getSelectedDate: Accessor<Date>,
@@ -20,19 +20,19 @@ export const Calendar: Component<{
     return (
         <div>
             <h3>Calendar</h3>
-            <div class="calendar-top">
+            <div class={styles.calendarTop}>
                 <button onClick={() => changeMonths(-1) }>&lt;&lt;</button>
-                <div class="calendar-year-month">
+                <div class={styles.calendarYearMonth}>
                     {moment(getSelectedDate()).format("YYYY, MMM")}
                 </div>
                 <button onclick={() => changeMonths(1)}>&gt;&gt;</button>
             </div>
-            <div class="calendar">
+            <div class={styles.calendar}>
                 { getPaddedMonth(getSelectedDate()).map(d => {
-                    const classArr = ["calendar-cell"];
+                    const classArr = [styles.calendarCell];
-                    if (d.getMonth() !== getSelectedDate().getMonth()) classArr.push("prev-month");
+                    if (d.getMonth() !== getSelectedDate().getMonth()) classArr.push(styles.prevMonth)
-                    if (dateStrArr().includes(d.toDateString())) classArr.push("data-date");
+                    if (dateStrArr().includes(d.toDateString())) classArr.push(styles.dataDate)
-                    if (d.toDateString() === getSelectedDate().toDateString()) classArr.push("current-date");
+                    if (d.toDateString() === getSelectedDate().toDateString()) classArr.push(styles.currentDate)
                     return (
                         <div
                             class={classArr.join(" ")}

web/src/pages/database/calendar.module.css

@@ -4,19 +4,19 @@
     gap: 5px;
   }
 
-  .calendar-top {
+  .calendarTop {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
   }
 
-  .calendar-nav {
+  .calendarNav {
     display: flex;
     align-items: center;
   }
 
-  .calendar-nav button {
+  .calendarNav button {
     margin-right: 5px;
     background-color: #fff;
     border: none;
@@ -24,11 +24,11 @@
     cursor: pointer;
   }
 
-  .calendar-year-month {
+  .calendarYearMonth {
     text-align: center;
   }
 
-  .calendar-cell {
+  .calendarCell {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -36,20 +36,20 @@
     background-color: #fff;
   }
 
-  .prev-month,
+  .prevMonth,
-  .next-month {
+  .nextMonth {
     opacity: 0.3;
   }
 
-  .data-date {
+  .dataDate {
     background-color: #99ccff;
   }
 
-  .current-date {
+  .currentDate {
     background-color: #ffcc66;
   }
 
-  .calendar-cell:hover {
+  .calendarCell:hover {
     background-color: #f2f2f2;
     cursor: pointer;
   }