fix(style): fix website max width issue (#230)

* fix(style): fix website max width issue * style: fic category page maxwidth
Monday-Morning · Jun 17, 2022 · f1c20f8 · f1c20f8
1 parent 728ccd4
commit f1c20f8
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 144 deletions.
diff --git 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
@@ -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
@@ -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
@@ -18,147 +18,148 @@ 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;
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,7 @@ function Contact({ issues }) {
 
   return (
     <div>
-      <Container fixed={true} maxWidth={false}>
+      <Container maxWidth='xl'>
         <BackButton path='/' goTo='Home' />
         <Options />
       </Container>