Merge pull request #67 from Chicago-Deep-Dish/uitestbranch

final ui changes
Chicago-Deep-Dish · Jul 1, 2022 · a46f125 · a46f125
2 parents 5fe2682 + 82190fa
commit a46f125
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 51 deletions.
diff --git a/src/components/HomePage/About/About.js b/src/components/HomePage/About/About.js
@@ -10,14 +10,18 @@ export default function About () {
   const { aboutToggle, setAboutToggle } = useGlobalContext();
   return(
     <Box className='about'>
-      <h1>About</h1>
-      <div style={{marginRight: '5%', marginLeft: '5%'}}>
+      <h1 style={{marginTop: 0, paddingTop: '5%'}}>About</h1>
+      <div style={{marginRight: '10%', marginLeft: '10%'}}>
+        <p><em>ELEET-TRACKER</em> is a service that has your future in mind. We know you are well on your way to become the best Software Engineer you can be, and we're here for you. We bring to you a service that allows you to track, record, and analyze your performance on the leetcode problems you attempt, so you can see how you stack up against the fiercest competition out there - yourself.</p>
+        <br/>
+        <br/>
+        <br/>
         <p>
-          Darwin&trade;'s history can be dated back to the late 19th Century, to our CEO Leon Must&trade;'s great-great-great-great grandfather, Charles Darwin. Since then, the tradition of greatness has been incultated with each generation - and this is where you come in. Leon Must&trade; believes in the potential of each and every one of you. Darwin&trade; is in the business of pushing humanity together to reach an intellectual higher ground, together.
+          Darwin&trade;'s history can be dated back to the late 19th Century, to our CEO Leon Must&trade;'s great-great-great-great grandfather, Charles Darwin. Since then, the tradition of greatness has been inculcated with each generation - and this is where you come in. Leon Must&trade; believes in the potential of each and every one of you. Darwin&trade; is in the business of pushing humanity together to reach an intellectual higher ground, together.
         </p>
       </div>
       <Button
-        sx={{backgroundColor: '#272727'}}
+        sx={{backgroundColor: '#272727', position: 'relative', top: '10%'}}
           variant='contained'
           type='button'
           size='large'

diff --git a/src/components/HomePage/HomeGraphs/AreaGraph.js b/src/components/HomePage/HomeGraphs/AreaGraph.js
@@ -4,7 +4,12 @@ import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import moment from 'moment';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Area() {
 
@@ -17,6 +22,9 @@ export default function Area() {
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
   const [legend, setLegend]=React.useState([]);
+
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
+
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
   };
@@ -423,11 +431,22 @@ if ( graph==='totalTime'&&selection==='difficulty') {
     }
 
 return (
-  <Stack>
-     <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+  <Stack style={{height: '605px'}}>
+     <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
       <ReactEcharts option={option} />
     </Box>
+    <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+        <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+        </div>
+      </Container>
+    <Collapse in={toggleGraphMenu}>
+
     <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+    </Collapse>
 
   </Stack>
 )

diff --git a/src/components/HomePage/HomeGraphs/BarGraph.js b/src/components/HomePage/HomeGraphs/BarGraph.js
@@ -3,7 +3,14 @@ import React from "react";
 import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
+
+
 
 export default function Bar() {
   const { userProblemArray } = useGlobalContext();
@@ -15,6 +22,7 @@ export default function Bar() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const getLastDate = (x)=> {
     const now = new Date();
@@ -149,29 +157,39 @@ export default function Bar() {
     ]
   }
   return (
-    <Stack >
-      <Box sx={{ '&:hover':{boxShadow:5},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor: "#1A2027", borderRadius: 4, padding: 3}}>
+    <Stack style={{height: '605px'}}>
+      <Box sx={{ '&:hover':{boxShadow:5},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor: "#1A2027", borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
         <ReactEcharts option={option} />
       </Box>
-      <MenuBar
-        graph={graph}
-        subject= {subject}
-        selection={selection}
-        time={time}
-        range={range}
-        language={language}
-        setGraph={setGraph}
-        setSelection={setSelection}
-        handleSubject={(e) => setSubject(e.target.value)}
-        handleRange={(e) => setRange(e.target.value)}
-        handleLanguage={(e) => setLanguage(e.target.value)}
-        handleTime={(e) => setTime(e.target.value)}
-        handleGraph={(e) => setGraph(e.target.value)}
-        handleSelection={(e) => {
-          setSelection(e.target.value);
-          setSubject([]);
-        }}
-      />
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+      <div style={{display: 'flex', justifyContent: 'center'}}>
+         <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+     </div>
+      </Container>
+      <Collapse in={toggleGraphMenu}>
+        <MenuBar
+          graph={graph}
+          subject= {subject}
+          selection={selection}
+          time={time}
+          range={range}
+          language={language}
+          setGraph={setGraph}
+          setSelection={setSelection}
+          handleSubject={(e) => setSubject(e.target.value)}
+          handleRange={(e) => setRange(e.target.value)}
+          handleLanguage={(e) => setLanguage(e.target.value)}
+          handleTime={(e) => setTime(e.target.value)}
+          handleGraph={(e) => setGraph(e.target.value)}
+          handleSelection={(e) => {
+            setSelection(e.target.value);
+            setSubject([]);
+          }}
+        />
+      </Collapse>
     </Stack>
   )
 }
diff --git a/src/components/HomePage/HomeGraphs/DonutGraph.js b/src/components/HomePage/HomeGraphs/DonutGraph.js
@@ -5,7 +5,12 @@ import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import data from  './sampleData.js';
 import axios from 'axios';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 
 export default function Donut() {
@@ -20,6 +25,7 @@ export default function Donut() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
@@ -270,11 +276,30 @@ setInput([{value:easy, name:'easy'},{value:medium,name:'medium'},{value:hard,nam
     ]
   };
 return (
-  <Stack>
-    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1, mb:2,backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
-      <ReactEcharts option={option} />
-    </Box>
-    <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
-  </Stack>
+  // <Stack>
+  //   <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1, mb:2,backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
+  //     <ReactEcharts option={option} />
+  //   </Box>
+  //   <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+  // </Stack>
+  <Stack style={{height: '605px'}}>
+  <Box sx={{ '&:hover':{boxShadow:3},   width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
+   <ReactEcharts option={option} />
+ </Box>
+ <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+     <div style={{display: 'flex', justifyContent: 'center'}}>
+     <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+     {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+     </IconButton>
+     <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+     </div>
+   </Container>
+ <Collapse in={toggleGraphMenu}>
+
+ <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+ </Collapse>
+
+</Stack>
+
 )
 }
diff --git a/src/components/HomePage/HomeGraphs/Graphs.js b/src/components/HomePage/HomeGraphs/Graphs.js
@@ -9,6 +9,7 @@ import TextField from '@mui/material/TextField';
 import styled from "styled-components";
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 
 const StyledInput = styled(TextField)`
 width: 100%;
@@ -39,7 +40,7 @@ export default function Graphs() {
       <FormControl
         required
         size="small"
-        sx={{ m:1, mt:3, ml:45, width:'140px'}}
+        sx={{ m:1, mt:10, ml:45, width:'140px'}}
       >
           <StyledInput
             color="success"
@@ -68,7 +69,7 @@ export default function Graphs() {
       <FormControl
         required
         size="small"
-        sx={{ m:1, mt:3, ml:45, width:'140px'}}
+        sx={{ m:1, mt:10, ml:45, width:'140px'}}
       >
           <StyledInput
             color="success"

diff --git a/src/components/HomePage/HomeGraphs/LineGraph.js b/src/components/HomePage/HomeGraphs/LineGraph.js
@@ -4,7 +4,12 @@ import ReactEcharts from "echarts-for-react";
 import {Box, Stack} from '@mui/material';
 import MenuBar from './MenuBar.js';
 import moment from 'moment';
-import useGlobalContext from '../../../context/GlobalContext.js'
+import useGlobalContext from '../../../context/GlobalContext.js';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Line() {
 
@@ -17,6 +22,7 @@ export default function Line() {
   const [time, setTime]=React.useState('whole process');
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
 
   const getLastDate = (x)=> {
     const now = new Date();
@@ -278,10 +284,19 @@ if (graph === 'totalTime' && selection === 'difficulty') {
 
   }
   return (
-    <Stack>
-      <Box sx={{ '&:hover':{boxShadow:3},  width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+    <Stack style={{height: '605px'}}>
+      <Box sx={{ '&:hover':{boxShadow:3},  width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027',borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
         <ReactEcharts option={option} />
       </Box>
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+          <IconButton  sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+            {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+           </IconButton>
+       <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+      </div>
+      </Container>
+      <Collapse in={toggleGraphMenu}>
       <MenuBar
         graph={graph}
         setGraph={setGraph}
@@ -301,6 +316,9 @@ if (graph === 'totalTime' && selection === 'difficulty') {
           setSubject([]);
         }}
       />
+      </Collapse>
+
   </Stack>
+
   )
 };
diff --git a/src/components/HomePage/HomeGraphs/MenuBar.js b/src/components/HomePage/HomeGraphs/MenuBar.js
@@ -11,7 +11,8 @@ import styled from "styled-components";
 import RadioGroup from '@mui/material/RadioGroup';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import ListItemText from '@mui/material/ListItemText';
-
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
 
 const StyledInput = styled(TextField)`
 width: 100%;
@@ -41,6 +42,9 @@ export default function CheckboxesGroup({graph, setGraph, subject,handleSubject,
   return (
 
       <Box sx={{ display: 'flex', justifyContent: 'center',border:'2px solid #eab464', borderRadius: '5px', '&:hover':{boxShadow:5 },width:'500px', ml:4, mr:4, mt:0.1}}>
+        {/* <Container>
+         <Typography>Hi</Typography>
+        </Container> */}
         <FormControl sx={{mt:3, width:'140px'}} component="fieldset" variant="standard">
           <RadioGroup
             aria-label ledby="demo-radio-buttons-group-label"
@@ -112,10 +116,10 @@ export default function CheckboxesGroup({graph, setGraph, subject,handleSubject,
               size="small"
               select
             >
-              <MenuItem value={'read prompt'} >read prompt</MenuItem>
-              <MenuItem value={'whiteboard'} >whiteboard</MenuItem>
-              <MenuItem value={'pseudocode'} >pseudocode</MenuItem>
-              <MenuItem value={'write code'} >write code</MenuItem>
+              <MenuItem value={'read prompt'} disabled>read prompt</MenuItem>
+              <MenuItem value={'whiteboard'} disabled>whiteboard</MenuItem>
+              <MenuItem value={'pseudocode'} disabled>pseudocode</MenuItem>
+              <MenuItem value={'write code'} disabled>write code</MenuItem>
               <MenuItem value={'whole process'} >whole process</MenuItem>
             </StyledInput>
           </FormControl>

diff --git a/src/components/HomePage/HomeGraphs/PieGraph.js b/src/components/HomePage/HomeGraphs/PieGraph.js
@@ -6,6 +6,11 @@ import MenuBar from './MenuBar.js';
 import data from  './sampleData.js';
 import axios from 'axios';
 import useGlobalContext from '../../../context/GlobalContext.js'
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
+import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Collapse from '@mui/material/Collapse';
 
 export default function Pie() {
   const { userProblemArray } = useGlobalContext();
@@ -18,6 +23,9 @@ export default function Pie() {
   const [range, setRange]=React.useState('year');
   const [language, setLanguage]=React.useState('Javascript');
 
+  const [toggleGraphMenu, setToggleGraphMenu] = React.useState(false);
+
+
   const handleTime = (event: SelectChangeEvent) => {
     setTime(event.target.value);
   };
@@ -264,13 +272,26 @@ const option = {
     }
   ]
 };
+
+
+
 return (
-  <Stack>
-    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px',  ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027', borderRadius: 4, padding: 3}}>
+  <Stack style={{height: '605px'}}>
+    <Box sx={{ '&:hover':{boxShadow:3}, width:'500px', ml:4, mr:4, mt:1,mb:2, backgroundColor:'#1A2027',borderTopLeftRadius: 4, borderTopRightRadius: 4, padding: 3}}>
       <ReactEcharts option={option} />
     </Box>
-    <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+      <Container sx={{backgroundColor: '#1A2027', width: '500px', padding: 1}}>
+        <div style={{display: 'flex', justifyContent: 'center'}}>
+        <IconButton sx={{right: '30%'}} onClick={() => setToggleGraphMenu(!toggleGraphMenu)}>
+        {toggleGraphMenu ? (<ArrowDropUp/>) : (<ArrowDropDown />)}
+        </IconButton>
+        <Typography style={{marginRight: '1%'}}>Hide Graph Menu</Typography>
+        </div>
 
+      </Container>
+      <Collapse in={toggleGraphMenu}>
+      <MenuBar graph={graph} setGraph={setGraph} subject= {subject} handleSubject={handleSubject} selection={selection} setSelection={setSelection} time={time} range={range} language={language} handleRange={handleRange} handleLanguage={handleLanguage} handleTime={handleTime} handleGraph={handleGraph} handleSelection={handleSelection}/>
+      </Collapse>
   </Stack>
 )
 }
diff --git a/src/styles/pageLayout.css b/src/styles/pageLayout.css
@@ -27,8 +27,8 @@
   bottom: 0;
   top: 0;
   margin-top: 0;
-  height: 80vh;
-  background: url('../assets/Darwin_Logo_transparent.png') no-repeat right bottom, radial-gradient(circle at 50% 50%, rgb(107, 120, 152), rgb(0, 0, 0), rgb(0, 0, 0));
+  height: 60vh;
+  background: url('../assets/Darwin_Logo_transparent.png') no-repeat center , radial-gradient(circle at 50% 50%, rgb(107, 120, 152), rgb(0, 0, 0), rgb(0, 0, 0));
   background-size: 10%, auto;
   opacity: 0.2, auto;
 }