From 67041a0f5d41ef6dfeae63f222a7f186fc73576b Mon Sep 17 00:00:00 2001
From: Jai-Marothiya <jaimarothiya48@gmail.com>
Date: Fri, 16 Aug 2024 12:13:52 +0530
Subject: [PATCH 1/2] Make project responsive to all screen sizes

---
 client/src/components/Auth/GoogleAuth.js      |  14 +-
 client/src/components/Auth/Login.js           |  75 +++-
 client/src/components/UserView/Dashboard.js   |  15 +-
 client/src/components/UserView/Footer.js      |  16 +-
 client/src/components/UserView/Navbar.js      | 323 ++++++++++++------
 .../src/components/UserView/ProblemsTable.js  |  20 +-
 client/src/components/UserView/ProgressBar.js |  16 +-
 .../UserView/SideBar/FilterSidebar.js         |  13 +-
 .../UserView/SideBar/PlatformFilter.js        |   2 +-
 .../components/UserView/SideBar/TagsFilter.js |   2 +-
 .../UserView/TableRow/PlatformLogo.js         |   2 +-
 .../components/UserView/TableRow/TableRow.js  | 237 +++++++++----
 client/src/components/icons/GoogleIcon.js     |   2 +-
 client/src/components/icons/Logo.js           |   4 +-
 14 files changed, 519 insertions(+), 222 deletions(-)

