Center course features and make it consistent on all screen

Author: Abhishek-kumar09

src/components/Hero/StudentDashboardHero.js

@@ -121,20 +121,22 @@ function Hero({ className, ...rest }) {
           </Hidden>
           <Grid className={classes.rightPanel} item xs={12} md={6}>
             <Box className={classes.rightPanelItems}>
-              <Box className={classes.profileSetting} justifyContent="center" alignContent="center">
+              <Box
+                className={classes.profileSetting}
+                justifyContent="center"
+                alignContent="center"
+              >
                 <Typography
                   className={classes.profileSettingTypography}
                   variant="subtitle2"
                 >
                   Profile Settings
-                  <Link
-                  to="/editProfile"
-                  >
-                  <img
-                    alt="setting-icon"
-                    className={classes.icon}
-                    src="/static/images/icons/Vector.svg"
-                  />
+                  <Link to="/editProfile">
+                    <img
+                      alt="setting-icon"
+                      className={classes.icon}
+                      src="/static/images/icons/Vector.svg"
+                    />
                   </Link>
                 </Typography>
               </Box>

src/views/pages/Course/partials/CourseFeatures.js

@@ -1,25 +1,40 @@
-import { Box, makeStyles, Paper, Typography } from '@material-ui/core';
+import {
+  Box,
+  Card,
+  Container,
+  makeStyles,
+  Typography
+} from '@material-ui/core';
 import React from 'react';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    margin: theme.spacing(3, 0, 0),
-    padding: '60px 0px 40px',
+    marginTop: theme.spacing(3),
     backgroundColor: '#F4F4F4',
     borderRadius: '0px'
   },
+  container: {
+    padding: '60px 8vw 40px'
+  },
   card: {
     display: 'inline-block',
     verticalAlign: 'top',
+    textAlign: 'left',
     width: 308,
     height: 245,
     color: '#fff',
     padding: '24px',
-    margin: '24px',
+    margin: '24px 48px 24px 0px',
     background: '#5D517E',
     boxShadow: '0px 0px 15px rgba(0, 0, 0, 0.15)',
     [theme.breakpoints.down('sm')]: {
       margin: '16px'
+    },
+    '&, .makeStyles-card-210': {
+      [theme.breakpoints.down('xs')]: {
+        marginLeft: 0,
+        marginRight: 0
+      }
     }
   },
   box: {
@@ -36,26 +51,28 @@ function CourseFeatures() {
   const classes = useStyles();
   return (
     <div className={classes.root}>
-      <Typography
-        align="center"
-        variant="h3"
-        style={{ fontSize: '28px', marginBottom: '30px' }}
-      >
-        Course Features
-      </Typography>
-      <div style={{ display: 'block', textAlign: 'center', width: '100%' }}>
-        {features.map((feature, index) => {
-          return <Card feature={feature} index={index} />;
-        })}
-      </div>
+      <Container className={classes.container} maxWidth="xl">
+        <Typography
+          align="center"
+          variant="h3"
+          style={{ fontSize: '28px', marginBottom: '30px' }}
+        >
+          Course Features
+        </Typography>
+        <div style={{ display: 'block', width: '113%' }}>
+          {features.map((feature, index) => {
+            return <FeatureCard feature={feature} index={index} />;
+          })}
+        </div>
+      </Container>
     </div>
   );
 }
 
-function Card({ feature, index }) {
+export function FeatureCard({ feature, index }) {
   const classes = useStyles();
   return (
-    <Paper elevation={0} className={classes.card}>
+    <Card elevation={0} className={classes.card}>
       <Box className={classes.box}>
         <img
           src={`/static/images/courses/trainingLogos/${index}.svg`}
@@ -71,11 +88,11 @@ function Card({ feature, index }) {
       <Typography variant="body2" style={{ fontWeight: 500 }}>
         {feature.subTopic}
       </Typography>
-    </Paper>
+    </Card>
   );
 }
 
-const features = [
+export const features = [
   {
     topic: 'Structured Industry vetted Curiculumn',
     subTopic: 'Who have been In Out Throughout the Industry'