base filters (#825)

* base filters

* merge gql into filters-update

* filters v1

* lint

Author: ARtheboss

apps/frontend/src/app/Schedule/Editor/EventDialog/index.tsx

@@ -4,6 +4,7 @@ import { ArrowRight, Xmark } from "iconoir-react";
 
 import {
   Button,
+  DaySelect,
   Dialog,
   Flex,
   Heading,
@@ -160,78 +161,7 @@ export default function EventDialog({ children }: EventDialogProps) {
             </Flex>
             <Flex direction="column" gap="2">
               <Label>Repeat</Label>
-              <div className={styles.daySelect}>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[6] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>Su</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[0] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>M</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[1] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>Tu</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[2] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>W</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[3] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>Th</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[4] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>F</span>
-                </label>
-                <label>
-                  <input
-                    type="checkbox"
-                    onChange={(e) => {
-                      days[5] = e.target.checked;
-                      setDays(days);
-                    }}
-                  />
-                  <span>Sa</span>
-                </label>
-              </div>
+              <DaySelect days={days} updateDays={setDays} />
             </Flex>
             <Flex direction="column" gap="2">
               <Label>Description</Label>

apps/frontend/src/app/Schedule/Editor/SideBar/Event/index.tsx

@@ -1,4 +1,4 @@
-import { ArrowSeparateVertical, Xmark } from "iconoir-react";
+import { Xmark } from "iconoir-react";
 
 import { IconButton } from "@repo/theme";
 
@@ -12,15 +12,16 @@ interface EventProps {
 }
 
 export default function Event({ event, onDelete }: EventProps) {
+  // TODO: Add edit functionality on expand
   return (
     <div className={styles.root} data-draggable>
       <div className={styles.border} />
       <div className={styles.body}>
         <div className={styles.header}>
           <div className={styles.row}>
-            <div className={styles.icon}>
+            {/* <div className={styles.icon}>
               <ArrowSeparateVertical />
-            </div>
+            </div> */}
             <div className={styles.text}>
               <p className={styles.heading}>{event.title}</p>
               <p className={styles.description}>{event.description}</p>

apps/frontend/src/components/ClassBrowser/Filters/Filters.module.scss

@@ -10,27 +10,12 @@
     flex-direction: column;
     padding: 24px;
 
-    // .button {
-    //   display: flex;
-    //   align-items: center;
-    //   gap: 12px;
-    //   font-size: 14px;
-    //   color: var(--blue-500);
-    //   line-height: 1;
-    //   cursor: pointer;
-    //   font-weight: 500;
-    //   margin-top: 12px;
-    //   transition: all 100ms ease-in-out;
-
-    //   &:hover {
-    //     color: var(--blue-600);
-    //   }
-    // }
-
     .label {
-      font-size: 14px;
+      font-size: 12px;
       color: var(--label-color);
       line-height: 1;
+      font-weight: 600;
+      margin-bottom: 12px;
 
       &:not(:first-child) {
         margin-top: 24px;