add calendar

package.json

@@ -18,6 +18,7 @@
     "react-loadable": "^5.5.0",
     "react-router-dom": "^6.8.0",
     "react-timestamps": "github:DarkIntaqt/react-timestamps",
+    "react-tooltip": "^5.20.0",
     "web-vitals": "^3.1.0"
   },
   "devDependencies": {

src/css/user.module.css

@@ -252,7 +252,8 @@ img.mclogo {
 .selectedFilteroverview>.overview,
 .selectedFiltertitles>.titles,
 .selectedFilterstatistics>.statistics,
-.selectedFilterhistory>.history {
+.selectedFilterhistory>.history,
+.selectedFiltercalendar>.calendar {
     color: var(--selected);
     border-bottom: 2px solid var(--selected)
 }

src/css/userCalendar.module.css

@@ -0,0 +1,76 @@
+.calendar {
+   width: 100%;
+   float: left;
+}
+
+.buttons {
+   width: 100%;
+}
+
+.buttons button {
+   padding: 10px 15px;
+   background-color: var(--dark2);
+   color: var(--light0);
+
+   font-size: .8rem;
+   cursor: pointer;
+
+   border-radius: 5px;
+   margin: 10px;
+
+   border: 2px solid var(--dark3);
+   outline: none;
+}
+
+.buttons.matches button.matches,
+.buttons.progress button.progress,
+.buttons.upgrades button.upgrades {
+   border-color: var(--selected);
+   box-shadow: 0 0 5px var(--selected);
+}
+
+.calendarElement {
+   margin: 20px;
+   float: left;
+
+   display: grid;
+
+   grid-template-rows: repeat(7, 1fr);
+   grid-template-columns: repeat(13, 1fr);
+
+   grid-auto-flow: column;
+
+   grid-gap: 5px;
+
+   width: fit-content;
+}
+
+.calendarElement>div:not(.day) {
+   width: 30px;
+   height: 30px;
+
+   border-radius: 4px;
+}
+
+
+.calendarElement>div.day {
+   width: 30px;
+   height: 30px;
+
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   color: var(--light3);
+   text-align: center;
+   font-size: .8rem;
+}
+
+.calendarElement>div.on {
+   background-color: rgba(13, 189, 255, var(--opacity, .15));
+}
+
+.calendarElement>div.off {
+   background-color: transparent;
+   border: 2px solid var(--dark3);
+   box-sizing: border-box;
+}