Improve dropdown styling and text contrast in practice problems UI

packages/alea-frontend/components/ProblemList.tsx

@@ -188,7 +188,7 @@ const ProblemList: FC<ProblemListProps> = ({ courseSections, courseId }) => {
       >
         <Typography
           variant="body1"
-          sx={{ color: 'secondary.main', fontStyle: 'italic', mb: 3, lineHeight: 1.6 }}
+          sx={{ color: 'text.primary', fontStyle: 'italic', mb: 3, lineHeight: 1.6 }}
         >
           Old exams are great practice resources, but since exam styles evolve, recent exams are
           better models, and any course topic even if not asked before can still appear in upcoming

packages/alea-frontend/pages/exam-problems.tsx

@@ -77,6 +77,7 @@ const ExamProblemsPage = () => {
       } catch (error) {
         console.error('Error loading exam data:', error);
       } finally {
+        console.log('Finished loading exam data');
         setLoading(false);
       }
     };

packages/alea-frontend/pages/quiz-problems.tsx

@@ -47,6 +47,7 @@ async function buildQuizProblems(
 const QuizProblemsPage = () => {
   const router = useRouter();
   const quizUri = router.query.quizUri as string | undefined;
+  const courseId = router.query.courseId as string | undefined;
   const targetProblemId = router.query.problemId as string | undefined;
 
   const [quizMeta, setQuizMeta] = useState<any>(null);
@@ -86,13 +87,13 @@ const QuizProblemsPage = () => {
 
   const quizLabelShort = useMemo(() => {
     if (!quizUri || !quizMeta) return '';
-    return formatQuizLabelShortFromUri(quizUri, quizMeta);
-  }, [quizUri, quizMeta]);
+    return formatQuizLabelShortFromUri(quizUri, quizMeta, courseId ?? quizMeta?.courseId);
+  }, [quizUri, quizMeta, courseId]);
 
   const quizLabelFull = useMemo(() => {
     if (!quizUri || !quizMeta) return '';
-    return formatQuizLabelFullFromUri(quizUri, quizMeta);
-  }, [quizUri, quizMeta]);
+    return formatQuizLabelFullFromUri(quizUri, quizMeta, courseId ?? quizMeta?.courseId);
+  }, [quizUri, quizMeta, courseId]);
 
   if (loading) {
     return (

packages/alea-frontend/theme/components.ts

@@ -97,7 +97,7 @@ const components: Components = {
         const isDark = theme.palette.mode === 'dark';
 
         return {
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: theme.palette.background.default,
           borderRadius: 10,
 
           '&:hover .MuiOutlinedInput-notchedOutline': {
@@ -121,98 +121,96 @@ const components: Components = {
       },
     },
   },
-MuiTextField: {
-  defaultProps: {
-    variant: 'outlined',
-  },
-  styleOverrides: {
-    root: ({ theme }:{theme:any}) => {
-      const isDark = theme.palette.mode === 'dark';
+  MuiTextField: {
+    defaultProps: {
+      variant: 'outlined',
+    },
+    styleOverrides: {
+      root: ({ theme }: { theme: any }) => {
+        const isDark = theme.palette.mode === 'dark';
 
-      return {
-        '& .MuiOutlinedInput-root': {
-          borderRadius: 10,
-          backgroundColor: theme.palette.background.paper,
+        return {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 10,
+            backgroundColor: theme.palette.background.default,
 
-          '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: isDark
-              ? theme.palette.primary.main:theme.palette.divider,
-          },
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: isDark ? theme.palette.primary.main : theme.palette.divider,
+            },
 
-          '&:hover .MuiOutlinedInput-notchedOutline': {
-            borderColor: isDark
-              ? theme.palette.primary.light
-              : theme.palette.primary.main,
-          },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: isDark ? theme.palette.primary.light : theme.palette.primary.main,
+            },
 
-          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.palette.primary.main,
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+              borderColor: theme.palette.primary.main,
+            },
           },
-        },
-      };
+        };
+      },
     },
   },
-},
 
   MuiInputLabel: {
-  styleOverrides: {
-    root: ({ theme }:{theme:any}) => ({
-      color: theme.palette.text.secondary,
-
-      '&.Mui-focused': {
+    styleOverrides: {
+      root: ({ theme }: { theme: any }) => ({
         color: theme.palette.text.primary,
-      },
-    }),
+
+        '&.Mui-focused': {
+          color: theme.palette.text.primary.main,
+        },
+      }),
+    },
   },
-},
 
