Polish UI and make it more mobile friendly

Author: ankith26

frontend/src/components/Navbar.tsx

@@ -27,6 +27,7 @@ const Navbar: React.FC<{ isLoggedIn: boolean | null }> = ({ isLoggedIn }) => {
           justifyContent: isSmallScreen ? 'center' : 'space-between',
           alignItems: 'center',
           textAlign: isSmallScreen ? 'center' : 'left',
+          py: isSmallScreen ? 1 : 0,
         }}
       >
         <Typography
@@ -41,7 +42,7 @@ const Navbar: React.FC<{ isLoggedIn: boolean | null }> = ({ isLoggedIn }) => {
           📝 ReviewIIITH
         </Typography>
         {isLoggedIn ? (
-          <Box sx={{ display: 'flex', gap: 1 }}>
+          <Box sx={{ display: 'flex', gap: 0.5 }}>
             <Button
               color="inherit"
               component={Link}

frontend/src/components/Review.tsx

@@ -54,7 +54,7 @@ const Review: React.FC<{
       <Card
         variant="outlined"
         sx={{
-          margin: 2,
+          my: 2,
           backgroundColor: review.is_reviewer
             ? theme.palette.action.hover
             : theme.palette.background.paper,
@@ -99,7 +99,7 @@ const Review: React.FC<{
             </Typography>
           </Box>
           <Typography
-            variant="body1"
+            variant="body2"
             sx={{ marginTop: 1, whiteSpace: 'pre-line' }}
           >
             {review.content.replace(/\n{3,}/g, '\n\n')}

frontend/src/pages/Credits.tsx

@@ -19,7 +19,7 @@ const Credits: React.FC = () => {
         <Typography variant="h4" gutterBottom color="secondary">
           Idea Contributors
         </Typography>
-        <Typography paragraph color="text.secondary">
+        <Typography color="text.secondary">
           This project was inspired by some projects submitted during HackIIIT
           2024. We would like to acknowledge the following teams whose projects
           have inspired this portal:
@@ -44,7 +44,7 @@ const Credits: React.FC = () => {
         <Typography variant="h4" gutterBottom color="secondary">
           Code Contributors
         </Typography>
-        <Typography paragraph color="text.secondary">
+        <Typography color="text.secondary">
           The core implementation and development of this project were carried
           out by:
         </Typography>
@@ -59,7 +59,7 @@ const Credits: React.FC = () => {
             <ListItemText primary="Ankith Pai" />
           </ListItem>
         </List>
-        <Typography paragraph color="text.secondary">
+        <Typography color="text.secondary">
           We look forward to adding more contributors to this list as the
           project evolves!
         </Typography>
@@ -69,12 +69,12 @@ const Credits: React.FC = () => {
         <Typography variant="h4" gutterBottom color="secondary">
           Users and Beta Testers
         </Typography>
-        <Typography paragraph color="text.secondary">
+        <Typography color="text.secondary">
           A big thank you to all our beta testers who provided invaluable
           feedback and bug reports. Your efforts have greatly improved the
           quality of this platform.
         </Typography>
-        <Typography paragraph color="text.secondary">
+        <Typography color="text.secondary">
           Finally, to all our users: your feedback is what makes this platform
           better for everyone. Thank you for sharing your thoughts and reviews!
         </Typography>

frontend/src/pages/Home.tsx

@@ -8,10 +8,15 @@ const Home: React.FC<{ isLoggedIn: boolean | null }> = ({ isLoggedIn }) => {
       <Typography variant="h3" gutterBottom align="center" color="primary">
         🎓 Welcome to ReviewIIITH 👋
       </Typography>
-      <Typography variant="h6" gutterBottom align="center" sx={{ mb: 4 }}>
+      <Typography variant="h5" gutterBottom align="center" sx={{ mb: 4 }}>
         A reviews portal by students, for students 🧑‍🎓
       </Typography>
-      <Typography variant="h6" align="center" paragraph color="text.secondary">
+      <Typography
+        variant="h6"
+        gutterBottom
+        align="center"
+        color="text.secondary"
+      >
         Ever wished you had the inside scoop on a course before signing up for
         it? Confused on what research advisor to pick? 🤔 That&apos;s where this
         anonymous review portal comes in. Think of it as your go-to place for
@@ -20,7 +25,7 @@ const Home: React.FC<{ isLoggedIn: boolean | null }> = ({ isLoggedIn }) => {
         on things like how clear their lectures are, how tough the workload is,
         or whether the grading feels fair. 📝
       </Typography>
-      <Typography variant="h6" align="center" paragraph color="text.secondary">
+      <Typography variant="h6" align="center" color="text.secondary">
         The best part? 🌟 It&apos;s totally anonymous, so you can keep it real
         without worrying about any awkward run-ins. And it&apos;s super simple
         to use - just search by course or professor and see what others are

frontend/src/pages/Profs.tsx

@@ -66,10 +66,12 @@ const Profs: React.FC<{ profList: ProfType[] | undefined }> = ({
       </Box>
       {reviewProf ? (
         <ReviewBox
-          title={`${reviewProf.name} <${reviewProf.email}>`}
+          title={reviewProf.name}
           endpoint={`/members/reviews/${reviewProf.email}`}
           initExpanded={true}
-        />
+        >
+          {reviewProf.email}
+        </ReviewBox>
       ) : (
         <Typography
           variant="body2"

frontend/src/theme.tsx

@@ -1,6 +1,7 @@
 import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
+  spacing: 6,
   palette: {
     mode: 'dark',
     primary: {
@@ -20,9 +21,17 @@ const theme = createTheme({
   },
   typography: {
     fontFamily: "'Roboto', 'Arial', sans-serif",
-    h1: {
+    h3: {
       fontSize: '3rem',
-      fontWeight: 700,
+    },
+    h4: {
+      fontSize: '2rem',
+    },
+    h5: {
+      fontSize: '1.4rem',
+    },
+    h6: {
+      fontSize: '1.2rem',
     },
     h2: {
       fontSize: '2.5rem',