class table/calendar aesthetic changes (#107)

Resolves #74 by making aesthetic changes. I don't know which of here we
should implement? But any feedback if appreciated :)

---------

Co-authored-by: Jophy Chon Hou Ye <44258870+jophy-ye@users.noreply.github.com>

package.json

@@ -5,9 +5,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@ag-grid-community/client-side-row-model": "^28.1.0",
-    "@ag-grid-community/core": "^28.1.0",
-    "@ag-grid-community/react": "^28.1.0",
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.13.5",
     "@fontsource-variable/inter": "^5.1.0",
@@ -16,6 +13,7 @@
     "@fullcalendar/react": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
     "@react-oauth/google": "^0.2.6",
+    "ag-grid-react": "^33.0.2",
     "html-entities": "^2.3.3",
     "ical-generator": "^6.0.0",
     "msgpack-lite": "^0.1.26",

src/components/Calendar.tsx

@@ -7,8 +7,10 @@ import interactionPlugin from "@fullcalendar/interaction";
 import { Activity, NonClass, Timeslot } from "../lib/activity";
 import { Slot } from "../lib/dates";
 import { State } from "../lib/state";
+import { Class } from "../lib/class";
 
 import "./Calendar.scss";
+import { Tooltip } from "./ui/tooltip";
 
 /**
  * Calendar showing all the activities, including the buttons on top that
@@ -22,6 +24,18 @@ export function Calendar(props: {
   const { selectedActivities, viewedActivity, state } = props;
 
   const renderEvent = ({ event }: EventContentArg) => {
+    const TitleText = () => (
+      <Text
+        fontSize="sm"
+        fontWeight="medium"
+        overflow="hidden"
+        textOverflow="clip"
+        whiteSpace="nowrap"
+      >
+        {event.title}
+      </Text>
+    );
+
     return (
       <Box
         color={event.textColor}
@@ -30,15 +44,16 @@ export function Calendar(props: {
         cursor="pointer"
         height="100%"
       >
-        <Text
-          fontSize="sm"
-          fontWeight="medium"
-          overflow="hidden"
-          textOverflow="clip"
-          whiteSpace="nowrap"
-        >
-          {event.title}
-        </Text>
+        {event.extendedProps.activity instanceof Class ? (
+          <Tooltip
+            content={event.extendedProps.activity.name}
+            portalled
+            positioning={{ placement: "top" }}
+            children={TitleText()}
+          />
+        ) : (
+          <TitleText />
+        )}
         <Text fontSize="xs">{event.extendedProps.room}</Text>
       </Box>
     );

src/components/ClassTable.scss

@@ -1,41 +1,27 @@
-.ag-theme-hydrant {
-  height: 320px;
-  width: 100%;
-  --ag-icon-font-family: agGridAlpine;
-}
-
-.ag-cell-wrapper {
+.ag-row {
   cursor: pointer;
-  padding: 8px 5px;
 }
 
-.ag-row {
-  border-bottom-width: 1px;
+.ag-row:hover .ag-cell:first-child {
+  text-decoration: underline;
 }
 
-.ag-row:hover {
-  background-color: var(--chakra-colors-color-palette-subtle);
-
-  .ag-cell:first-child {
-    text-decoration: underline;
-  }
+.ag-cell-muted-text {
+  color: var(--chakra-colors-fg-muted);
 }
 
-.ag-cell:first-child {
-  font-weight: 500;
+.ag-cell-success-text {
+  color: var(--chakra-colors-fg-success);
 }
 
-.ag-header-cell-text {
-  font-size: 0.8rem;
-  letter-spacing: 0.05rem;
-  font-weight: bold;
-  text-transform: uppercase;
+.ag-cell-warning-text {
+  color: var(--chakra-colors-fg-warning);
 }
 
-.ag-header-cell-label {
-  padding: 8px 5px;
+.ag-cell-error-text {
+  color: var(--chakra-colors-fg-error);
 }
-.ag-header-viewport {
-  background-color: var(--chakra-colors-bg-subtle);
-  border-bottom-width: 1px;
+
+.ag-cell-normal-text {
+  color: var(--chakra-colors-fg);
 }