-MuiSelect: {
-  styleOverrides: {
-    select: ({ theme }:{theme:any}) => ({
-      color: theme.palette.text.primary,
-    }),
+  MuiSelect: {
+    styleOverrides: {
+      select: ({ theme }: { theme: any }) => ({
+        color: theme.palette.text.primary,
+      }),
 
-    icon: ({ theme }:{theme:any}) => ({
-      color: theme.palette.text.secondary,
-    }),
+      icon: ({ theme }: { theme: any }) => ({
+        color: theme.palette.text.secondary,
+      }),
+    },
   },
-},
-
-MuiAutocomplete: {
-  styleOverrides: {
-    paper: ({ theme }:{theme:any}) => ({
-      borderRadius: 10,
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.text.primary,
-      borderColor: theme.palette.primary.main,
-    }),
-    inputRoot: ({ theme }:{theme:any}) => {
-            const isDark = theme.palette.mode === 'dark';
-
-      return({
-      borderRadius: 10,
-
-      '& .MuiOutlinedInput-notchedOutline': {
-        borderColor: isDark?theme.palette.primary.main:theme.palette.divider,
-      },
 
-      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+  MuiAutocomplete: {
+    styleOverrides: {
+      paper: ({ theme }: { theme: any }) => ({
+        borderRadius: 10,
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
         borderColor: theme.palette.primary.main,
-        borderWidth: 1.5,
-      },
-    })},
+      }),
+      inputRoot: ({ theme }: { theme: any }) => {
+        const isDark = theme.palette.mode === 'dark';
 
-    option: ({ theme }:{theme:any}) => ({
-      '&[aria-selected="true"]': {
-        backgroundColor: theme.palette.action.selected,
-      },
+        return {
+          borderRadius: 10,
+
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: isDark ? theme.palette.primary.main : theme.palette.divider,
+          },
 
-      '&.Mui-focused': {
-        backgroundColor: theme.palette.action.hover,
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.primary.main,
+            borderWidth: 1.5,
+          },
+        };
       },
-    }),
+
+      option: ({ theme }: { theme: any }) => ({
+        '&[aria-selected="true"]': {
+          backgroundColor: theme.palette.action.selected,
+        },
+
+        '&.Mui-focused': {
+          backgroundColor: theme.palette.action.hover,
+        },
+      }),
+    },
   },
-},
 
   MuiDialog: {
     styleOverrides: {

packages/stex-react-renderer/src/lib/ExamSelect.tsx

@@ -53,7 +53,7 @@ export function ExamSelect({
           return (
             <MenuItem key={exam.uri} value={exam.uri}>
               <Tooltip title={fullLabel} placement="right" arrow>
-                <Typography noWrap sx={{ maxWidth: 300 }}>
+                <Typography variant="body2" noWrap sx={{ maxWidth: 300 }}>
                   {dropdownLabel}
                 </Typography>
               </Tooltip>

spec/src/lib/flams.ts

@@ -529,11 +529,23 @@ export function getQuizMetaFromQuizUri(
     number?: string;
     date?: string;
     courseId?: string;
-  }
+  },
+  courseId?: string
 ): QuizMeta {
   const decoded = decodeURIComponent(quizUri);
 
-  const courseAcronym = quiz?.courseId?.toUpperCase() ?? 'UNKNOWN';
+  let courseAcronym = 'UNKNOWN';
+
+  if (courseId) {
+    courseAcronym = courseId.toUpperCase();
+  } else if (quiz?.courseId) {
+    courseAcronym = quiz.courseId.toUpperCase();
+  } else {
+    const match = decoded.match(/courses\/[^/]+\/([^/]+)/);
+    if (match && match[1]) {
+      courseAcronym = match[1].toUpperCase();
+    }
+  }
 
   const rawTerm = quiz?.term ?? '';
   const formattedTerm = rawTerm.replace(/([A-Z]+)(\d{2})(\d{2})/, '$1 $2/$3');
@@ -550,14 +562,14 @@ export function getQuizMetaFromQuizUri(
   };
 }
 
-export function formatQuizLabelShortFromUri(quizUri: string, quiz?: any) {
-  const meta = getQuizMetaFromQuizUri(quizUri, quiz);
+export function formatQuizLabelShortFromUri(quizUri: string, quiz?: any, courseId?: string) {
+  const meta = getQuizMetaFromQuizUri(quizUri, quiz, courseId);
 
   return [meta.courseAcronym, meta.quizNumber, meta.formattedTerm].filter(Boolean).join(' ');
 }
 
-export function formatQuizLabelFullFromUri(quizUri: string, quiz?: any) {
-  const meta = getQuizMetaFromQuizUri(quizUri, quiz);
+export function formatQuizLabelFullFromUri(quizUri: string, quiz?: any, courseId?: string) {
+  const meta = getQuizMetaFromQuizUri(quizUri, quiz, courseId);
 
   return [
     meta.courseAcronym,