lokeshwar777 · lokeshwar777 · Mar 7, 2024 · Mar 7, 2024 · Mar 23, 2024
diff --git a/index.html b/index.html
@@ -2,11 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Codelabz</title>
   </head>
-
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>

diff --git a/less.config.js b/less.config.js
@@ -1,4 +1,4 @@
-const lessOptions = {
+export const lessOptions = {
   lessOptions: {
     javascriptEnabled: true,
     modifyVars: {
@@ -10,7 +10,3 @@ const lessOptions = {
     }
   }
 };
-
-module.exports = {
-  lessOptions
-};
diff --git a/src/components/AuthPage/smButton/smButtons.jsx b/src/components/AuthPage/smButton/smButtons.jsx
@@ -26,11 +26,11 @@ const SmButtons = () => {
       }}
     >
       <Grid item>
-        <IconButton className={classes.button}>
-          <Icon
-            onClick={() => signInWithGoogle()(firebase, dispatch)}
-            className={classes.google}
-          >
+        <IconButton
+          className={classes.button}
+          onClick={() => signInWithGoogle()(firebase, dispatch)}
+        >
+          <Icon className={classes.google}>
             <img className={classes.imageIcon} src={GoogleImg} alt="google" />
           </Icon>
         </IconButton>

diff --git a/src/components/CardTabs/Events/index.jsx b/src/components/CardTabs/Events/index.jsx
@@ -37,14 +37,14 @@ const EventsCard = props => {
     <div className={classes.root}>
       <Card
         className={(classes.card, classes.root)}
-        data-testId="upcomingEventCard"
+        data-testid="upcomingEventCard"
       >
         <CardContent
           style={{
             width: "100%"
           }}
         >
-          <Typography variant="h5" component="div" gutterBottom>
+          <Typography variant="h5" component="div" gutterbottom="true">
             {props.title}
           </Typography>
           {props.events.map(function (event, index) {
@@ -54,23 +54,23 @@ const EventsCard = props => {
                 container
                 direction="row"
                 spacing={2}
-                data-testId={index == 0 ? "upEventBox" : ""}
+                data-testid={index == 0 ? "upEventBox" : ""}
               >
                 <Grid item xs={3}>
                   <img
                     src={event.img[0]}
                     className={classes.logo}
-                    data-testId={index == 0 ? "upEventImg" : ""}
+                    data-testid={index == 0 ? "upEventImg" : ""}
                   />
                 </Grid>
 
                 <Grid item xs={9}>
-                  <Box data-testId={index == 0 ? "upEventName" : ""}>
+                  <Box data-testid={index == 0 ? "upEventName" : ""}>
                     <Typography>{event.name}</Typography>
                   </Box>
                   <Box
                     sx={{ fontWeight: 400, fontSize: "0.8rem" }}
-                    data-testId={index == 0 ? "upEventDate" : ""}
+                    data-testid={index == 0 ? "upEventDate" : ""}
                   >
                     <Typography>{event.date}</Typography>
                   </Box>

diff --git a/src/components/CardTabs/Tags/index.jsx b/src/components/CardTabs/Tags/index.jsx
@@ -41,14 +41,14 @@ const TagCard = props => {
   const classes = useStyles();
 
   return (
-    <div className={classes.root} data-testId="TagsCard">
+    <div className={classes.root} data-testid="TagsCard">
       <Card sx={{ minWidth: 275 }}>
         <CardContent>
           <Typography
             variant="h6"
             component="div"
             gutterBottom
-            data-testId="TagsCardTitle"
+            data-testid="TagsCardTitle"
           >
             Popular Tags
           </Typography>
@@ -61,7 +61,7 @@ const TagCard = props => {
                   label={tag}
                   id={index}
                   className={classes.chip}
-                  data-testId={index === 0 ? "TagsChip" : ""}
+                  data-testid={index === 0 ? "TagsChip" : ""}
                 />
               );
             })}

diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx
@@ -15,7 +15,7 @@ const UserElement = ({ user, index, useStyles }) => {
         key: "user" + { index },
         mb: 1.5
       }}
-      gutterBottom
+      gutterbottom="true"
     >
       <Box
         sx={{

diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx
@@ -198,14 +198,20 @@ function HomePage({ background = "white", textColor = "black" }) {
     <Card
       className={classes.wrapper}
       style={{ background: background }}
-      data-testId="homepage"
+      data-testid="homepage"
     >
       <Grid container justifyContent="center" className={classes.contentPart}>
-        <Grid item xs={2} className={classes.sideBody}>
+        {/* <Grid container item={windowSize.width > 750 ? true : undefined} xs={2} className={classes.sideBody}> */}
+        <Grid
+          container
+          item={windowSize.width > 750 ? true : undefined}
+          xs={windowSize.width > 750 ? 2 : undefined}
+          className={classes.sideBody}
+        >
           {windowSize.width > 750 && (
             <Grid
-              item
               container
+              item={windowSize.width > 750 ? true : undefined}
               className={classes.leftSideCard}
               direction="column"
               style={{
@@ -216,17 +222,22 @@ function HomePage({ background = "white", textColor = "black" }) {
                 boxShadow: "none"
               }}
             >
-              <Grid item className={classes.outerSideBar}>
+              <Grid
+                container
+                item={windowSize.width > 750 ? true : undefined}
+                className={classes.outerSideBar}
+              >
                 <SideBar open={openMenu} toggleSlider={toggleSlider} />
               </Grid>
             </Grid>
           )}
         </Grid>
         <Grid
-          item
+          container
+          item={windowSize.width > 750 ? true : undefined}
           className={classes.mainBody}
-          data-testId="homepageMainBody"
-          xs={6}
+          data-testid="homepageMainBody"
+          xs={windowSize.width > 750 ? 6 : undefined}
         >
           <NewCodelabz setVisibleModal={setVisibleModal} />
           <NewTutorial
@@ -236,7 +247,11 @@ function HomePage({ background = "white", textColor = "black" }) {
           <Card className={classes.card}>
             <Activity />
           </Card>
-          <Box item sx={{ display: { md: "none" } }}>
+          <Box
+            container
+            item={windowSize.width > 750 ? true : undefined}
+            sx={{ display: { md: "none" } }}
+          >
             <TagCard tags={tags} />
           </Box>
           {tutorials.map(tutorial => {
@@ -257,7 +272,7 @@ function HomePage({ background = "white", textColor = "black" }) {
               <Tabs
                 value={selectedTab}
                 onChange={handleTabChange}
-                scrollButtons="on"
+                scrollButtons="auto"
                 indicatorColor="primary"
                 textColor="primary"
                 aria-label="scrollable force tabs example"
@@ -303,18 +318,27 @@ function HomePage({ background = "white", textColor = "black" }) {
           </Box>
         </Grid>
 
-        <Grid item className={classes.sideBody} xs={3}>
+        <Grid
+          container
+          item={windowSize.width > 750 ? true : undefined}
+          className={classes.sideBody}
+          xs={windowSize.width > 750 ? 3 : undefined}
+        >
           <Grid
-            item
             container
+            item={windowSize.width > 750 ? true : undefined}
             alignContent="center"
             direction="column"
             style={{
               width: "100%"
             }}
-            data-testId="homepageTagSidebar"
+            data-testid="homepageTagSidebar"
           >
-            <Grid item style={{ minWidth: "100%" }}>
+            <Grid
+              container
+              item={windowSize.width > 750 ? true : undefined}
+              style={{ minWidth: "100%" }}
+            >
               <TagCard tags={tags} />
             </Grid>
           </Grid>
@@ -325,9 +349,13 @@ function HomePage({ background = "white", textColor = "black" }) {
             style={{
               width: "100%"
             }}
-            data-testId="homepageUpcomingEvents"
+            data-testid="homepageUpcomingEvents"
           >
-            <Grid item style={{ minWidth: "100%" }}>
+            <Grid
+              container
+              item={windowSize.width > 750 ? true : undefined}
+              style={{ minWidth: "100%" }}
+            >
               <EventsCard title={"Upcoming Events"} events={upcomingEvents} />
             </Grid>
           </Grid>
@@ -338,9 +366,13 @@ function HomePage({ background = "white", textColor = "black" }) {
             style={{
               width: "100%"
             }}
-            data-testId="homepageUsersToFollow"
+            data-testid="homepageUsersToFollow"
           >
-            <Grid item style={{ minWidth: "100%" }}>
+            <Grid
+              container
+              item={windowSize.width > 750 ? true : undefined}
+              style={{ minWidth: "100%" }}
+            >
               <UserCard title={"Who to Follow"} users={usersToFollow} />
             </Grid>
           </Grid>
@@ -356,9 +388,13 @@ function HomePage({ background = "white", textColor = "black" }) {
               border: "none",
               boxShadow: "none"
             }}
-            data-testId="homepageContributors"
+            data-testid="homepageContributors"
           >
-            <Grid item style={{ minWidth: "100%" }}>
+            <Grid
+              container
+              item={windowSize.width > 750 ? true : undefined}
+              style={{ minWidth: "100%" }}
+            >
               <UserCard title={"Contributors"} users={contributors} />
             </Grid>
           </Grid>
@@ -370,9 +406,13 @@ function HomePage({ background = "white", textColor = "black" }) {
             style={{
               width: "100%"
             }}
-            data-testId="homepagePopularEventSidebar"
+            data-testid="homepagePopularEventSidebar"
           >
-            <Grid item style={{ minWidth: "100%" }}>
+            <Grid
+              container
+              item={windowSize.width > 750 ? true : undefined}
+              style={{ minWidth: "100%" }}
+            >
               <EventsCard title={"Popular Events"} events={upcomingEvents} />
             </Grid>
           </Grid>

diff --git a/src/components/NavBar/new/MiniNavbar/index.jsx b/src/components/NavBar/new/MiniNavbar/index.jsx
@@ -131,13 +131,12 @@ function MiniNavbar() {
               <BrandName />
             </Grid>
             <Grid item className={classes.hamburger}>
-              <IconButton>
-                {window.innerWidth > 960 && (
-                  <MenuIcon onClick={() => toggleDrawer(true)} />
-                )}
-                {window.innerWidth <= 960 && (
-                  <MenuIcon onClick={() => toggleSlider()} />
-                )}
+              <IconButton
+                onClick={() =>
+                  window.innerWidth > 960 ? toggleDrawer(true) : toggleSlider()
+                }
+              >
+                <MenuIcon />
               </IconButton>
             </Grid>
           </Grid>

diff --git a/src/components/SideBar/sidelist.jsx b/src/components/SideBar/sidelist.jsx
@@ -91,7 +91,7 @@ const SideList = ({
         {menuItems.map(function (item, index) {
           return (
             <div
-              key="menu-items"
+              key={`menu-item-${index}`}
               style={
                 item.link == location.pathname
                   ? { background: "#d9f1fc", borderRadius: "100px" }

diff --git a/src/components/Topbar/Activity/index.jsx b/src/components/Topbar/Activity/index.jsx
@@ -42,7 +42,7 @@ function Activity() {
 
   return (
     <React.Fragment>
-      <Grid container data-testId="activityCard">
+      <Grid container data-testid="activityCard">
         <div className={classes.root}>
           <Grid item>
             <Typography variant="h6">Activity</Typography>

diff --git a/src/components/Topbar/NewCodelabz/index.jsx b/src/components/Topbar/NewCodelabz/index.jsx
@@ -34,9 +34,9 @@ function NewCodelabz({ setVisibleModal }) {
 
   return (
     <React.Fragment>
-      <Paper className={classes.root} data-testId="homepageNewCodelabz">
+      <Paper className={classes.root} data-testid="homepageNewCodelabz">
         <Grid
-          spacing={0}
+          container spacing={0}
           justifyContent="flex-start"
           alignItems="center"
           className={classes.flex}
@@ -46,7 +46,7 @@ function NewCodelabz({ setVisibleModal }) {
             className={classes.iconDiv}
             justifyContent="center"
             alignContent="center"
-            data-testId="NewCodelabzBtn"
+            data-testid="NewCodelabzBtn"
             onClick={() => setVisibleModal(true)}
           >
             <AddBoxRoundedIcon color="primary" fontSize="large" />

diff --git a/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx b/src/components/Tutorials/MyTutorials/BaseTutorialsComponent/TutorialCard.jsx
@@ -12,7 +12,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 const TutorialCard = ({
-  tutorialData: { tutorial_id, title, summary, icon, owner },
+  tutorialData: { tutorial_id, title, summary, featured_image, owner },
   loading
 }) => {
   return (
@@ -22,7 +22,7 @@ const TutorialCard = ({
           component="img"
           alt="Tutorial icon"
           height="140"
-          image={icon ? icon : TutorialImg}
+          image={featured_image ? featured_image : TutorialImg}
           title="Tutorial icon"
         />
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ const UserElement = ({ user, index, useStyles }) => { @@
             key: "user" + { index },
             mb: 1.5
           }}
-          gutterBottom
+          gutterbottom="true"
         >
           <Box
             sx={{
@@ Expand Down @@