make vars less confusing

Author: dtemkin1

src/components/ClassTable.tsx

@@ -46,7 +46,7 @@ import { HydrantContext } from "../lib/hydrant";
 import type { State } from "../lib/state";
 import { ColorClasses } from "../lib/colors";
 
-import tableClasses from "./ClassTable.module.css";
+import classes from "./ClassTable.module.css";
 
 const hydrantTheme = themeQuartz.withParams({
   accentColor: "var(--chakra-colors-fg)",
@@ -482,7 +482,6 @@ const StarButton = ({
 /** The table of all classes, along with searching and filtering with flags. */
 export function ClassTable() {
   const { state } = useContext(HydrantContext);
-  const { classes } = state;
 
   const gridRef = useRef<AgGridReact<ClassTableRow>>(null);
 
@@ -534,7 +533,7 @@ export function ClassTable() {
         comparator: classSort,
         initialSort,
         maxWidth: 93,
-        cellClass: tableClasses["underline-on-hover"],
+        cellClass: classes["underline-on-hover"],
         ...sortProps,
       },
       {
@@ -574,15 +573,15 @@ export function ClassTable() {
   // Setup rows
   const rowData: ClassTableRow[] = useMemo(
     () =>
-      Array.from(classes.values(), (cls) => ({
+      Array.from(state.classes.values(), (cls) => ({
         number: cls.number,
         rating: cls.evals.rating.slice(0, 3), // remove the "/7.0" if exists
         hours: cls.evals.hours,
         name: cls.name,
         class: cls,
         inCharge: cls.description.inCharge,
       })),
-    [classes],
+    [state.classes],
   );
 
   const [inputFilter, setInputFilter] = useState<ClassFilter | null>(null);
@@ -614,7 +613,7 @@ export function ClassTable() {
         <AgGridReact<ClassTableRow>
           theme={hydrantTheme}
           ref={gridRef}
-          rowClass={tableClasses.row}
+          rowClass={classes.row}
           defaultColDef={defaultColDef}
           columnDefs={columnDefs}
           rowData={rowData}

src/lib/colors.ts

@@ -1,14 +1,14 @@
 import type { ColorMode } from "../components/ui/color-mode";
 import type { Activity } from "./activity";
 
-import colorClasses from "./colors.module.css";
+import classes from "./colors.module.css";
 
 export const ColorClasses = {
-  Muted: colorClasses.muted,
-  Success: colorClasses.success,
-  Warning: colorClasses.warning,
-  Error: colorClasses.error,
-  Normal: colorClasses.normal,
+  Muted: classes.muted,
+  Success: classes.success,
+  Warning: classes.warning,
+  Error: classes.error,
+  Normal: classes.normal,
 } as const;
 
 /** The type of color schemes. */