From f1c20f86b399ee8091b50822d926b94f3c5f9748 Mon Sep 17 00:00:00 2001
From: Aashish <83752052+120EE0692@users.noreply.github.com>
Date: Fri, 17 Jun 2022 14:24:39 +0530
Subject: [PATCH] fix(style): fix website max width issue (#230)

* fix(style): fix website max width issue

* style: fic category page maxwidth
---
 .../src/components/marginals/DesktopNavbar.js |   2 +-
 client/src/components/marginals/Footer.js     |   2 +-
 client/src/components/marginals/TopBar.js     |   2 +-
 client/src/components/portfolio/UserCard.js   | 243 +++++++++---------
 client/src/components/portfolio/Works.js      |   2 +-
 client/src/screens/About.js                   |   2 +-
 client/src/screens/Article.js                 |   2 +-
 client/src/screens/Category.js                |   4 +-
 client/src/screens/Contact.js                 |   2 +-
 client/src/screens/Expressions.js             |   4 +-
 client/src/screens/Guide.js                   |   2 +-
 client/src/screens/Home.js                    |   8 +-
 client/src/screens/Live.js                    |   2 +-
 client/src/screens/PhotoStory.js              |   2 +-
 client/src/screens/Podcast.js                 |   2 +-
 client/src/screens/Policy.js                  |   2 +-
 client/src/screens/SearchPage.jsx             |   2 +-
 client/src/screens/SubCategory.js             |   2 +-
 client/src/screens/UserProfile.js             |   2 +-
 19 files changed, 145 insertions(+), 144 deletions(-)

diff --git a/client/src/components/marginals/DesktopNavbar.js b/client/src/components/marginals/DesktopNavbar.js
index ca6f0bf3..8b2e7342 100644
--- a/client/src/components/marginals/DesktopNavbar.js
+++ b/client/src/components/marginals/DesktopNavbar.js
@@ -33,7 +33,7 @@ const DesktopNavbar = () => {
   };
 
   return (
-    <Container disableGutters={true} fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <nav
         aria-label='Monday Morning Navigation'
         className={classes.navContainer}
diff --git a/client/src/components/marginals/Footer.js b/client/src/components/marginals/Footer.js
index f2cab59d..a692cb6f 100644
--- a/client/src/components/marginals/Footer.js
+++ b/client/src/components/marginals/Footer.js
@@ -14,7 +14,7 @@ const Footer = () => {
   const classes = useStyles();
   return (
     <div className={classes.wrapper}>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <Grid container direction='row'>
           <Grid item sm={6} md={4}>
             <div className={classes.aboutInfo}>
diff --git a/client/src/components/marginals/TopBar.js b/client/src/components/marginals/TopBar.js
index bba0b3a2..091f98cd 100644
--- a/client/src/components/marginals/TopBar.js
+++ b/client/src/components/marginals/TopBar.js
@@ -8,7 +8,7 @@ const TopBar = () => {
   const classes = useStyles();
   return (
     <div className={classes.topBar}>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <div className={classes.container}>
           <ul className={classes.navList}>
             <li className={classes.navItem}>
diff --git a/client/src/components/portfolio/UserCard.js b/client/src/components/portfolio/UserCard.js
index 3ed0e070..5e942820 100644
--- a/client/src/components/portfolio/UserCard.js
+++ b/client/src/components/portfolio/UserCard.js
@@ -18,139 +18,141 @@ const UserCard = ({ user }) => {
     user;
 
   return (
-    <div className={classes.wrapper}>
-      <Card className={classes.card}>
-        <CardContent>
-          <Grid container>
-            <Grid item md={5} sm={12} className={classes.gridPadding}>
-              <div className={classes.userWrapper}>
-                <div className={classes.imageWrapper}>
-                  <Image
-                    className={classes.profileImage}
-                    src={profileImageLink}
-                    alt='user photo'
-                    width={135}
-                    height={135}
-                  />
-                </div>
-                <div className={classes.userData}>
-                  <div className={classes.columnFlex}>
-                    <div className={classes.userName}>
-                      <Typography variant='h2'>
-                        {firstName} {firstName?.length < 4 ? lastName : ''}
-                      </Typography>
-                    </div>
-                    <div>
-                      <Typography variant='body2'>
-                        <div className={classes.boldText}>Email</div>
-                        <email>{email}</email>{' '}
-                      </Typography>
-                    </div>
-                    <div>
-                      <Typography variant='body2'>
-                        <div className={classes.boldText}> Year</div>
-                        {year}
-                      </Typography>
+    <Container maxWidth='xl'>
+      <div className={classes.wrapper}>
+        <Card className={classes.card}>
+          <CardContent>
+            <Grid container>
+              <Grid item md={5} sm={12} className={classes.gridPadding}>
+                <div className={classes.userWrapper}>
+                  <div className={classes.imageWrapper}>
+                    <Image
+                      className={classes.profileImage}
+                      src={profileImageLink}
+                      alt='user photo'
+                      width={135}
+                      height={135}
+                    />
+                  </div>
+                  <div className={classes.userData}>
+                    <div className={classes.columnFlex}>
+                      <div className={classes.userName}>
+                        <Typography variant='h2'>
+                          {firstName} {firstName?.length < 4 ? lastName : ''}
+                        </Typography>
+                      </div>
+                      <div>
+                        <Typography variant='body2'>
+                          <div className={classes.boldText}>Email</div>
+                          <email>{email}</email>{' '}
+                        </Typography>
+                      </div>
+                      <div>
+                        <Typography variant='body2'>
+                          <div className={classes.boldText}> Year</div>
+                          {year}
+                        </Typography>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
-            </Grid>
+              </Grid>
 
-            <Grid
-              item
-              md={3}
-              sm={6}
-              className={`${classes.bordered} ${classes.gridPadding} ${classes.postDetailsWrapper}`}
-            >
-              <div className={classes.postDetails}>
-                <div>
-                  <Typography variant='body2' className={classes.boldText}>
-                    Number Of Posts
-                  </Typography>
-                </div>
-                <div>
-                  <Typography variant='body2'>{noOfArticle}</Typography>
+              <Grid
+                item
+                md={3}
+                sm={6}
+                className={`${classes.bordered} ${classes.gridPadding} ${classes.postDetailsWrapper}`}
+              >
+                <div className={classes.postDetails}>
+                  <div>
+                    <Typography variant='body2' className={classes.boldText}>
+                      Number Of Posts
+                    </Typography>
+                  </div>
+                  <div>
+                    <Typography variant='body2'>{noOfArticle}</Typography>
+                  </div>
                 </div>
-              </div>
-              <div className={classes.postDetails}>
-                <Typography variant='body2'>
-                  <span className={classes.boldText}>Content: </span>
-                  {noOfArticle}
-                </Typography>
+                <div className={classes.postDetails}>
+                  <Typography variant='body2'>
+                    <span className={classes.boldText}>Content: </span>
+                    {noOfArticle}
+                  </Typography>
 
-                <Typography variant='body2'>
-                  <span className={classes.boldText}>Design: </span>0
-                </Typography>
+                  <Typography variant='body2'>
+                    <span className={classes.boldText}>Design: </span>0
+                  </Typography>
 
-                <Typography variant='body2'>
-                  <span className={classes.boldText}>Photography: </span>0
-                </Typography>
-              </div>
-            </Grid>
-            <Grid
-              item
-              md={4}
-              sm={6}
-              className={`${classes.bordered} ${classes.gridPadding} ${classes.postDetailsWrapper}`}
-            >
-              <div className={classes.postDetails}>
-                <div>
-                  <Typography variant='body2' className={classes.boldText}>
-                    Teams
+                  <Typography variant='body2'>
+                    <span className={classes.boldText}>Photography: </span>0
                   </Typography>
                 </div>
-                <div>
-                  <Typography variant='body2'>Content</Typography>
+              </Grid>
+              <Grid
+                item
+                md={4}
+                sm={6}
+                className={`${classes.bordered} ${classes.gridPadding} ${classes.postDetailsWrapper}`}
+              >
+                <div className={classes.postDetails}>
+                  <div>
+                    <Typography variant='body2' className={classes.boldText}>
+                      Teams
+                    </Typography>
+                  </div>
+                  <div>
+                    <Typography variant='body2'>Content</Typography>
+                  </div>
                 </div>
-              </div>
 
-              <div className={classes.postDetails}>
-                <div>
-                  <Typography variant='body2' className={classes.boldText}>
-                    Links
-                  </Typography>
-                </div>
-                <div className={classes.socialIcon}>
-                  <span>
-                    <Link
-                      href='https://www.linkedin.com/company/monday-morning-the-official-student-media-body-of-nit-rourkela/mycompany/'
-                      passHref={true}
-                    >
-                      <i className='fab fa-linkedin' />
-                    </Link>
-                  </span>
-                  <span>
-                    <Link
-                      passHref
-                      href='https://www.facebook.com/mondaymorningnitr'
-                    >
-                      <i className='fab fa-facebook-f' />
-                    </Link>
-                  </span>
-                  <span>
-                    <Link
-                      passHref
-                      href='https://www.instagram.com/mondaymorningnitrofficial/?hl=en'
-                    >
-                      <i className='fab fa-instagram' />
-                    </Link>
-                  </span>
-                  <span>
-                    <Link
-                      passHref
-                      href='https://twitter.com/mmnitrkl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor'
-                    >
-                      <i className='fab fa-twitter' />
-                    </Link>
-                  </span>
+                <div className={classes.postDetails}>
+                  <div>
+                    <Typography variant='body2' className={classes.boldText}>
+                      Links
+                    </Typography>
+                  </div>
+                  <div className={classes.socialIcon}>
+                    <span>
+                      <Link
+                        href='https://www.linkedin.com/company/monday-morning-the-official-student-media-body-of-nit-rourkela/mycompany/'
+                        passHref={true}
+                      >
+                        <i className='fab fa-linkedin' />
+                      </Link>
+                    </span>
+                    <span>
+                      <Link
+                        passHref
+                        href='https://www.facebook.com/mondaymorningnitr'
+                      >
+                        <i className='fab fa-facebook-f' />
+                      </Link>
+                    </span>
+                    <span>
+                      <Link
+                        passHref
+                        href='https://www.instagram.com/mondaymorningnitrofficial/?hl=en'
+                      >
+                        <i className='fab fa-instagram' />
+                      </Link>
+                    </span>
+                    <span>
+                      <Link
+                        passHref
+                        href='https://twitter.com/mmnitrkl?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor'
+                      >
+                        <i className='fab fa-twitter' />
+                      </Link>
+                    </span>
+                  </div>
                 </div>
-              </div>
+              </Grid>
             </Grid>
-          </Grid>
-        </CardContent>
-      </Card>
-    </div>
+          </CardContent>
+        </Card>
+      </div>
+    </Container>
   );
 };
 export default UserCard;
@@ -158,7 +160,6 @@ export default UserCard;
 const useStyles = makeStyles((theme) => ({
   wrapper: {
     margin: '1.5rem auto 0 auto ',
-    maxWidth: '1200px',
   },
   card: {
     boxShadow: theme.shadows[0],
diff --git a/client/src/components/portfolio/Works.js b/client/src/components/portfolio/Works.js
index bcec9827..77967b55 100644
--- a/client/src/components/portfolio/Works.js
+++ b/client/src/components/portfolio/Works.js
@@ -15,7 +15,7 @@ const Works = ({ user }) => {
   const { articleList } = user;
 
   return (
-    <Container>
+    <Container maxWidth='xl'>
       <div className={classes.wrapper}>
         <div className={classes.sectionWrapper}>
           {/* Content */}
diff --git a/client/src/screens/About.js b/client/src/screens/About.js
index b3e3f4eb..2d6357ac 100644
--- a/client/src/screens/About.js
+++ b/client/src/screens/About.js
@@ -12,7 +12,7 @@ import Team from '../components/about/Team';
 
 function About() {
   return (
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <BackButton path='/' goTo='Home' />
       <AboutUs />
       <Content />
diff --git a/client/src/screens/Article.js b/client/src/screens/Article.js
index 5dd209df..8d786617 100644
--- a/client/src/screens/Article.js
+++ b/client/src/screens/Article.js
@@ -24,7 +24,7 @@ function Article({ article }) {
 
   return (
     <>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <Grid container>
           <Grid item md={9}>
             <ArticleHeader article={article} />
diff --git a/client/src/screens/Category.js b/client/src/screens/Category.js
index cf4c9abf..fe060e42 100644
--- a/client/src/screens/Category.js
+++ b/client/src/screens/Category.js
@@ -20,7 +20,7 @@ function Category({ articleList, categoryShortName, category }) {
   return (
     <div className={classes.container}>
       <div className={classes.navbarContainer}>
-        <Container fixed={true} maxWidth={false}>
+        <Container maxWidth='xl'>
           <Typography variant='h1' className={classes.title}>
             {category.name}
           </Typography>
@@ -62,7 +62,7 @@ function Category({ articleList, categoryShortName, category }) {
       </div>
 
       <div>
-        <Container fixed={true} maxWidth={false}>
+        <Container maxWidth='xl'>
           <div className={classes.articlesCards}>
             {ROUTES.SUB_CATEGORIES.OBJECT[categoryShortName.toUpperCase()].map(
               ({ name, shortName, path }, index) => (
diff --git a/client/src/screens/Contact.js b/client/src/screens/Contact.js
index 2e51270d..d39fd704 100644
--- a/client/src/screens/Contact.js
+++ b/client/src/screens/Contact.js
@@ -10,7 +10,7 @@ import Feedback from '../components/contact/Feedback';
 function Contact() {
   return (
     <div>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <BackButton path='/' goTo='Home' />
         <ContactUs />
         <Details />
diff --git a/client/src/screens/Expressions.js b/client/src/screens/Expressions.js
index 88b11a91..0021b6b8 100644
--- a/client/src/screens/Expressions.js
+++ b/client/src/screens/Expressions.js
@@ -68,7 +68,7 @@ function Expressions() {
 
   return (
     <div className={classes.root}>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <div className={classes.header}>
           <Typography variant='h1' className={classes.head}>
             Expressions
@@ -102,7 +102,7 @@ function Expressions() {
           );
 
           return container ? (
-            <Container fixed={true} maxWidth={false} key={shortName}>
+            <Container maxWidth='xl' key={shortName}>
               {element}
             </Container>
           ) : (
diff --git a/client/src/screens/Guide.js b/client/src/screens/Guide.js
index 21151baa..6c4fbb4c 100644
--- a/client/src/screens/Guide.js
+++ b/client/src/screens/Guide.js
@@ -23,7 +23,7 @@ function Contact({ issues }) {
 
   return (
     <div>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <BackButton path='/' goTo='Home' />
         <Options />
       </Container>
diff --git a/client/src/screens/Home.js b/client/src/screens/Home.js
index 2c72fbf6..40e294e6 100644
--- a/client/src/screens/Home.js
+++ b/client/src/screens/Home.js
@@ -28,7 +28,7 @@ function Home({ issues, squiggles }) {
 
   return (
     <>
-      <Container disableGutters={true} fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <ArticleGrid articles={featured} />
         <Squiggles data={squiggles} />
 
@@ -49,13 +49,13 @@ function Home({ issues, squiggles }) {
         {articles.length > 3 && (
           <ArticleCardStack articleList={articles.slice(3, 6)} />
         )}
-      </Container>
 
-      {/* <Banner /> */}
+        {/* <Banner /> */}
 
-      <Container fixed={true} maxWidth={false} style={{ marginTop: 35 }}>
+        {/* <div style={{ marginTop: 35 }}> */}
         {/* <SocialMedia /> */}
         <Trending />
+        {/* </div> */}
       </Container>
     </>
   );
diff --git a/client/src/screens/Live.js b/client/src/screens/Live.js
index 58677024..c93abccf 100644
--- a/client/src/screens/Live.js
+++ b/client/src/screens/Live.js
@@ -46,7 +46,7 @@ function Live() {
   };
 
   return (
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <Typography variant='h2' className={classes.title}>
         Live
       </Typography>
diff --git a/client/src/screens/PhotoStory.js b/client/src/screens/PhotoStory.js
index bd069473..28874608 100644
--- a/client/src/screens/PhotoStory.js
+++ b/client/src/screens/PhotoStory.js
@@ -18,7 +18,7 @@ function PhotoStory() {
       <Header DATA={PHOTOSTORY} />
       <Body />
       <hr />
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <Comments />
       </Container>
 
diff --git a/client/src/screens/Podcast.js b/client/src/screens/Podcast.js
index 371e1868..ebbafb3f 100644
--- a/client/src/screens/Podcast.js
+++ b/client/src/screens/Podcast.js
@@ -9,7 +9,7 @@ import PodcastList from '../components/podcast/List';
 
 const Podcast = () => (
   <>
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <BackLink />
     </Container>
     <LatestPodcast />
diff --git a/client/src/screens/Policy.js b/client/src/screens/Policy.js
index c0cecfc1..cd7cbbaf 100644
--- a/client/src/screens/Policy.js
+++ b/client/src/screens/Policy.js
@@ -9,7 +9,7 @@ import BackButton from '../components/shared/button/BackButton';
 
 function Policy() {
   return (
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <BackButton path='/' goTo='Home' />
       <Terms />
     </Container>
diff --git a/client/src/screens/SearchPage.jsx b/client/src/screens/SearchPage.jsx
index f00d6b23..1de4da30 100644
--- a/client/src/screens/SearchPage.jsx
+++ b/client/src/screens/SearchPage.jsx
@@ -11,7 +11,7 @@ import ArticleCardStack from '../components/widgets/article/ArticleCardStack';
 const SearchPage = ({ articles, keyword }) => {
   const classes = useStyles();
   return (
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <Typography variant='h3' component='h3' className={classes.text}>
         {!articles && <span>NO</span>} Search results for - "{keyword}"
       </Typography>
diff --git a/client/src/screens/SubCategory.js b/client/src/screens/SubCategory.js
index a984e3ce..212af491 100644
--- a/client/src/screens/SubCategory.js
+++ b/client/src/screens/SubCategory.js
@@ -22,7 +22,7 @@ function SubCategory({
   const classes = useStyles();
 
   return (
-    <Container fixed={true} maxWidth={false}>
+    <Container maxWidth='xl'>
       <BackLink backTo={categoryName} />
       <Title title={subCategoryDetails.name} />
       <BigArticleCard article={articleList[0][0]} />
diff --git a/client/src/screens/UserProfile.js b/client/src/screens/UserProfile.js
index b52a5910..167b4275 100644
--- a/client/src/screens/UserProfile.js
+++ b/client/src/screens/UserProfile.js
@@ -44,7 +44,7 @@ function UserProfile() {
 
   return (
     <div className={classes.root}>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <BackButton path='/' goTo='Guide' />
         <Typography variant='h1' className={classes.head}>
           User Account