Merge pull request #14 from Jai-Marothiya/fix/screen-responsive

Make project responsive to all screen sizes
Jai-Marothiya · Aug 16, 2024 · 4540d22 · 4540d22
2 parents 722acb0 + 8c55c98
commit 4540d22
Show file tree

Hide file tree

Showing 14 changed files with 520 additions and 222 deletions.
diff --git 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
@@ -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
@@ -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,29 @@ 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",
+          minHeight: { xs: "65vh", sm: "70vh", md: "" },
         }}
       >
-        <FilterSidebar />
+        {isLargeScreen && <FilterSidebar />}
         <ProblemsTable />
       </Box>
       <Footer />

diff --git 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