Web Style fixes (#149)

Author: Abhishek-kumar09

.prettierrc

@@ -5,6 +5,5 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,
-  "useTabs": false,
-  "react/jsx-max-props-per-line": [1, { "when": "always" }]
+  "useTabs": false
 }

src/data/CourseFeatures.js

@@ -6,7 +6,7 @@ export const features = {
       image: '/static/images/courses/features/oneonone.png'
     },
     {
-      line1: 'Quik Doubt ',
+      line1: 'Quick Doubt ',
       line2: 'Resolution',
       image: '/static/images/courses/features/doubts.png'
     },

src/views/pages/Course/Features.js

@@ -54,6 +54,12 @@ const useStyles = makeStyles(theme => ({
       padding: '20px 0'
     }
   },
+  grid: {
+    width: '100%',
+    [theme.breakpoints.up('xl')]: {
+      width: '75%'
+    }
+  },
   box2: {
     height: 90,
     verticalAlign: 'middle',
@@ -87,21 +93,11 @@ const Features = () => {
           flexDirection="row"
           justify="center"
           alignItems="center"
-          style={{
-            width: '100%'
-          }}
+          className={classes.grid}
         >
           {features.primary.map((feature, index) => {
             return (
-              <Grid
-                item
-                lg={4}
-                md={4}
-                sm={6}
-                xs={6}
-                justify="center"
-                alignItems="center"
-              >
+              <Grid item lg={4} md={4} sm={6} xs={6}>
                 <Hidden smDown>
                   <Boxes flexDirection="row" feature={feature} />
                 </Hidden>

src/views/pages/Course/ProcessSteppers.js

@@ -148,7 +148,9 @@ ColorlibStepIcon.propTypes = {
 const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
-    overflowX: 'scroll'
+    [theme.breakpoints.down('xs')]: {
+      overflowX: 'scroll'
+    }
   },
   button: {
     marginRight: theme.spacing(1)

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

@@ -1,14 +1,28 @@
-import React from 'react';
 import {
-  Grid,
-  Typography,
-  Hidden,
   Box,
   Collapse,
-  IconButton
+  Grid,
+  Hidden,
+  IconButton,
+  makeStyles,
+  Typography
 } from '@material-ui/core';
-import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import clsx from 'clsx';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.short
+    })
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)'
+  }
+}));
 
 export default function Topics({ course }) {
   return (
@@ -47,6 +61,7 @@ export default function Topics({ course }) {
 
 function TopicDropBox({ topic, topicIndex }) {
   const [expanded, setExpanded] = React.useState(false);
+  const classes = useStyles();
 
   return (
     <Box
@@ -58,9 +73,6 @@ function TopicDropBox({ topic, topicIndex }) {
         margin: '8px 0px',
         flexDirection: 'column'
       }}
-      onClick={() => {
-        setExpanded(!expanded);
-      }}
     >
       <Box
         display="flex"
@@ -77,31 +89,45 @@ function TopicDropBox({ topic, topicIndex }) {
             width: '100%'
           }}
         >
-          <Box fontWeight={500}>{`Topic ${topicIndex + 1} : ${
+          <Box fontWeight={500}>{`Topic ${topicIndex + 1}: ${
             topic.title
           }`}</Box>
         </Typography>
         <Hidden xsDown>
           <Box
             display="flex"
             alignItems="center"
+            justifyContent="flex-end"
             style={{
-              width: '200px',
+              width: '180px',
+              whiteSpace: 'nowrap',
               color: '#A60000'
             }}
           >
-            <Typography variant="body1">
+            <Typography align="left" variant="body1" style={{ width: '100%' }}>
               <Box>{topic.classes}</Box>
             </Typography>
-            <IconButton>
-              {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+            <IconButton
+              onClick={() => {
+                setExpanded(!expanded);
+              }}
+            >
+              <ExpandMoreIcon
+                className={clsx(classes.expand, {
+                  [classes.expandOpen]: expanded
+                })}
+              />
             </IconButton>
           </Box>
         </Hidden>
 
         <Hidden smUp>
-          <IconButton>
-            {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          <IconButton
+            onClick={() => {
+              setExpanded(!expanded);
+            }}
+          >
+            <ExpandMoreIcon />
           </IconButton>
         </Hidden>
       </Box>

src/views/pages/HomeView/Courses.js

@@ -104,7 +104,13 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'nowrap',
     width: '100%',
     // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
-    transform: 'translateZ(0)'
+    transform: 'translateZ(0)',
+    [theme.breakpoints.up('lg')]: {
+      padding: '0px 50px'
+    },
+    [theme.breakpoints.up('xl')]: {
+      padding: '0px 20%'
+    }
   }
 }));