Merge pull request #97 from HarshvardhanJha1/style

Style different pages

client/src/components/layout/Dashboard.jsx

@@ -6,7 +6,27 @@ import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { editTT } from "../../actions/UpdateTimeTable";
 import ShareTimeTable from "./ShareTimeTable";
+import CssBaseline from "@material-ui/core/CssBaseline";
+import Typography from "@material-ui/core/Typography";
+import Container from "@material-ui/core/Container";
+import { makeStyles } from "@material-ui/core/styles";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+import Button from "@material-ui/core/Button";
+import "../../styles/Dashboard.css";
+const useStyles= makeStyles({
+  root:{
+    minWidth: 250
+  },
+  cardcontainer: {
+    maxWidth: "95vw",
+    maxHeight: "27vh",
+    overflow: "auto",
+  }
+})
 const Dashboard = props => {
+  const classes = useStyles();
   const [TTData, setTTData] = React.useState({
     savedTT: null
   });
@@ -56,58 +76,71 @@ const Dashboard = props => {
   if (!loading) {
     return (
       <>
-      <div>
+      <h4 className="title">Saved Timetables</h4>
+      <br></br>
+      <div className={classes.cardcontainer}>
         {" "}
-        {(TTData.savedTT || data).map(item => {
-          return (
-            <>
-              <div className='courseItem' key={item} id={item} style={{alignItems: "left"}}>
-                {item.name}
-              </div>
-              <Link
-                to='/create'
-                onClick={() => {
-                  props.editTT(item);
-                }}
-              >
-                Edit
-              </Link>
-              <button
-                onClick={() => {
-                  deleteTT(item._id);
-                }}
-              >
-                Delete
-              </button>
-              {item.isShared ? (
-                <button
-                  onClick={() => {
-                    toggleShare(item._id, "Unshared");
-                  }}
-                >
-                  Unshare
-                </button>
-              ) : (
-                <button
-                  onClick={() => {
-                    toggleShare(item._id, "Shared");
-                  }}
-                >
-                  Share
-                </button>
-              )}
-            </>
-          );
-        })}
-      </div>
-      <div>
-        <h2>Shared TimeTables</h2>
+            <Container maxWidth="sm">
+            {(TTData.savedTT || data).map(item => {
+              return (
+                <>
+                <Card className={classes.root}>
+                  <CardContent>
+                    <Typography className={classes.root} color="textSecondary" gutterBottom>
+                      Name
+                    </Typography>
+                    <Typography variant="h5" component="h2">
+                      {item.name}
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Link
+                      to='/create'
+                      onClick={() => {
+                        props.editTT(item);
+                      }}
+                    >
+                      <Button variant="contained" color = "primary" size="small">Edit</Button>
+                    </Link>
+
+                    <Button onClick={() => {
+                      deleteTT(item._id);
+                    }} 
+                    variant="contained" color = "secondary" size="small">
+                    Delete
+                    </Button>
+                    {item.isShared ? (
+                      <Button variant="contained" size="small"
+                        onClick={() => {
+                          toggleShare(item._id, "Unshared");
+                        }}
+                      >
+                        Unshare
+                      </Button>
+                    ) : (
+                      <Button variant="contained" size="small"
+                        onClick={() => {
+                          toggleShare(item._id, "Shared");
+                        }}
+                      >
+                        Share
+                      </Button>
+                    )}
+                  </CardActions>
+                </Card>
+                <br></br>
+                </>
+              );
+            })}
+          </Container>
       </div>
+      <h4 className="title">Publicily Shared Timetables</h4>
+
       <ShareTimeTable />
       </>
     );
   } else {
-    return <h3>FETCHING LATEST DATA....</h3>;
+    return <h4>FETCHING LATEST DATA....</h4>;
   }
 };
 

client/src/components/layout/HELData.jsx

@@ -79,7 +79,7 @@ const HELData = () => {
 
   let resp = true;
   let str = [
-    <div style={{ float: "right", width: "40 vw" }}>
+    <div style={{float:"right", width: "35%" }}>
       <Search action={filterItems} />
       <ItemList
         items={humCourses}
@@ -95,7 +95,7 @@ const HELData = () => {
       let max = 0;
       for (let i of courseStats) max = i["y"] > max ? i["y"] : max;
       str.push([
-        <div style={{ float: "left", width: "60vw" }}>
+        <div style={{ float: "left", width: "64%" }}>
           <VictoryChart domainPadding={10} animate={{ duration: 2000 }}>
             <VictoryAxis
               tickValues={[1, 2, 3, 4, 5, 6, 7, 8]}

client/src/components/layout/HelForm.jsx

@@ -6,7 +6,7 @@ import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import FormControl from "@material-ui/core/FormControl";
-
+import Container from '@material-ui/core/Container';
 import { connect } from "react-redux";
 import { submitForm } from "../../actions/helForm";
 import PropTypes from "prop-types";
@@ -140,13 +140,6 @@ const HelForm = ({ submitForm, submitted, user }) => {
     }
   };
 
-  const addCourse = () => {
-    addCourseToList();
-    setFormData({
-      ...formData
-    });
-  };
-
   const handleCourseAddition = e => {
     let event = e.target.innerHTML;
     if (!humanitiesCourses.includes(event)) {
@@ -210,22 +203,21 @@ const HelForm = ({ submitForm, submitted, user }) => {
 
   return (
     <Fragment>
-      <p className='title'>
-        Hi! We would like to know a few things before you continue Please Enter
-        your Branch, year and select your Humanities Courses of the previous
-        semester below:
-      </p>
+      <h5 className='title'>
+        Please Enter your Branch, year and select your Humanities Courses of the previous semester below:
+      </h5>
+      <br></br>
       <form className='form-whole' onSubmit={e => onSubmit(e)}>
         <Select
           placeholder='Please select slot'
           className='hf-width'
           value={slotNumber}
           options={slots}
           onItemClick={handleSlotChange}
-          containerStyle={{ backgroundColor: "#f9e3b4" }}
-          menuStyle={{ backgroundColor: "#f9e3b4" }}
+          containerStyle={{ backgroundColor: "rgba(116, 185, 255,1)" }}
+          menuStyle={{ backgroundColor: "rgba(116, 185, 255,1)"}}
           menuItemStyle={{ backgroundColor: "#ffffff" }}
-          activeItemStyle={{ backgroundColor: "#fecb6e" }}
+          activeItemStyle={{ backgroundColor: "#0984e3" }}
         />
         <div className='container-helform'>
           <Creatable
@@ -242,11 +234,13 @@ const HelForm = ({ submitForm, submitted, user }) => {
               borderRadius: 2,
               colors: {
                 ...theme.colors,
-                primary25: "#fecb6e",
-                neutral0: "#f9e3b4"
+                primary25: "#0984e3",
+                text: "#353b48",
+                neutral0: "rgba(116, 185, 255,1)"
               }
             })}
           />
+          <br></br>
           <p className='label-mod branch-inp'>Select year: </p>
           <FormControl component='fieldset' className='radio-grp'>
             <RadioGroup
@@ -303,7 +297,7 @@ const HelForm = ({ submitForm, submitted, user }) => {
           <div className='form-courses'>
             {humanitiesCourses.map((_, idx) => {
               return (
-                <div className='container-helform' key={idx}>
+                <div className='selected-courses' key={idx}>
                   <input
                     className='course-inp'
                     type='text'
@@ -316,7 +310,7 @@ const HelForm = ({ submitForm, submitted, user }) => {
                     readOnly
                   ></input>
                   <button
-                    className='btn btn-hf btn-mod'
+                    className='btn btn-hf'
                     type='button'
                     onClick={e => deleteRow(e, idx)}
                     key={"bdelete" + idx.toString(10)}
@@ -325,7 +319,7 @@ const HelForm = ({ submitForm, submitted, user }) => {
                   </button>
                   <button
                     type='button'
-                    className='btn btn-hf btn-mod'
+                    className='btn btn-hf'
                     onClick={e => editRow(e, idx)}
                     key={"bedit" + idx.toString(10)}
                   >
@@ -335,27 +329,25 @@ const HelForm = ({ submitForm, submitted, user }) => {
               );
             })}
           </div>
+        </div>
+
+        <div className='course-disp'>
+          <Search action={filterItems} />
+          <ItemList
+            items={currentlyShowingCourses}
+            action={handleCourseAddition}
+          >
+          </ItemList>
+        </div>
+        <div>
           <input
-            type='submit'
-            className='btn btn-primary btn-hf btn-big'
+            type='button'
+            className='btn submit-btn'
             value='Submit'
           />
-          <button
-            type='button'
-            className='btn btn-primary btn-big'
-            onClick={e => addCourse(e)}
-          >
-            Add
-          </button>
         </div>
-      </form>
-      <div className='course-disp'>
-        <Search action={filterItems} />
-        <ItemList
-          items={currentlyShowingCourses}
-          action={handleCourseAddition}
-        ></ItemList>
-      </div>
+
+      </form> 
     </Fragment>
   );
 };

client/src/components/layout/Navbar.jsx

@@ -1,27 +1,29 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
-import "../../styles/Navbar.css";
 import { logout } from "../../actions/auth";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-
+import image from "../../images/default.png";
 export const Navbar = ({ submitted, user, isAuthenticated, logout }) => {
   if (!isAuthenticated) {
     return null;
   } else if ((!submitted && user && user.submittedForm) || submitted) {
     return (
       <div>
-        <nav className='nav-wraper blue'>
+        <nav className='nav-wraper indigo darken-4' >
           <div className='container'>
             <NavLink to='/' className='brand-logo left'>
-              ChronoFactorem
+              <div style ={{height:"64px",width:"238.633px"}}>
+              <img src={image} height="64px" width="238.633px" id='logo'/>
+              </div>
+
             </NavLink>
             <ul className='right hide-on-med-and-down'>
               <li>
                 <NavLink to='/Dashboard'>Dashboard</NavLink>
               </li>
               <li>
-                <NavLink to='/HELDATA'>HELData</NavLink>
+                <NavLink to='/HELDATA'>Statistics</NavLink>
               </li>
               <li>
                 <NavLink to='/create'>Create TimeTable</NavLink>
@@ -42,10 +44,12 @@ export const Navbar = ({ submitted, user, isAuthenticated, logout }) => {
   } else {
     return (
       <div>
-        <nav className='nav-wraper blue'>
+        <nav className='nav-wraper indigo darken-4' >
           <div className='container'>
             <NavLink to='/' className='brand-logo left'>
-              ChronoFactorem
+              <div style ={{height:"64px",width:"238.633px"}}>
+              <img src={image} height="64px" width="238.633px" id='logo'/>
+              </div>
             </NavLink>
             <ul className='right hide-on-med-and-down'>
               <li>