General UI improvements and polish

OSDG-IIITH · Dec 18, 2024 · 48336ce · 48336ce
1 parent 2330110
commit 48336ce
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 30 deletions.
diff --git a/frontend/src/components/Login.jsx b/frontend/src/components/Login.jsx
@@ -1,5 +1,5 @@
 import { Button, Box, Tooltip } from '@mui/material';
-import { do_login, do_logout } from '../api';
+import { do_login } from '../api';
 
 const LoginButton = ({ isLoggedIn }) => {
   // UI rendering
@@ -12,15 +12,18 @@ const LoginButton = ({ isLoggedIn }) => {
         gap: 2,
       }}
     >
-      <Tooltip title={isLoggedIn ? 'Logout with CAS' : 'Login with CAS'}>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={isLoggedIn ? do_logout : do_login}
-          sx={{ marginTop: 2, minWidth: 150, size: 'large' }}
-        >
-          {isLoggedIn ? 'Logout' : 'Login'}
-        </Button>
+      <Tooltip title={isLoggedIn ? 'You are logged in already' : 'Login with CAS'}>
+        <span>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={do_login}
+            sx={{ marginTop: 2, minWidth: 150, size: 'large' }}
+            disabled={isLoggedIn}
+          >
+            Login
+          </Button>
+        </span>
       </Tooltip>
     </Box>
   );

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -34,12 +34,11 @@ const Navbar = ({ isLoggedIn }) => {
           to="/"
           size="large"
           sx={{
-            flexGrow: 1,
             textDecoration: 'none',
             color: 'inherit',
           }}
         >
-          ReviewIIITH
+          📝 ReviewIIITH
         </Typography>
         {isLoggedIn ? (
           <Box sx={{ display: 'flex', gap: 1 }}>

diff --git a/frontend/src/components/Review.jsx b/frontend/src/components/Review.jsx
@@ -94,8 +94,8 @@ const Review = ({ review, endpoint, onUpdate }) => {
               {formattedDate}
             </Typography>
           </Box>
-          <Typography variant="body1" sx={{ marginTop: 1 }}>
-            {review.content}
+          <Typography variant="body1" sx={{ marginTop: 1, whiteSpace: 'pre-line' }}>
+            {review.content.replace(/\n{3,}/g, '\n\n')}  
           </Typography>
           <UpvoteDownvote
             review={review}

diff --git a/frontend/src/components/ReviewBox.jsx b/frontend/src/components/ReviewBox.jsx
@@ -37,6 +37,7 @@ const ReviewBox = ({ children, title, endpoint, initExpanded }) => {
     if (cache.current[endpoint]) {
       setReviewsList(cache.current[endpoint]);
     } else {
+      setReviewsList(null);  // show loading
       fetchReviews();
     }
   };

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -6,33 +6,33 @@ const Home = ({ isLoggedIn }) => {
   return (
     <Container sx={{ mt: 6, mb: 6, color: 'text.primary' }}>
       <Typography variant="h3" gutterBottom align="center" color="primary">
-        Welcome to ReviewIIITH
+        🎓 Welcome to ReviewIIITH 👋
       </Typography>
       <Typography variant="h6" gutterBottom align="center" sx={{ mb: 4 }}>
-        A reviews portal by students, for students
+        A reviews portal by students, for students 🧑‍🎓
       </Typography>
       <Typography variant="h6" align="center" paragraph 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's where this
+        it? Confused on what research advisor to pick? 🤔 That's where this
         anonymous review portal comes in. Think of it as your go-to place for
         real, no-fluff opinions from fellow students about classes and
         instructors. Here's the deal: you can rate professors and courses on
         things like how clear their lectures are, how tough the workload is, or
-        whether the grading feels fair.
+        whether the grading feels fair. 📝
       </Typography>
       <Typography variant="h6" align="center" paragraph color="text.secondary">
-        The best part? It's totally anonymous, so you can keep it real without
-        worrying about any awkward run-ins. And it's super simple to use - just
+        The best part? 🌟 It's totally anonymous, so you can keep it real without
+        worrying about any awkward run-ins.  And it's super simple to use - just
         search by course or professor and see what others are saying. So, if
         you've got thoughts, share them! And if you're curious about that one
-        class everyone's whispering about, this is your spot to find out.
+        class everyone's whispering about, this is your spot to find out. 🚀
       </Typography>
 
       <Box sx={{ my: 6 }}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={6} name="privacy-policy">
             <Typography variant="h4" color="secondary" sx={{ mb: 4 }}>
-              Privacy Policy
+              🔐 Privacy Policy
             </Typography>
             <Typography variant="body1" color="text.secondary" gutterBottom>
               To ensure that this platform is only accessible to students of
@@ -53,13 +53,8 @@ const Home = ({ isLoggedIn }) => {
             </Typography>
           </Grid>
           <Grid item xs={12} md={6} name="tos">
-            <Typography
-              variant="h4"
-              gutterBottom
-              color="secondary"
-              sx={{ mb: 4 }}
-            >
-              Terms of Use
+            <Typography variant="h4" gutterBottom color="secondary" sx={{ mb: 4 }}>
+              📜 Terms of Use
             </Typography>
             <Typography variant="body1" color="text.secondary" gutterBottom>
               By using this platform, you agree to share honest and constructive
@@ -80,7 +75,16 @@ const Home = ({ isLoggedIn }) => {
           </Grid>
         </Grid>
       </Box>
-      <LoginButton isLoggedIn={isLoggedIn} />
+
+      <Box sx={{ textAlign: 'center', mt: 6 }}>
+        <Typography variant="h5" gutterBottom>
+          Ready to get started? ✨
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          Join the conversation now! 🤝
+        </Typography>
+        <LoginButton isLoggedIn={isLoggedIn} />
+      </Box>
     </Container>
   );
 };