diff --git a/client/src/components/Auth/GoogleAuth.js b/client/src/components/Auth/GoogleAuth.js
index ed2f6ef..244040b 100644
--- a/client/src/components/Auth/GoogleAuth.js
+++ b/client/src/components/Auth/GoogleAuth.js
@@ -43,21 +43,21 @@ const GoogleAuth = ({ loading, setLoading }) => {
   });
 
   return (
-    <Box sx={{ width: "fit-content" }}>
+    <Box sx={{ width: { xs: "auto", md: "fit-content" } }}>
       {loading ? (
         <Box
           sx={{
             mr: 2,
-            width: "518px",
-
+            width: { xs: "100%", md: "518px" },
             border: "0.5px solid rgba(0, 0, 0, 0.34)",
             borderRadius: "10px",
+            background: "#fff",
           }}
         >
           <Box
             sx={{
-              px: 4,
-              py: 3,
+              px: { xs: 3, sm: 4 },
+              py: { xs: 2, sm: 3 },
               display: "flex",
               "&:hover": {
                 cursor: "not-allowed",
@@ -72,9 +72,9 @@ const GoogleAuth = ({ loading, setLoading }) => {
                 width: "90%",
                 textAlign: "center",
                 fontFamily: "Jost, sans-serif",
-                fontSize: "25px",
+                fontSize: { xs: "16px", sm: "22px", md: "25px" },
                 fontWeight: "400",
-                lineHeight: "32.0px",
+                lineHeight: { xs: "20px", sm: "24px", md: "32.0px" },
                 letterSpacing: " 1px",
                 color: "rgba(0, 0, 0, 0.54)",
                 WebkitFontSmoothing: "antialiased", // Smooths font on Webkit browsers (Chrome, Safari)
diff --git a/client/src/components/Auth/Login.js b/client/src/components/Auth/Login.js
index 60c9448..7b54707 100644
--- a/client/src/components/Auth/Login.js
+++ b/client/src/components/Auth/Login.js
@@ -1,4 +1,4 @@
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
 import GoogleAuth from "./GoogleAuth";
 import ALogo from "../icons/ALogo";
@@ -8,6 +8,7 @@ import axios from "axios";
 import { endpoints } from "../../constants/endpoints";
 import LoaderDialog from "./LoaderDialog";
 import LoadingSkeleton from "./LoadingSkeleton";
+import Logo from "../icons/Logo";
 
 const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
   const {
@@ -18,6 +19,8 @@ const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
     userProblems,
     setUserProblems,
   } = useContext(DataContext);
+  const theme = useTheme();
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up("sm"));
 
   const navigate = useNavigate();
   useEffect(() => {
@@ -59,8 +62,10 @@ const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        height: "100%",
+        height: { xs: "100vh", sm: "100%" },
         width: "100%",
+        flexDirection: { xs: "column", sm: "row" }, // Stack column on small screens, row on larger screens
+        overflow: "hidden", // Ensures no overflow issues on smaller screens
       }}
     >
       {!refreshLoading ? (
@@ -69,28 +74,75 @@ const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
             component="img"
             src="SideImage.jpeg" // Update this path to your PNG file
             sx={{
-              width: "30%",
-              height: "100%",
+              width: { xs: "100%", sm: "30%" },
+              height: { xs: "30vh", sm: "100%" },
+              objectFit: "cover",
+              display: { xs: "none", sm: "block" },
             }}
           />
           <Box
             sx={{
-              width: "70%",
+              width: { xs: "100%", sm: "70%" },
               height: "100%",
               display: "flex",
               justifyContent: "center",
               alignItems: "center",
+              backgroundImage: {
+                xs: "linear-gradient(to bottom right, rgba(179, 203, 232, 0.25), rgba(156, 161, 186, 0.25))",
+                sm: "none",
+              },
+              backgroundSize: "cover",
+              backgroundPosition: "center",
             }}
           >
-            <Box sx={{ width: "40%", mb: 5 }}>
-              <ALogo width="70px" height="70px" />
-              <Box sx={{ width: "100%", mt: 5, mb: 5 }}>
+            <Box
+              sx={{
+                width: { xs: "100%", sm: "70%", lg: "50%", xlg: "40%" },
+                height: { xs: "100%", sm: "fit-content" },
+                background: { xs: "rgba(255, 255, 255, 0.4)", sm: "none" },
+                borderRadius: 2,
+                p: { xs: "0 24px", sm: "0 36px", md: 0 },
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                gap: 5,
+              }}
+            >
+              <Box
+                sx={{
+                  position: { xs: "absolute", sm: "relative" },
+                  top: { xs: "16px", sm: "0" },
+                }}
+              >
+                {isLargeScreen ? (
+                  <ALogo width="70px" height="70px" />
+                ) : (
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "flex-start",
+                      pb: 2,
+                      width: "100vw",
+                      mx: "-24px",
+
+                      borderBottom: "2px solid rgba(0, 0, 0, 0.28)",
+                    }}
+                  >
+                    <Logo pl="24px" />
+                  </Box>
+                )}
+              </Box>
+              <Box
+                sx={{
+                  width: "100%",
+                }}
+              >
                 <Typography
                   sx={{
                     fontFamily: "Jost, sans-serif",
-                    fontSize: "48px",
+                    fontSize: { xs: "32px", sm: "40px", md: "48px" }, // Responsive font size
                     fontWeight: "600",
-                    lineHeight: "60.0px",
+                    lineHeight: { xs: "40px", sm: "50px", md: "60px" }, // Responsive line height
                     letterSpacing: " -0.5px",
                     color: "rgba(0, 0, 0, 0.72)",
                     mb: 3,
@@ -101,7 +153,7 @@ const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
                 <Typography
                   sx={{
                     fontFamily: "Jost, sans-serif",
-                    fontSize: "20px",
+                    fontSize: { xs: "16px", sm: "18px", md: "20px" }, // Responsive font size
                     lineHeight: "32px",
                     fontWeight: "400",
                     letterSpacing: "-0px",
@@ -117,7 +169,6 @@ const Login = ({ loading, setLoading, refreshLoading, setRefreshLoading }) => {
           </Box>
         </>
       ) : (
-        // <LoaderDialog open={loading} />
         <LoadingSkeleton />
       )}
     </Box>
diff --git a/client/src/components/UserView/Dashboard.js b/client/src/components/UserView/Dashboard.js
index 25b55e4..9863a81 100644
--- a/client/src/components/UserView/Dashboard.js
+++ b/client/src/components/UserView/Dashboard.js
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import React, { useEffect } from "react";
 import Navbar from "./Navbar";
 import ProblemsTable from "./ProblemsTable";
@@ -10,25 +10,28 @@ const Dashboard = ({ setLoading }) => {
   useEffect(() => {
     setLoading(false);
   }, []);
+  const theme = useTheme();
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up("md"));
 
   return (
-    <Box>
+    <Box sx={{ height: "100%" }}>
       <Navbar />
-      <TopView />
+      {isLargeScreen && <TopView />}
       <Box
         sx={{
           maxWidth: "96%",
           minWidth: "1280",
-          pl: 6,
-          pr: 4,
+          pl: { xs: 2, sm: 3, md: 6 },
+          pr: { xs: 2, sm: 3, md: 4 },
           display: "flex",
           marginX: "auto",
           gap: 2,
           pb: 10,
+          pt: { xs: 6, md: 0 },
           justifyContent: "space-between",
         }}
       >
-        <FilterSidebar />
+        {isLargeScreen && <FilterSidebar />}
         <ProblemsTable />
       </Box>
       <Footer />
diff --git a/client/src/components/UserView/Footer.js b/client/src/components/UserView/Footer.js
index 018723c..e551b42 100644
--- a/client/src/components/UserView/Footer.js
+++ b/client/src/components/UserView/Footer.js
@@ -8,17 +8,20 @@ const Footer = () => {
       sx={{
         backgroundImage:
           "linear-gradient(to right, rgba(179, 203, 232, 0.25), rgba(156, 161, 186, 0.25))",
-        px: 3,
+        px: { xs: 0, md: 3 },
         pt: 3,
         pb: 3,
         position: "relative",
-        bottom: "0",
-        zIndex: "20",
+        bottom: 0,
+        maxWidth: "100%",
+        width: { xs: "100%", md: "auto" },
+        zIndex: 20,
       }}
     >
       <Box
         sx={{
           display: "flex",
+          flexDirection: { xs: "column", md: "row" }, // Stack elements on small screens
           justifyContent: "space-between",
           alignItems: "center",
           maxWidth: "96%",
@@ -31,12 +34,13 @@ const Footer = () => {
         <Typography
           sx={{
             fontFamily: "Jost, sans-serif",
-            fontSize: "18px",
+            fontSize: { xs: "14px", sm: "16px", md: "18px" }, // Responsive font size
             fontWeight: "400",
             lineHeight: "27.0px",
-            letterSpacing: " 0.5px",
+            letterSpacing: "0.5px",
             color: "rgba(0, 0, 0, 0.54)",
-            width: "fit-content",
+            textAlign: { xs: "center", md: "left" },
+            mt: { xs: 2, md: 0 }, // Margin top for small screens
           }}
         >
           Unlock your coding potential. Your journey to mastering algorithms
diff --git a/client/src/components/UserView/Navbar.js b/client/src/components/UserView/Navbar.js
index 74f8acb..fd77fe7 100644
--- a/client/src/components/UserView/Navbar.js
+++ b/client/src/components/UserView/Navbar.js
@@ -1,27 +1,67 @@
 import * as React from "react";
-import AppBar from "@mui/material/AppBar";
-import Box from "@mui/material/Box";
-import Toolbar from "@mui/material/Toolbar";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
-import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
-import MenuItem from "@mui/material/MenuItem";
+import {
+  AppBar,
+  Box,
+  Toolbar,
+  IconButton,
+  Avatar,
+  Menu,
+  MenuItem,
+  Typography,
+  Tooltip,
+  Drawer,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
 import Logo from "../icons/Logo.js";
 import { googleLogout } from "@react-oauth/google";
 import { useNavigate } from "react-router-dom";
 import { DataContext } from "../../context/DataProvider.js";
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import FilterSidebar from "./SideBar/FilterSidebar.js";
+import ProgressBar from "./ProgressBar.js";
 
 const adminSettings = ["Admin View", "User View", "Profile", "Logout"];
 const nonAdminSettings = ["Logout"];
 
 const Navbar = () => {
+  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);
   const [anchorElUser, setAnchorElUser] = React.useState(null);
   const navigate = useNavigate();
-  const { account, setIsAuthenticated, adminView, setAdminView } =
-    React.useContext(DataContext);
+  const {
+    account,
+    setIsAuthenticated,
+    adminView,
+    setAdminView,
+    problems,
+    userProblems,
+  } = React.useContext(DataContext);
+
+  const [count, setCount] = React.useState({ easy: 0, medium: 0, hard: 0 });
+
+  React.useEffect(() => {
+    const completedProblems = problems.filter((problem) => {
+      const userProblem =
+        userProblems &&
+        userProblems.find(
+          (up) => up.problem_id === problem.id && up.status === true
+        );
+      return userProblem ? true : false;
+    });
+    // Count the number of problems for each level
+    const { easy, medium, hard } = completedProblems.reduce(
+      (acc, problem) => {
+        if (problem.problem_level === "Easy") acc.easy += 1;
+        else if (problem.problem_level === "Medium") acc.medium += 1;
+        else if (problem.problem_level === "Hard") acc.hard += 1;
+        return acc;
+      },
+      { easy: 0, medium: 0, hard: 0 }
+    );
+
+    setCount({ easy, medium, hard });
+  }, [account, problems, userProblems]);
+
+  const drawerRef = React.useRef(null);
 
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget);
@@ -41,125 +81,202 @@ const Navbar = () => {
   const handleLogout = () => {
     // Remove the token from local storage
     localStorage.removeItem("refreshToken");
-
     googleLogout();
     setIsAuthenticated(false);
     navigate("/auth");
   };
 
+  // Close the drawer when clicking outside of it
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (drawerRef.current && !drawerRef.current.contains(event.target)) {
+        setMobileMenuOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Toggle mobile menu open/close
+  const toggleMobileMenu = (open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+    setMobileMenuOpen(open);
+  };
+
   return (
     <AppBar
-      position="static"
+      position="sticky"
       sx={{
         background: "#fff",
         boxShadow: "none",
         borderBottom: "2px solid rgba(0, 0, 0, 0.28)",
-        pl: 6,
-        pr: 4,
-        position: "sticky",
+        pl: { xs: 2, sm: 4, md: 6 }, // Responsive padding
+        pr: { xs: 3, sm: 4, md: 6 }, // Responsive padding
         top: "0",
         zIndex: "20",
       }}
     >
-      <Box maxWidth="100%">
-        <Toolbar
-          disableGutters
-          sx={{
-            display: "flex",
-            justifyContent: "space-between",
-            padding: 0,
-          }}
-        >
-          <Box sx={{ display: "flex", alignItems: "center" }}>
-            <Logo />
-          </Box>
-
-          <Box
-            sx={{
-              flexGrow: 0,
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
+      <Toolbar
+        disableGutters
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+          padding: 0,
+        }}
+      >
+        {/* Hamburger menu for mobile */}
+        <Box sx={{ display: { xs: "flex", md: "none" }, alignItems: "center" }}>
+          <IconButton
+            size="large"
+            aria-label="open drawer"
+            onClick={toggleMobileMenu(true)}
+            color="default"
           >
-            <Tooltip>
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
-                <Avatar
-                  alt={account?.name}
-                  src={account?.photo}
-                  sx={{ height: "32px", width: "32px" }}
-                >
-                  <AccountCircleIcon
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      background: "#fff",
-                      fill: "#3246DE",
-                    }}
-                  />
-                </Avatar>
-              </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: "45px" }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
+            <MenuIcon sx={{ fontSize: "28px" }} />
+          </IconButton>
+        </Box>
+
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          <Logo />
+        </Box>
+
+        {/* Drawer for mobile menu */}
+        <Drawer
+          anchor="left"
+          open={mobileMenuOpen}
+          onClose={toggleMobileMenu(false)}
+        >
+          <Box ref={drawerRef} sx={{ width: 300, px: 2 }} role="presentation">
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                height: "180px",
               }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
             >
-              {(account.is_admin ? adminSettings : nonAdminSettings).map(
-                (setting) =>
-                  (adminView && setting === "Admin View") ||
-                  (!adminView && setting === "User View") ? (
-                    <></>
-                  ) : (
-                    <MenuItem
-                      key={setting}
-                      onClick={() => handleCloseUserMenu(setting)}
-                      sx={{ py: "4px" }}
-                    >
-                      <Typography
-                        textAlign="center"
-                        sx={{
-                          fontFamily: "Jost, sans-serif",
-                          font: 2,
-                          lineHeight: "28px",
-                          color: "rgba(0, 0, 0, 0.87)",
-                        }}
-                      >
-                        {setting}
-                      </Typography>
-                    </MenuItem>
-                  )
-              )}
-            </Menu>
+              <ProgressBar
+                total={problems && problems.length}
+                easy={count.easy}
+                medium={count.medium}
+                hard={count.hard}
+                height="150px"
+                width="300px"
+              />
+            </Box>
             <Typography
-              variant="h6"
-              noWrap
               sx={{
-                ml: 1,
-                display: { xs: "none", md: "flex" },
                 fontFamily: "Jost, sans-serif",
-                font: 2,
+                fontSize: "20px",
                 color: "rgba(0, 0, 0, 0.87)",
-                textDecoration: "none",
+                pt: "24px",
+                fontWeight: "400",
+                lineHeight: "22.0px",
               }}
             >
-              {account.name}
+              Filters
             </Typography>
+            <FilterSidebar />
           </Box>
-        </Toolbar>
-      </Box>
+        </Drawer>
+
+        {/* User avatar and name */}
+        <Box
+          sx={{
+            flexGrow: 0,
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          <Tooltip>
+            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
+              <Avatar
+                alt={account?.name}
+                src={account?.photo}
+                sx={{ height: "32px", width: "32px" }}
+              >
+                <AccountCircleIcon
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    background: "#fff",
+                    fill: "#3246DE",
+                  }}
+                />
+              </Avatar>
+            </IconButton>
+          </Tooltip>
+
+          {/* Hide user name on mobile */}
+          <Typography
+            variant="h6"
+            noWrap
+            sx={{
+              ml: 1,
+              display: { xs: "none", md: "flex" }, // Hide on mobile
+              fontFamily: "Jost, sans-serif",
+              font: 2,
+              color: "rgba(0, 0, 0, 0.87)",
+              textDecoration: "none",
+            }}
+          >
+            {account.name}
+          </Typography>
+        </Box>
+
+        {/* User settings menu */}
+        <Menu
+          sx={{ mt: "45px" }}
+          id="menu-appbar"
+          anchorEl={anchorElUser}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          keepMounted
+          transformOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          open={Boolean(anchorElUser)}
+          onClose={handleCloseUserMenu}
+        >
+          {(account.is_admin ? adminSettings : nonAdminSettings).map(
+            (setting) =>
+              (adminView && setting === "Admin View") ||
+              (!adminView && setting === "User View") ? (
+                <></>
+              ) : (
+                <MenuItem
+                  key={setting}
+                  onClick={() => handleCloseUserMenu(setting)}
+                  sx={{ py: "4px" }}
+                >
+                  <Typography
+                    textAlign="center"
+                    sx={{
+                      fontFamily: "Jost, sans-serif",
+                      font: 2,
+                      lineHeight: "28px",
+                      color: "rgba(0, 0, 0, 0.87)",
+                    }}
+                  >
+                    {setting}
+                  </Typography>
+                </MenuItem>
+              )
+          )}
+        </Menu>
+      </Toolbar>
     </AppBar>
   );
 };
+
 export default Navbar;
diff --git a/client/src/components/UserView/ProblemsTable.js b/client/src/components/UserView/ProblemsTable.js
index 5142fe6..2826f85 100644
--- a/client/src/components/UserView/ProblemsTable.js
+++ b/client/src/components/UserView/ProblemsTable.js
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import { DataContext } from "../../context/DataProvider";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import TableRow from "./TableRow/TableRow";
 import {
   ProblemLevel,
@@ -21,6 +21,8 @@ const ProblemsTable = () => {
     userProblems,
   } = useContext(DataContext);
   const [filteredProblems, setFilteredProblems] = useState(problems);
+  const theme = useTheme();
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up("md"));
 
   const filterProblem = (problem) => {
     let response = true;
@@ -90,16 +92,17 @@ const ProblemsTable = () => {
   return (
     <Box
       sx={{
-        maxWidth: "96%",
-        minWidth: "1280",
+        maxWidth: { xs: "100%", md: "96%" },
+        minWidth: { xs: "", md: "1280" },
         maxHeight: "950px",
         height: "100%",
         overflowY: "scroll",
-        width: "76%",
+        overflowX: "clip",
+        width: { xs: "100%", md: "76%" },
         boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
         borderRadius: 2,
         "&::-webkit-scrollbar": {
-          width: "8px",
+          width: problems.length !== 0 ? 0 : "8px",
         },
         "&::-webkit-scrollbar-thumb": {
           backgroundColor: "rgba(0, 0, 0, 0.18)",
@@ -111,7 +114,7 @@ const ProblemsTable = () => {
         },
       }}
     >
-      <Box sx={{ px: 3 }}>
+      <Box sx={{ px: { xs: 1, sm: 3 } }}>
         {problems &&
           problems.map((problem, index) =>
             filterProblem(problem) ? (
@@ -139,7 +142,10 @@ const ProblemsTable = () => {
             }}
           >
             {problems.length !== 0 && (
-              <NoProblemFound width="323px" height="240px" />
+              <NoProblemFound
+                width={isLargeScreen ? "250px" : "323px"}
+                height="240px"
+              />
             )}
             <Typography
               sx={{
diff --git a/client/src/components/UserView/ProgressBar.js b/client/src/components/UserView/ProgressBar.js
index a6af654..929d9ab 100644
--- a/client/src/components/UserView/ProgressBar.js
+++ b/client/src/components/UserView/ProgressBar.js
@@ -1,20 +1,28 @@
 import React from "react";
-import { Box, Typography, CircularProgress } from "@mui/material";
+import {
+  Box,
+  Typography,
+  CircularProgress,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 
 const ProgressBar = ({ total, easy, medium, hard }) => {
+  const theme = useTheme();
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up("md"));
   const easyPercent = (easy / total) * 100;
   const mediumPercent = (medium / total) * 100;
   const hardPercent = (hard / total) * 100;
-  const size = 200;
+  const size = isLargeScreen ? 200 : 150;
   const thickness = 5;
 
   return (
     <Box
       sx={{
         display: "flex",
-        maxWidth: "200px",
+        maxWidth: { xs: "150px", md: "200px" },
         width: "100%",
-        mr: "100px",
+        mr: { xs: "0", md: "100px" },
         justifyContent: "space-between",
       }}
     >
diff --git a/client/src/components/UserView/SideBar/FilterSidebar.js b/client/src/components/UserView/SideBar/FilterSidebar.js
index 7f4966e..09aa64a 100644
--- a/client/src/components/UserView/SideBar/FilterSidebar.js
+++ b/client/src/components/UserView/SideBar/FilterSidebar.js
@@ -9,17 +9,20 @@ const FilterSidebar = () => {
   return (
     <Box
       sx={{
-        maxWidth: "96%",
+        maxWidth: { xs: "100%", md: "96%" },
         minWidth: "1280",
         maxHeight: "950px",
         height: "100%",
         overflowY: "scroll",
-        width: "20%",
-        boxShadow: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
+        width: { xs: "100%", md: "20%" },
+        boxShadow: {
+          xs: "none",
+          md: "rgba(100, 100, 111, 0.2) 0px 7px 29px 0px",
+        },
         borderRadius: 2,
-        paddingX: 3,
+        paddingX: { xs: 0, md: 3 },
         "&::-webkit-scrollbar": {
-          width: "8px",
+          width: 0,
         },
         "&::-webkit-scrollbar-thumb": {
           backgroundColor: "rgba(0, 0, 0, 0.18)",
diff --git a/client/src/components/UserView/SideBar/PlatformFilter.js b/client/src/components/UserView/SideBar/PlatformFilter.js
index 794d1ec..7e458a6 100644
--- a/client/src/components/UserView/SideBar/PlatformFilter.js
+++ b/client/src/components/UserView/SideBar/PlatformFilter.js
@@ -38,7 +38,7 @@ const PlatformFilter = () => {
   return (
     <Box
       sx={{
-        width: "93%",
+        width: { xs: "100%", md: "93%" },
         borderBottom: "1px solid #D9D9D9",
         py: 4.5,
         display: "flex",
diff --git a/client/src/components/UserView/SideBar/TagsFilter.js b/client/src/components/UserView/SideBar/TagsFilter.js
index 410497b..599e3df 100644
--- a/client/src/components/UserView/SideBar/TagsFilter.js
+++ b/client/src/components/UserView/SideBar/TagsFilter.js
@@ -94,7 +94,7 @@ const TagsFilter = () => {
           maxHeight: "230px",
           overflowY: "scroll",
           "&::-webkit-scrollbar": {
-            width: "6px",
+            width: { xs: 0, md: "6px" },
           },
           "&::-webkit-scrollbar-thumb": {
             backgroundColor: "rgba(0, 0, 0, 0.18)",
diff --git a/client/src/components/UserView/TableRow/PlatformLogo.js b/client/src/components/UserView/TableRow/PlatformLogo.js
index e08f73b..647ec3e 100644
--- a/client/src/components/UserView/TableRow/PlatformLogo.js
+++ b/client/src/components/UserView/TableRow/PlatformLogo.js
@@ -11,7 +11,7 @@ import HackerRank from "../../icons/HackerRank";
 
 const PlatformLogo = ({ Platform, width, height }) => {
   return (
-    <Box sx={{ mr: 2 }}>
+    <Box sx={{ mr: { xs: 1, sm: 2 } }}>
       {Platform === ProblemPlatforms.GFG ? (
         <Box sx={{ display: "flex", alignItems: "center" }}>
           <GFG width={width} height={height} />
diff --git a/client/src/components/UserView/TableRow/TableRow.js b/client/src/components/UserView/TableRow/TableRow.js
index f153b84..1829eb1 100644
--- a/client/src/components/UserView/TableRow/TableRow.js
+++ b/client/src/components/UserView/TableRow/TableRow.js
@@ -5,6 +5,7 @@ import {
   Tooltip,
   Typography,
   useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import React, { useContext, useEffect, useState } from "react";
 import Tag from "./Tag";
@@ -18,6 +19,11 @@ import Tick from "../../icons/Tick";
 import AddNoteDialog from "./AddNoteDialog";
 import EditProblemDialog from "./EditProblemDialog";
 import StarIcon from "../../icons/StarIcon";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import Checkbox from "@mui/material/Checkbox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import EditIcon from "@mui/icons-material/Edit";
 
 const TableRow = ({ last, problem, note }) => {
   const { account, adminView, userProblems, tags, setUserProblems } =
@@ -46,7 +52,9 @@ const TableRow = ({ last, problem, note }) => {
     return foundProblem ? foundProblem.stared : false;
   });
 
+  const theme = useTheme();
   const isSmallScreen = useMediaQuery("(max-width:1280px)");
+  const isExtraSmallScreen = useMediaQuery("(max-width:600px)");
 
   const updateStatus = async () => {
     setLoading(true);
@@ -128,8 +136,8 @@ const TableRow = ({ last, problem, note }) => {
       <Box
         sx={{
           borderBottom: last ? "none" : "2px solid rgba(221, 228, 252, 1)",
-          paddingX: 2,
-          paddingY: 3,
+          paddingX: { xs: 1, sm: 2 },
+          paddingY: { xs: 2, sm: 3 },
           display: "flex",
           flexDirection: "column",
           gap: "8px",
@@ -140,35 +148,44 @@ const TableRow = ({ last, problem, note }) => {
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
+            gap: isSmallScreen ? "8px" : "16px",
           }}
         >
           <Box
             sx={{
               display: "flex",
               alignItems: "center",
+              gap: { xs: "8px", md: "16px" },
             }}
           >
             <PlatformLogo Platform={platform} width="44px" height="44px" />
             <Tooltip
               title={
                 (isSmallScreen && problem_desc.length > 25) ||
-                problem_desc.length >= 40
-                  ? problem_desc
-                  : ""
+                ((problem_desc.length >= isExtraSmallScreen || isSmallScreen) &&
+                  problem_desc)
               }
+              disableHoverListener={isSmallScreen} // Disable hover on small screens
+              disableFocusListener={isSmallScreen} // Disable focus trigger on small screens
+              disableTouchListener={!isSmallScreen}
             >
               <Typography
                 sx={{
                   color: "rgba(0, 0, 0, 0.87)",
                   fontFamily: "Jost, sans-serif",
-                  fontSize: "20px",
+                  fontSize: { xs: "16px", md: "20px" }, // Responsive font size
                   fontWeight: "400",
                   lineHeight: "32.0px",
                   letterSpacing: "0px",
                   textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
                 }}
               >
-                {truncateText(problem_desc, isSmallScreen ? 25 : 40)}
+                {truncateText(
+                  problem_desc,
+                  isExtraSmallScreen ? 20 : isSmallScreen ? 25 : 40
+                )}
               </Typography>
             </Tooltip>
           </Box>
@@ -176,11 +193,39 @@ const TableRow = ({ last, problem, note }) => {
             sx={{
               display: "flex",
               alignItems: "center",
-              gap: isSmallScreen ? "16px" : "24px",
+              gap: { xs: "8px", md: "16px" },
             }}
           >
             {!adminView && (
               <>
+                <Tooltip title="Mark Completed">
+                  <Checkbox
+                    checked={isCompleted}
+                    onChange={updateStatus} // Use onChange for handling the state change
+                    icon={
+                      <CheckBoxOutlineBlankIcon
+                        sx={{ fontSize: "28px", color: "#415DDD" }}
+                      />
+                    } // Default icon (unchecked)
+                    checkedIcon={
+                      <CheckBoxIcon
+                        sx={{ fontSize: "28px", color: "#415DDD" }}
+                      />
+                    } // Checked icon
+                    sx={{
+                      padding: "0",
+                      width: "28px",
+                      height: "28px",
+                      display: {
+                        xs: "block",
+                        sm: "none",
+                        md: "block",
+                        lg: "none",
+                      },
+                    }} // Custom sizing
+                  />
+                </Tooltip>
+
                 <Typography
                   sx={{
                     color: "rgba(71, 100, 234, 1)",
@@ -189,7 +234,8 @@ const TableRow = ({ last, problem, note }) => {
                     fontWeight: "400",
                     lineHeight: "20.0px",
                     letterSpacing: "0px",
-                    width: "130px",
+                    width: isSmallScreen ? "100%" : "130px",
+                    paddingX: { xs: "12px", md: 0 },
                     height: "40px",
                     "&:hover": {
                       background: "#F5F7FF",
@@ -199,6 +245,12 @@ const TableRow = ({ last, problem, note }) => {
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
+                    display: {
+                      xs: "none",
+                      sm: "flex",
+                      md: "none",
+                      lg: "flex",
+                    },
                   }}
                   onClick={updateStatus}
                 >
@@ -212,65 +264,110 @@ const TableRow = ({ last, problem, note }) => {
                     </>
                   )}
                 </Typography>
-                <Box
-                  sx={{ p: "8px", "&:hover": { cursor: "pointer" } }}
-                  onClick={updateStaredStatus}
-                >
-                  <StarIcon
-                    width="23px"
-                    height="23px"
-                    fill={isStared ? "#415DDD" : ""}
-                  />
-                </Box>
+
+                <Tooltip title="Mark Problem Stared">
+                  <Box
+                    sx={{
+                      p: "8px",
+                      "&:hover": { cursor: "pointer" },
+                      display: { xs: "none", md: "block" },
+                    }}
+                    onClick={updateStaredStatus}
+                  >
+                    <StarIcon
+                      width="23px"
+                      height="23px"
+                      fill={isStared ? "#415DDD" : ""}
+                    />
+                  </Box>
+                </Tooltip>
               </>
             )}
             {adminView ? (
-              <Button
-                sx={{
-                  paddingLeft: 2,
-                  paddingY: 1.5,
-                  height: "40px",
-                  background: "rgba(65, 93, 221, 1)",
-                  "&:hover": {
-                    background: "#1E3DCE",
-                  },
-                  color: "#fff",
-                  fontFamily: "Jost, sans-serif",
-                  fontSize: "16px",
-                  fontWeight: "500",
-                  borderRadius: "4px",
-                  textTransform: "none",
-                  lineHeight: "16px",
-                }}
-                onClick={() => setToggleEdit(true)}
-              >
-                Edit Problem
-              </Button>
+              isExtraSmallScreen ? (
+                <Tooltip title="Edit Problem">
+                  <EditIcon
+                    sx={{ width: "28px", height: "28px", fill: "#415DDD" }}
+                    onClick={() => setToggleEdit(true)}
+                  />
+                </Tooltip>
+              ) : (
+                <Button
+                  sx={{
+                    paddingX: 2,
+                    paddingY: 1.5,
+                    height: "40px",
+                    background: "rgba(65, 93, 221, 1)",
+                    "&:hover": {
+                      background: "#1E3DCE",
+                    },
+                    color: "#fff",
+                    fontFamily: "Jost, sans-serif",
+                    fontSize: "16px",
+                    fontWeight: "500",
+                    borderRadius: "4px",
+                    textTransform: "none",
+                    lineHeight: "16px",
+                    flex: 1,
+                  }}
+                  onClick={() => setToggleEdit(true)}
+                >
+                  Edit Problem
+                </Button>
+              )
             ) : (
-              <Button
-                component="a"
-                href={problem_url}
-                target="_blank"
-                sx={{
-                  paddingX: 2,
-                  paddingY: 1.5,
-                  height: "40px",
-                  background: "rgba(65, 93, 221, 1)",
-                  "&:hover": {
-                    background: "#1E3DCE",
-                  },
-                  color: "#fff",
-                  fontFamily: "Jost, sans-serif",
-                  fontSize: "16px",
-                  fontWeight: "500",
-                  borderRadius: "4px",
-                  textTransform: "none",
-                  lineHeight: "16px",
-                }}
-              >
-                Solve Problem
-              </Button>
+              <>
+                <Button
+                  component="a"
+                  href={problem_url}
+                  target="_blank"
+                  sx={{
+                    paddingX: { lg: 1, xl: 2 },
+                    paddingY: { lg: 1, xl: 1.5 },
+                    height: "40px",
+                    background: "rgba(65, 93, 221, 1)",
+                    "&:hover": {
+                      background: "#1E3DCE",
+                    },
+                    color: "#fff",
+                    width: { xs: "100%", md: "130px", lg: "140px" },
+                    fontFamily: "Jost, sans-serif",
+                    fontSize: "16px",
+                    fontWeight: "500",
+                    borderRadius: "4px",
+                    textTransform: "none",
+                    lineHeight: "16px",
+                    display: {
+                      xs: "none",
+                      lg: "flex",
+                    },
+                  }}
+                >
+                  Solve Problem
+                </Button>
+
+                <Tooltip title="Try it out">
+                  <Box
+                    component="a"
+                    href={problem_url}
+                    target="_blank"
+                    sx={{
+                      width: "28px",
+                      height: "28px",
+                      display: {
+                        xs: "flex",
+                        lg: "none",
+                      },
+                    }}
+                  >
+                    <OpenInNewIcon
+                      sx={{ width: "28px", height: "28px", fill: "#415DDD" }}
+                    />
+                  </Box>
+                </Tooltip>
+              </>
             )}
+
             {!adminView && (
               <Tooltip title="Add notes for future">
                 <StickyNote2OutlinedIcon
@@ -279,6 +376,7 @@ const TableRow = ({ last, problem, note }) => {
                     paddingY: 1.5,
                     fontSize: "28px",
                     fill: "rgba(65, 93, 221, 1)",
+                    display: { xs: "none", md: "block" },
                     "&:hover": {
                       cursor: "pointer",
                     },
@@ -291,15 +389,22 @@ const TableRow = ({ last, problem, note }) => {
             )}
           </Box>
         </Box>
-        <Box sx={{ display: "flex", alignItems: "center" }}>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            overflowX: "auto",
+            gap: "8px",
+          }}
+        >
           <Level level={problem_level} />
           <Box
             sx={{
               display: "flex",
               alignItems: "center",
-              overflowX: "scroll",
+              overflowX: "auto",
               "&::-webkit-scrollbar": {
-                height: "6px",
+                height: { xs: 0, md: "6px" },
                 width: "20px",
               },
               "&::-webkit-scrollbar-thumb": {
diff --git a/client/src/components/icons/GoogleIcon.js b/client/src/components/icons/GoogleIcon.js
index ce5ba2e..f039cf8 100644
--- a/client/src/components/icons/GoogleIcon.js
+++ b/client/src/components/icons/GoogleIcon.js
@@ -5,7 +5,7 @@ const GoogleIcon = ({ width, login }) => {
   return (
     <SvgIcon
       sx={{
-        mr: 2,
+        mr: { xs: 0, sm: 2 },
         width,
         height: "80px",
         "&:hover": {
diff --git a/client/src/components/icons/Logo.js b/client/src/components/icons/Logo.js
index 996f329..50d99d6 100644
--- a/client/src/components/icons/Logo.js
+++ b/client/src/components/icons/Logo.js
@@ -1,9 +1,9 @@
 import { SvgIcon } from "@mui/material";
 import React from "react";
 
-const Logo = () => {
+const Logo = ({ pl = 0 }) => {
   return (
-    <SvgIcon sx={{ height: "32px", width: "128px" }}>
+    <SvgIcon sx={{ height: "32px", width: "128px", pl }}>
       <svg
         width="139"
         height="33"

From 8c55c981123208ffa7c979d20a393b12484e31d1 Mon Sep 17 00:00:00 2001
From: Jai-Marothiya <jaimarothiya48@gmail.com>
Date: Fri, 16 Aug 2024 12:57:16 +0530
Subject: [PATCH 2/2] fix footer issue when content is less

---
 client/src/components/UserView/Dashboard.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/UserView/Dashboard.js b/client/src/components/UserView/Dashboard.js
index 9863a81..b1bf0bc 100644
--- a/client/src/components/UserView/Dashboard.js
+++ b/client/src/components/UserView/Dashboard.js
@@ -29,6 +29,7 @@ const Dashboard = ({ setLoading }) => {
           pb: 10,
           pt: { xs: 6, md: 0 },
           justifyContent: "space-between",
+          minHeight: { xs: "65vh", sm: "70vh", md: "" },
         }}
       >
         {isLargeScreen && <FilterSidebar />}