diff --git a/src/Components/Pages/Alumni.js b/src/Components/Pages/Alumni.js index 1ad4644..88ad93d 100644 --- a/src/Components/Pages/Alumni.js +++ b/src/Components/Pages/Alumni.js @@ -4,7 +4,7 @@ import { Link } from "react-router-dom"; import { ALUMNI } from "../../util/constants"; // material ui component -import { makeStyles } from "@material-ui/core/styles"; +import { useStyles } from "../Styles/Alumni.styles"; import Grid from "@material-ui/core/Grid"; import Container from "@material-ui/core/Container"; import Typography from "@material-ui/core/Typography"; @@ -17,38 +17,6 @@ import ChatBox from "../Layouts/ChatBox"; import "../style.css"; import { ThemeContext } from "../../util/themeContext"; -const useStyles = makeStyles({ - root: { - flexGrow: 1, - marginTop: "100px", - marginBottom: 20, - minHeight: "580px", - }, - card: { - display: "flex", - flexDirection: "column", - alignItems: "center", - padding: "25px 0px", - boxShadow: " 0px 4px 8px rgba(0, 0, 0, 0.25) !important", - lineHeight: "20px", - }, - link: { - textDecoration: "none", - color: "#000", - margin: "5px", - }, - circle: { - width: 125, - margin: "20px", - borderRadius: 100, - margin: "50px #fff", - boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)", - }, - name: { - marginTop: "15px", - }, -}); - export default function Team() { const classes = useStyles(); const { theme: currentTheme } = useContext(ThemeContext); diff --git a/src/Components/Pages/Contactus.js b/src/Components/Pages/Contactus.js index af960bb..182dea0 100644 --- a/src/Components/Pages/Contactus.js +++ b/src/Components/Pages/Contactus.js @@ -1,51 +1,50 @@ -import React, { useState, useContext } from 'react'; +import React, { useState, useContext } from "react"; //material ui component -import Container from '@material-ui/core/Container'; +import Container from "@material-ui/core/Container"; import { Typography, Hidden, Grid, Button, - CardContent -} from '@material-ui/core'; -import Card from '@material-ui/core/Card'; -import { FormGroup } from '@material-ui/core'; -import Divider from '@material-ui/core/Divider'; -import '../style.css'; -import { TwitterTimelineEmbed } from 'react-twitter-embed'; -import Alert from '../Layouts/Alerts'; -import AlertContext from '../../context/alert/alertContext'; -import AuthContext from '../../context/auth/authContext'; -import { backendUrl } from '../../context/types'; -import axios from 'axios'; -import SendIcon from '@material-ui/icons/Send'; + CardContent, +} from "@material-ui/core"; +import Card from "@material-ui/core/Card"; +import { FormGroup } from "@material-ui/core"; +import Divider from "@material-ui/core/Divider"; +import "../style.css"; +import { TwitterTimelineEmbed } from "react-twitter-embed"; +import Alert from "../Layouts/Alerts"; +import AlertContext from "../../context/alert/alertContext"; +import AuthContext from "../../context/auth/authContext"; +import { backendUrl } from "../../context/types"; +import axios from "axios"; +import SendIcon from "@material-ui/icons/Send"; const sectionStyle = { - width: '100%', - - backgroundRepeat: 'no-repeat', - marginTop: '100px', - backgroundPositionX: 'center', - + width: "100%", + + backgroundRepeat: "no-repeat", + marginTop: "100px", + backgroundPositionX: "center", }; const style = { form: { - padding: '20px', + padding: "20px", text: { - appearance: 'none', - width: '100%', + appearance: "none", + width: "100%", - height: '35px', + height: "35px", - borderRadius: '5px', - outline: 'none', - border: 'none', - background: '#e8ebed', - color: '#576366', - fontSize: '14px' - } - } + borderRadius: "5px", + outline: "none", + border: "none", + background: "#e8ebed", + color: "#576366", + fontSize: "14px", + }, + }, }; const Contactus = () => { @@ -56,53 +55,56 @@ const Contactus = () => { const { error, loading, clearErrors, showLoading } = authContext; const [details, setDetails] = useState({ - Firstname: '', - Lastname: '', - Email: '', - Mobile: '', - Reason: '' + Firstname: "", + Lastname: "", + Email: "", + Mobile: "", + Reason: "", }); const { FirstName, LastName, Email, Mobile, Reason } = details; - const handleChange = e => { + const handleChange = (e) => { setDetails({ ...details, - [e.target.name]: e.target.value + [e.target.name]: e.target.value, }); }; - const submitContact = async e => { - console.log('called submit contact'); + const submitContact = async (e) => { + console.log("called submit contact"); e.preventDefault(); showLoading({ data: true }); let contactData = { - name: FirstName + ' ' + LastName, + name: FirstName + " " + LastName, email: Email, contact: Mobile, - query: Reason + query: Reason, }; try { - let res = await axios.post(backendUrl + '/api/contact', contactData); - if (res.data.msg == 'Query submitted successfully') { - setAlert(res.data.msg, 'success'); + let res = await axios.post( + backendUrl + "/api/contact", + contactData + ); + if (res.data.msg == "Query submitted successfully") { + setAlert(res.data.msg, "success"); setDetails({ - FirstName: '', - LastName: '', - Email: '', - Mobile: '', - Reason: '' + FirstName: "", + LastName: "", + Email: "", + Mobile: "", + Reason: "", }); } else { - setAlert(res.data.msg, 'danger'); + setAlert(res.data.msg, "danger"); } clearErrors(); } catch (err) { - console.log('Error:', err); + console.log("Error:", err); setAlert( - 'Error occured while submitting your query.Please try again or write to us at technojam@galogtiasuniversity.edu.in', - 'danger' + "Error occured while submitting your query.Please try again or write to us at technojam@galogtiasuniversity.edu.in", + "danger" ); clearErrors(); showLoading({ data: false }); @@ -110,28 +112,34 @@ const Contactus = () => { }; return ( - +
- + -
+

Get in touch @@ -139,8 +147,8 @@ const Contactus = () => { Get in touch @@ -150,7 +158,7 @@ const Contactus = () => {
-
+ @@ -160,8 +168,8 @@ const Contactus = () => { @@ -172,8 +180,8 @@ const Contactus = () => { @@ -184,8 +192,8 @@ const Contactus = () => { @@ -194,8 +202,8 @@ const Contactus = () => { @@ -204,16 +212,16 @@ const Contactus = () => {
- + @@ -245,9 +270,9 @@ const Events = () => {
@@ -256,18 +281,18 @@ const Events = () => {
{eventMessage} @@ -275,45 +300,50 @@ const Events = () => { ) : ( - paevent.map(event => ( + paevent.map((event) => (
{event.name}
- + - {new Date(event.date).toDateString()} + + {new Date( + event.date + ).toDateString()} + - + {event.description} @@ -321,21 +351,31 @@ const Events = () => { {event.longDescription} - + - + - @@ -380,35 +424,39 @@ const Events = () => { - Submit Feedback + + Submit Feedback + - Please submit your feedback. + + Please submit your feedback. +
{ setRatingValue(newValue); @@ -417,10 +465,10 @@ const Events = () => {
- - diff --git a/src/Components/Pages/Login.js b/src/Components/Pages/Login.js index ced92d3..fff30c0 100644 --- a/src/Components/Pages/Login.js +++ b/src/Components/Pages/Login.js @@ -1,64 +1,54 @@ -import React from 'react'; -import { Paper, TextField, Container, Typography, Button } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import React from "react"; +import { + Paper, + TextField, + Container, + Typography, + Button, +} from "@material-ui/core"; /* @person who is assigned this page set your styles here. height 600 is just for layout.*/ -const useStyles = makeStyles({ - mentorship: { - marginTop: '100px' - }, - paper: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '20px 30px 30px', - opacity: '1', - marginBottom: '2%' - }, - textField: { - marginTop: '15px' - }, - logInButton: { - textTransform: 'uppercase', - marginTop: '15px', - fontWeight: 'bold' - } -}); - const Login = () => { - const classes = useStyles(); - return ( - - - -
- Log In - - - - - - - ); + const classes = useStyles(); + return ( + + + +
+ Log In + + + + + + + ); }; export default Login; diff --git a/src/Components/Pages/Mentorship.js b/src/Components/Pages/Mentorship.js index 7a2c94d..5e8fb5d 100644 --- a/src/Components/Pages/Mentorship.js +++ b/src/Components/Pages/Mentorship.js @@ -9,7 +9,7 @@ import "../style.css"; import { Color } from "../color"; import { Projects } from "../../util/projects"; import { ThemeContext } from "../../util/themeContext"; -import styled from "styled-components"; +import Mentorship from "../Styles/Mentorship.styles"; /* FIXME: When the target will be decided, remove the rel attribute. * It has been added here for security reasons. * Reference: https://mathiasbynens.github.io/rel-noopener/ @@ -17,24 +17,6 @@ import styled from "styled-components"; const Mentorship = () => { const { theme: currentTheme } = useContext(ThemeContext); - const Background = styled.div` - width: 100%; - background-repeat: no-repeat; - margin-top: 40px; - color: ${currentTheme === "light" ? "black" : "white"}; - &:after { - z-index: -5; - content: ""; - background-image: url(https://tj-static.s3.ap-south-1.amazonaws.com/etc/pro.jpg); - filter: invert(${currentTheme === "dark" ? 1 : 0}); - width: 100%; - height: 100vh; - position: absolute; - top: 0; - background-position-x: center; - background-size: cover; - } - `; const [projects] = useState([ { @@ -64,7 +46,7 @@ const Mentorship = () => { return (
- +
{
- +
diff --git a/src/Components/Pages/Resources.js b/src/Components/Pages/Resources.js index 5675d24..edb5548 100644 --- a/src/Components/Pages/Resources.js +++ b/src/Components/Pages/Resources.js @@ -1,20 +1,20 @@ -import React from 'react'; -import Container from '@material-ui/core/Container'; +import React from "react"; +import Container from "@material-ui/core/Container"; /** - * @person who is assigned this page set your styles + * @person who is assigned this page set your styles * here. height 600 is just for layout. */ const style = { - minHeight: '600px', - padding: '100px' + minHeight: "600px", + padding: "100px", }; const Resources = () => ( - -
- Resources coming soon in version 2.0 -
- + +
+ Resources coming soon in version 2.0 +
+ ); export default Resources; diff --git a/src/Components/Pages/Team.js b/src/Components/Pages/Team.js index a580412..9bab175 100644 --- a/src/Components/Pages/Team.js +++ b/src/Components/Pages/Team.js @@ -4,7 +4,7 @@ import { Link } from "react-router-dom"; import { TEAM_MEMBERS } from "../../util/constants"; // material ui component -import { makeStyles } from "@material-ui/core/styles"; +import { useStyles } from "../Styles/Team.styles"; import Grid from "@material-ui/core/Grid"; import Tooltip from "@material-ui/core/Tooltip"; import Container from "@material-ui/core/Container"; @@ -12,16 +12,6 @@ import Typography from "@material-ui/core/Typography"; import "../style.css"; import { ThemeContext } from "../../util/themeContext"; -const useStyles = makeStyles({ - root: { - flexGrow: 1, - - marginTop: "100px", - marginBottom: 20, - minHeight: "580px", - }, -}); - const circle = { width: 80, borderRadius: 40, diff --git a/src/Components/Pages/dashboard/AddEvent.js b/src/Components/Pages/dashboard/AddEvent.js index bca799d..8b05e94 100644 --- a/src/Components/Pages/dashboard/AddEvent.js +++ b/src/Components/Pages/dashboard/AddEvent.js @@ -1,274 +1,307 @@ -import React from 'react'; -import AddEventSectionOne from './AddEventSectionOne'; -import PropTypes from 'prop-types'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import clsx from 'clsx'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; -import Check from '@material-ui/icons/Check'; -import GroupIcon from '@material-ui/icons/Group'; -import NotesIcon from '@material-ui/icons/Notes'; -import EventIcon from '@material-ui/icons/Event'; -import StepConnector from '@material-ui/core/StepConnector'; -import Button from '@material-ui/core/Button'; -import AddEventSectionTwo from './AddEventSectionTwo'; -import AddEventSectionThree from './AddEventSectionThree'; +import React from "react"; +import AddEventSectionOne from "./AddEventSectionOne"; +import PropTypes from "prop-types"; +import { makeStyles, withStyles } from "@material-ui/core/styles"; +import clsx from "clsx"; +import Stepper from "@material-ui/core/Stepper"; +import Step from "@material-ui/core/Step"; +import StepLabel from "@material-ui/core/StepLabel"; +import Check from "@material-ui/icons/Check"; +import GroupIcon from "@material-ui/icons/Group"; +import NotesIcon from "@material-ui/icons/Notes"; +import EventIcon from "@material-ui/icons/Event"; +import StepConnector from "@material-ui/core/StepConnector"; +import Button from "@material-ui/core/Button"; +import AddEventSectionTwo from "./AddEventSectionTwo"; +import AddEventSectionThree from "./AddEventSectionThree"; const useQontoStepIconStyles = makeStyles({ - root: { - color: '#eaeaf0', - display: 'flex', - height: 22, - alignItems: 'center', - }, - content: { - height: 538 - }, - active: { - color: '#784af4', - }, - circle: { - width: 8, - height: 8, - borderRadius: '50%', - backgroundColor: 'currentColor', - }, - completed: { - color: '#784af4', - zIndex: 1, - fontSize: 18, - }, + root: { + color: "#eaeaf0", + display: "flex", + height: 22, + alignItems: "center", + }, + content: { + height: 538, + }, + active: { + color: "#784af4", + }, + circle: { + width: 8, + height: 8, + borderRadius: "50%", + backgroundColor: "currentColor", + }, + completed: { + color: "#784af4", + zIndex: 1, + fontSize: 18, + }, }); function QontoStepIcon(props) { - const classes = useQontoStepIconStyles(); - const { active, completed } = props; + const classes = useQontoStepIconStyles(); + const { active, completed } = props; - return ( -
- {completed ? :
} -
- ); + return ( +
+ {completed ? ( + + ) : ( +
+ )} +
+ ); } QontoStepIcon.propTypes = { - /** - * Whether this step is active. - */ - active: PropTypes.bool, - /** - * Mark the step as completed. Is passed to child components. - */ - completed: PropTypes.bool, + /** + * Whether this step is active. + */ + active: PropTypes.bool, + /** + * Mark the step as completed. Is passed to child components. + */ + completed: PropTypes.bool, }; const ColorlibConnector = withStyles({ - alternativeLabel: { - top: 22, - }, - active: { - '& $line': { - backgroundImage: - 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)', - }, - }, - completed: { - '& $line': { - backgroundImage: - 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)', - }, - }, - line: { - height: 3, - border: 0, - backgroundColor: '#eaeaf0', - borderRadius: 1, - }, + alternativeLabel: { + top: 22, + }, + active: { + "& $line": { + backgroundImage: + "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)", + }, + }, + completed: { + "& $line": { + backgroundImage: + "linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)", + }, + }, + line: { + height: 3, + border: 0, + backgroundColor: "#eaeaf0", + borderRadius: 1, + }, })(StepConnector); const useColorlibStepIconStyles = makeStyles({ - root: { - backgroundColor: '#ccc', - zIndex: 1, - color: '#fff', - width: 50, - height: 50, - display: 'flex', - borderRadius: '50%', - justifyContent: 'center', - alignItems: 'center', - '@media (max-width: 660px)' : { - width: 35, - height: 35 - } - }, - active: { - backgroundImage: - 'linear-gradient( 136deg, #e83b7c 25%, #45c5ee 100%)', - boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', - }, - completed: { - backgroundImage: - 'linear-gradient( 136deg, #e83b7c 25%, #45c5ee 100%)', - }, + root: { + backgroundColor: "#ccc", + zIndex: 1, + color: "#fff", + width: 50, + height: 50, + display: "flex", + borderRadius: "50%", + justifyContent: "center", + alignItems: "center", + "@media (max-width: 660px)": { + width: 35, + height: 35, + }, + }, + active: { + backgroundImage: "linear-gradient( 136deg, #e83b7c 25%, #45c5ee 100%)", + boxShadow: "0 4px 10px 0 rgba(0,0,0,.25)", + }, + completed: { + backgroundImage: "linear-gradient( 136deg, #e83b7c 25%, #45c5ee 100%)", + }, }); function ColorlibStepIcon(props) { - const classes = useColorlibStepIconStyles(); - const { active, completed } = props; - const icons = { - 1: , - 2: , - 3: , - }; + const classes = useColorlibStepIconStyles(); + const { active, completed } = props; + const icons = { + 1: , + 2: , + 3: , + }; - return ( -
- {icons[String(props.icon)]} -
- ); + return ( +
+ {icons[String(props.icon)]} +
+ ); } ColorlibStepIcon.propTypes = { - /** - * Whether this step is active. - */ - active: PropTypes.bool, - /** - * Mark the step as completed. Is passed to child components. - */ - completed: PropTypes.bool, - /** - * The label displayed in the step icon. - */ - icon: PropTypes.node, + /** + * Whether this step is active. + */ + active: PropTypes.bool, + /** + * Mark the step as completed. Is passed to child components. + */ + completed: PropTypes.bool, + /** + * The label displayed in the step icon. + */ + icon: PropTypes.node, }; const useStyles = makeStyles((theme) => ({ - root: { - width: '30rem', - margin: 'auto', - '@media (max-width: 660px)' : { - width: '100%', - '& .MuiStepper-root': { - marginLeft: '-8%' - } - }, - '@media (max-width: 400px)' : { - '& .MuiStepper-root': { - marginLeft: '-17%' - } - }, - }, - content: { - height: 300, - display: 'grid', - alignItems: 'center', - alignContent: 'center', - '& .MuiFormGroup-root': { - marginBottom: 15 - } - }, - button: { - marginRight: theme.spacing(1), - backgroundColor: '#e83b7c', - color: 'white', - '&:hover': { - background: '#e580a5' - }, - '&:focus': { - outline: 'none' - } - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - error: { - color: 'red', - fontWeight: 'bold' - } + root: { + width: "30rem", + margin: "auto", + "@media (max-width: 660px)": { + width: "100%", + "& .MuiStepper-root": { + marginLeft: "-8%", + }, + }, + "@media (max-width: 400px)": { + "& .MuiStepper-root": { + marginLeft: "-17%", + }, + }, + }, + content: { + height: 300, + display: "grid", + alignItems: "center", + alignContent: "center", + "& .MuiFormGroup-root": { + marginBottom: 15, + }, + }, + button: { + marginRight: theme.spacing(1), + backgroundColor: "#e83b7c", + color: "white", + "&:hover": { + background: "#e580a5", + }, + "&:focus": { + outline: "none", + }, + }, + instructions: { + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), + }, + error: { + color: "red", + fontWeight: "bold", + }, })); function getSteps() { - return ['Event Details', 'Date and Location', 'Attendee Info & Pricing']; + return ["Event Details", "Date and Location", "Attendee Info & Pricing"]; } -const AddEvent = ({handleChange, handleEventType, handleIsPaid, details, formComplete}) => { - const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const steps = getSteps(); +const AddEvent = ({ + handleChange, + handleEventType, + handleIsPaid, + details, + formComplete, +}) => { + const classes = useStyles(); + const [activeStep, setActiveStep] = React.useState(0); + const steps = getSteps(); - const handleNext = () => { - console.log('ACTIVE STEP', activeStep + 1); - if (activeStep === 2) { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - } - if(activeStep < 3) { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - } - }; + const handleNext = () => { + console.log("ACTIVE STEP", activeStep + 1); + if (activeStep === 2) { + setActiveStep((prevActiveStep) => prevActiveStep - 1); + } + if (activeStep < 3) { + setActiveStep((prevActiveStep) => prevActiveStep + 1); + } + }; - const handleBack = () => { - console.log('ACTIVE STEP', activeStep - 1); - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; + const handleBack = () => { + console.log("ACTIVE STEP", activeStep - 1); + setActiveStep((prevActiveStep) => prevActiveStep - 1); + }; - - return ( -
-
- {activeStep === 0 ? - : activeStep === 1 ? - : activeStep === 2 ? - : null} -
- }> - {steps.map((label) => ( - - {label} - - ))} - -
-
-
- {formComplete === false &&

Please make sure all required fields are filled in before submitting event!

} - - -
-
-
-
- ); -} + return ( +
+
+ {activeStep === 0 ? ( + + ) : activeStep === 1 ? ( + + ) : activeStep === 2 ? ( + + ) : null} +
+ } + > + {steps.map((label) => ( + + + {label} + + + ))} + +
+
+
+ {formComplete === false && ( +

+ Please make sure all required fields are filled + in before submitting event! +

+ )} + + +
+
+
+
+ ); +}; AddEvent.propTypes = { - handleChange: PropTypes.func, - handleEventType: PropTypes.func, - handleIsPaid: PropTypes.func, - details: PropTypes.object, - formComplete: PropTypes.bool + handleChange: PropTypes.func, + handleEventType: PropTypes.func, + handleIsPaid: PropTypes.func, + details: PropTypes.object, + formComplete: PropTypes.bool, }; -export default AddEvent; \ No newline at end of file +export default AddEvent; diff --git a/src/Components/Pages/dashboard/AddEventSectionOne.js b/src/Components/Pages/dashboard/AddEventSectionOne.js index c54fbe4..767b586 100644 --- a/src/Components/Pages/dashboard/AddEventSectionOne.js +++ b/src/Components/Pages/dashboard/AddEventSectionOne.js @@ -1,118 +1,92 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FormGroup } from '@material-ui/core'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import { makeStyles } from '@material-ui/core/styles'; +import React from "react"; +import PropTypes from "prop-types"; +import { FormGroup } from "@material-ui/core"; +import ToggleButton from "@material-ui/lab/ToggleButton"; +import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; +import { useStyles } from "../../Styles/dashboard.styles/AddEventSectionOne.styles"; const style = { - marginTop: '112px', + marginTop: "112px", form: { text: { - appearance: 'none', - width: '100%', - padding: '5px', - height: '35px', - borderRadius: '5px', - outline: 'none', - border: 'none', - background: '#e8ebed', - color: '#576366', - fontSize: '14px' - } - } + appearance: "none", + width: "100%", + padding: "5px", + height: "35px", + borderRadius: "5px", + outline: "none", + border: "none", + background: "#e8ebed", + color: "#576366", + fontSize: "14px", + }, + }, }; -const useStyles = makeStyles(() => ({ - eventTypeGroup: { - '& .MuiToggleButton-root.Mui-selected': { - backgroundColor: '#ffeef8', - color: 'black', - border: '2px solid #e83b7c', - '& p' : { - borderBottom: 'black 2px solid' - } - }, - '& *:focus': { - outline: 'none' - } - }, - eventTypeLeft: { - backgroundColor: 'none', - borderRadius: '.5rem 0 0 .5rem', - color: 'black', - width: 70, - height: 42, - paddingTop: 15, - border: '2px solid #e83b7c' - }, - eventTypeRight: { - backgroundColor: 'none', - borderRadius: '0 .5rem .5rem 0', - color: 'black', - width: 70, - height: 42, - paddingTop: 15, - border: '2px solid #e83b7c' - }, - label: { - color: '#e83b7c' - } - })); +const AddEventSectionOne = ({ handleChange, handleEventType, details }) => { + const classes = useStyles(); -const AddEventSectionOne = ({handleChange, handleEventType, details}) => { -const classes = useStyles(); + return ( + + + -return ( - - - - - - - - - - -

Single

- - -

Team

- - - - - - - - - - - - -) -} + + + + + + +

Single

+ + +

Team

+ + + + + + + + + + + + + ); +}; AddEventSectionOne.propTypes = { - handleChange: PropTypes.func, - handleEventType: PropTypes.func, - details: PropTypes.object + handleChange: PropTypes.func, + handleEventType: PropTypes.func, + details: PropTypes.object, }; -export default AddEventSectionOne; \ No newline at end of file +export default AddEventSectionOne; diff --git a/src/Components/Pages/dashboard/AddEventSectionThree.js b/src/Components/Pages/dashboard/AddEventSectionThree.js index 1e233f2..52fd7d2 100644 --- a/src/Components/Pages/dashboard/AddEventSectionThree.js +++ b/src/Components/Pages/dashboard/AddEventSectionThree.js @@ -1,137 +1,106 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { FormGroup } from '@material-ui/core'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; -import { makeStyles } from '@material-ui/core/styles'; - +import React from "react"; +import PropTypes from "prop-types"; +import { FormGroup } from "@material-ui/core"; +import ToggleButton from "@material-ui/lab/ToggleButton"; +import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup"; +import { useStyles } from "../../Styles/dashboard.styles/AddEventSectionThree.styles"; const style = { - marginTop: '112px', + marginTop: "112px", form: { text: { - appearance: 'none', - width: '100%', - padding: '5px', - height: '35px', - borderRadius: '5px', - outline: 'none', - border: 'none', - background: '#e8ebed', - color: '#576366', - fontSize: '14px' - }, - textDisabled: { - appearance: 'none', - width: '100%', - padding: '5px', - height: '35px', - borderRadius: '5px', - outline: 'none', - border: 'none', - background: 'rgb(212, 213, 214)', - color: '#576366', - fontSize: '14px' - }, - label: { - color: '#e83b7c' - } - } + appearance: "none", + width: "100%", + padding: "5px", + height: "35px", + borderRadius: "5px", + outline: "none", + border: "none", + background: "#e8ebed", + color: "#576366", + fontSize: "14px", + }, + textDisabled: { + appearance: "none", + width: "100%", + padding: "5px", + height: "35px", + borderRadius: "5px", + outline: "none", + border: "none", + background: "rgb(212, 213, 214)", + color: "#576366", + fontSize: "14px", + }, + label: { + color: "#e83b7c", + }, + }, }; -const useStyles = makeStyles(() => ({ - eventTypeGroup: { - '& .MuiToggleButton-root.Mui-selected': { - backgroundColor: '#ffeef8', - color: 'black', - border: '2px solid #e83b7c', - '& p' : { - borderBottom: 'black 2px solid' - } - }, - '& *:focus': { - outline: 'none' - } - }, - eventTypeLeft: { - backgroundColor: 'none', - borderRadius: '.5rem 0 0 .5rem', - color: 'black', - width: 70, - height: 42, - paddingTop: 15, - border: '2px solid #e83b7c' - }, - eventTypeRight: { - backgroundColor: 'none', - borderRadius: '0 .5rem .5rem 0', - color: 'black', - width: 70, - height: 42, - paddingTop: 15, - border: '2px solid #e83b7c' - } - })); - -const AddEventSectionThree = ({handleChange, handleIsPaid, details}) => { -const classes = useStyles(); +const AddEventSectionThree = ({ handleChange, handleIsPaid, details }) => { + const classes = useStyles(); -return ( - - - - - -

Yes

- - -

No

- - - - - - - - - - - - - - - - -) -} + return ( + + + + + +

Yes

+ + +

No

+ + + + + + + + + + + + + + + + + ); +}; AddEventSectionThree.propTypes = { - handleChange: PropTypes.func, - handleIsPaid: PropTypes.func, - details: PropTypes.object + handleChange: PropTypes.func, + handleIsPaid: PropTypes.func, + details: PropTypes.object, }; -export default AddEventSectionThree; \ No newline at end of file +export default AddEventSectionThree; diff --git a/src/Components/Pages/dashboard/Dashboard.js b/src/Components/Pages/dashboard/Dashboard.js index ad82f73..77e873f 100644 --- a/src/Components/Pages/dashboard/Dashboard.js +++ b/src/Components/Pages/dashboard/Dashboard.js @@ -1,149 +1,64 @@ -import React from 'react'; -import clsx from 'clsx'; -import { makeStyles } from '@material-ui/core/styles'; -import CssBaseline from '@material-ui/core/CssBaseline'; -import Drawer from '@material-ui/core/Drawer'; -import AppBar from '@material-ui/core/AppBar'; -import Toolbar from '@material-ui/core/Toolbar'; -import List from '@material-ui/core/List'; -import Typography from '@material-ui/core/Typography'; -import Divider from '@material-ui/core/Divider'; -import IconButton from '@material-ui/core/IconButton'; -import Badge from '@material-ui/core/Badge'; -import Container from '@material-ui/core/Container'; -import Grid from '@material-ui/core/Grid'; -import Paper from '@material-ui/core/Paper'; -import Link from '@material-ui/core/Link'; -import ListItem from '@material-ui/core/ListItem'; -import ListItemIcon from '@material-ui/core/ListItemIcon'; -import ListItemText from '@material-ui/core/ListItemText'; -import ListSubheader from '@material-ui/core/ListSubheader'; -import DashboardIcon from '@material-ui/icons/Dashboard'; -import PeopleIcon from '@material-ui/icons/People'; -import BarChartIcon from '@material-ui/icons/BarChart'; -import LayersIcon from '@material-ui/icons/Layers'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import ContactSupportIcon from '@material-ui/icons/ContactSupport'; -import ChevronLeftIcon from '@material-ui/icons/ChevronLeft'; -import ChevronRightIcon from '@material-ui/icons/ChevronRight'; -import { mainListItems, secondaryListItems } from './listitems'; -import ContactTable from './ContactTable'; -import Event from './Event'; -import Main from './Main'; -import Team from './Team'; -import Users from './Users'; -import Profile from './Profile' +import React from "react"; +import clsx from "clsx"; +import { useStyles } from "../../Styles/dashboard.styles/Dashboard.styles"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import Drawer from "@material-ui/core/Drawer"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import List from "@material-ui/core/List"; +import Typography from "@material-ui/core/Typography"; +import Divider from "@material-ui/core/Divider"; +import IconButton from "@material-ui/core/IconButton"; +import Badge from "@material-ui/core/Badge"; +import Container from "@material-ui/core/Container"; +import Grid from "@material-ui/core/Grid"; +import Paper from "@material-ui/core/Paper"; +import Link from "@material-ui/core/Link"; +import ListItem from "@material-ui/core/ListItem"; +import ListItemIcon from "@material-ui/core/ListItemIcon"; +import ListItemText from "@material-ui/core/ListItemText"; +import ListSubheader from "@material-ui/core/ListSubheader"; +import DashboardIcon from "@material-ui/icons/Dashboard"; +import PeopleIcon from "@material-ui/icons/People"; +import BarChartIcon from "@material-ui/icons/BarChart"; +import LayersIcon from "@material-ui/icons/Layers"; +import AssignmentIcon from "@material-ui/icons/Assignment"; +import ContactSupportIcon from "@material-ui/icons/ContactSupport"; +import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; +import ChevronRightIcon from "@material-ui/icons/ChevronRight"; +import { mainListItems, secondaryListItems } from "./listitems"; +import ContactTable from "./ContactTable"; +import Event from "./Event"; +import Main from "./Main"; +import Team from "./Team"; +import Users from "./Users"; +import Profile from "./Profile"; function Copyright() { return ( - - {'Copyright © '} - + + {"Copyright © "} + technojam.tech - {' '} + {" "} {new Date().getFullYear()} - {'.'} + {"."} ); } const drawerWidth = 200; -const useStyles = makeStyles(theme => ({ - root: { - display: 'flex' - }, - toolbar: { - paddingRight: 24 // keep right padding when drawer closed - }, - toolbarIcon: { - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-end', - padding: '0 8px', - ...theme.mixins.toolbar - }, - appBar: { - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen - }) - }, - appBarShift: { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) - }, - menuButton: { - marginRight: 36 - }, - menuButtonHidden: { - display: 'none' - }, - title: { - flexGrow: 1 - }, - drawerPaper: { - - whiteSpace: 'nowrap', - marginTop: '64px', - width: drawerWidth, - height: `calc(100% - 130px)`, - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen - }) - }, - drawerPaperClose: { - overflowX: 'hidden', - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen - }), - marginTop: '64px', - width: theme.spacing(7), - height: `calc(100% - 130px)`, - [theme.breakpoints.up('sm')]: { - width: theme.spacing(9) - } - }, - appBarSpacer: theme.mixins.toolbar, - content: { - flexGrow: 1, - height: '100vh', - overflow: 'auto', - - }, - container: { - paddingTop: theme.spacing(1), - paddingBottom: theme.spacing(2), - - }, - paper: { - padding: theme.spacing(2), - display: 'flex', - overflow: 'auto', - flexDirection: 'column' - }, - fixedHeight: { - height: 240 - } -})); - export default function Dashboard() { const classes = useStyles(); const [open, setOpen] = React.useState(false); const [currentComponent, setCurrentComponent] = React.useState(0); - const changeComponent = c => { + const changeComponent = (c) => { setCurrentComponent(c); }; const loadComponent = () => { - console.log('loadComponent called'); + console.log("loadComponent called"); switch (currentComponent) { case 0: return
; @@ -175,9 +90,12 @@ export default function Dashboard() {
@@ -198,49 +116,50 @@ export default function Dashboard() { - + changeComponent(1)}> - + changeComponent(2)}> - + changeComponent(3)}> - + changeComponent(4)}> - + changeComponent(5)}> - + -
- + - - {loadComponent()} + + + {loadComponent()} + diff --git a/src/Components/Pages/dashboard/FormSubmitted.js b/src/Components/Pages/dashboard/FormSubmitted.js index f590b1d..3626347 100644 --- a/src/Components/Pages/dashboard/FormSubmitted.js +++ b/src/Components/Pages/dashboard/FormSubmitted.js @@ -1,59 +1,30 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Typography, Button } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; +import React from "react"; +import PropTypes from "prop-types"; +import { Typography, Button } from "@material-ui/core"; +import { useStyles } from "../../Styles/dashboard.styles/FormSubmitted.styles"; +const FormSubmitted = ({ handleAdditional }) => { + const classes = useStyles(); -const useStyles = makeStyles(() => ({ - content: { - textAlign: 'center', - height: 300, - display: 'grid', - alignItems: 'center', - alignContent: 'center' - }, - message: { - fontFamily: 'Roboto', - letterSpacing: '1px', - fontSize: '22px', - marginBottom: 19 - }, - button: { - backgroundColor: '#e83b7c', - color: 'white', - width: 210, - margin: 'auto', - '&:hover': { - background: '#e580a5' - }, - '&:focus': { - outline: 'none' - } - } - })); - -const FormSubmitted = ({handleAdditional}) => { -const classes = useStyles(); - -return ( -
- - Your event has been added! - - -
-) -} + return ( +
+ + Your event has been added! + + +
+ ); +}; FormSubmitted.propTypes = { - handleAdditional: PropTypes.func + handleAdditional: PropTypes.func, }; -export default FormSubmitted; \ No newline at end of file +export default FormSubmitted; diff --git a/src/Components/Pages/dashboard/Users.js b/src/Components/Pages/dashboard/Users.js index 3b20a58..4caa1f4 100644 --- a/src/Components/Pages/dashboard/Users.js +++ b/src/Components/Pages/dashboard/Users.js @@ -1,49 +1,42 @@ -import React, { useState,useContext } from 'react'; - +import React, { useState, useContext } from "react"; //material ui component -import TableCell from '@material-ui/core/TableCell'; -import TableHead from '@material-ui/core/TableHead'; -import TablePagination from '@material-ui/core/TablePagination'; -import TableRow from '@material-ui/core/TableRow'; -import { lighten, makeStyles } from '@material-ui/core/styles'; -import Table from '@material-ui/core/Table'; -import TableBody from '@material-ui/core/TableBody'; -import Modal from '@material-ui/core/Modal'; -import Backdrop from '@material-ui/core/Backdrop'; -import TextField from '@material-ui/core/TextField'; -import Fade from '@material-ui/core/Fade'; -import Button from '@material-ui/core/Button'; -import Container from '@material-ui/core/Container'; -import Grid from '@material-ui/core/Grid'; -import Divider from '@material-ui/core/Divider'; -import Card from '@material-ui/core/Card'; -import CardContent from '@material-ui/core/CardContent'; -import PropTypes from 'prop-types'; -import { FormGroup } from '@material-ui/core'; -import EditIcon from '@material-ui/icons/Edit'; -import ListIcon from '@material-ui/icons/List'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -import DeleteIcon from '@material-ui/icons/Delete'; -import IconButton from '@material-ui/core/IconButton'; -import Tooltip from '@material-ui/core/Tooltip'; -import Switch from '@material-ui/core/Switch'; -import RefreshIcon from '@material-ui/icons/Refresh'; -import clsx from 'clsx'; - - - - - -import TableSortLabel from '@material-ui/core/TableSortLabel'; -import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; -import Paper from '@material-ui/core/Paper'; - - - -function createData(id, name, batch, email, linkedin, github,image) { - return { id, name, batch, email, linkedin, github,image }; +import TableCell from "@material-ui/core/TableCell"; +import TableHead from "@material-ui/core/TableHead"; +import TablePagination from "@material-ui/core/TablePagination"; +import TableRow from "@material-ui/core/TableRow"; +import { lighten, makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import Modal from "@material-ui/core/Modal"; +import Backdrop from "@material-ui/core/Backdrop"; +import TextField from "@material-ui/core/TextField"; +import Fade from "@material-ui/core/Fade"; +import Button from "@material-ui/core/Button"; +import Container from "@material-ui/core/Container"; +import Grid from "@material-ui/core/Grid"; +import Divider from "@material-ui/core/Divider"; +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import PropTypes from "prop-types"; +import { FormGroup } from "@material-ui/core"; +import EditIcon from "@material-ui/icons/Edit"; +import ListIcon from "@material-ui/icons/List"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import DeleteIcon from "@material-ui/icons/Delete"; +import IconButton from "@material-ui/core/IconButton"; +import Tooltip from "@material-ui/core/Tooltip"; +import Switch from "@material-ui/core/Switch"; +import RefreshIcon from "@material-ui/icons/Refresh"; +import clsx from "clsx"; + +import TableSortLabel from "@material-ui/core/TableSortLabel"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import Paper from "@material-ui/core/Paper"; + +function createData(id, name, batch, email, linkedin, github, image) { + return { id, name, batch, email, linkedin, github, image }; } let rows = []; @@ -65,11 +58,11 @@ function stableSort(array, cmp) { if (order !== 0) return order; return a[1] - b[1]; }); - return stabilizedThis.map(el => el[0]); + return stabilizedThis.map((el) => el[0]); } function getSorting(order, orderBy) { - return order === 'desc' + return order === "desc" ? (a, b) => desc(a, b, orderBy) : (a, b) => -desc(a, b, orderBy); } @@ -79,22 +72,22 @@ let onDeleteClicked; const headCells = [ { - id: 'name', + id: "name", numeric: false, disablePadding: true, - label: 'Name' + label: "Name", }, { - id: 'calories', + id: "calories", numeric: true, disablePadding: false, - label: 'User id' + label: "User id", }, - { id: 'fat', numeric: false, disablePadding: false, label: 'email' }, - { id: 'carbs', numeric: true, disablePadding: false, label: 'batch' }, - { id: 'protein', numeric: false, disablePadding: false, label: 'linkedin' }, - { id: 'weed', numeric: false, disablePadding: false, label: 'github' }, - { id: 'myth', numeric: false, disablePadding: false, label: 'image' } + { id: "fat", numeric: false, disablePadding: false, label: "email" }, + { id: "carbs", numeric: true, disablePadding: false, label: "batch" }, + { id: "protein", numeric: false, disablePadding: false, label: "linkedin" }, + { id: "weed", numeric: false, disablePadding: false, label: "github" }, + { id: "myth", numeric: false, disablePadding: false, label: "image" }, ]; function EnhancedTableHead(props) { @@ -105,7 +98,7 @@ function EnhancedTableHead(props) { orderBy, numSelected, rowCount, - onRequestSort + onRequestSort, } = props; return ( @@ -129,134 +122,143 @@ EnhancedTableHead.propTypes = { numSelected: PropTypes.number.isRequired, onRequestSort: PropTypes.func.isRequired, onSelectAllClick: PropTypes.func.isRequired, - order: PropTypes.oneOf(['asc', 'desc']).isRequired, + order: PropTypes.oneOf(["asc", "desc"]).isRequired, orderBy: PropTypes.string.isRequired, - rowCount: PropTypes.number.isRequired + rowCount: PropTypes.number.isRequired, }; -const useToolbarStyles = makeStyles(theme => ({ +const useToolbarStyles = makeStyles((theme) => ({ root: { paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(1) + paddingRight: theme.spacing(1), }, highlight: - theme.palette.type === 'light' + theme.palette.type === "light" ? { - color: theme.palette.secondary.main, - backgroundColor: lighten(theme.palette.secondary.light, 0.85) - } + color: theme.palette.secondary.main, + backgroundColor: lighten( + theme.palette.secondary.light, + 0.85 + ), + } : { - color: theme.palette.text.primary, - backgroundColor: theme.palette.secondary.dark - }, + color: theme.palette.text.primary, + backgroundColor: theme.palette.secondary.dark, + }, spacer: { - flex: '1 1 100%' + flex: "1 1 100%", }, actions: { - color: theme.palette.text.secondary + color: theme.palette.text.secondary, }, title: { - flex: '0 0 auto' - } + flex: "0 0 auto", + }, })); -const EnhancedTableToolbar = props => { +const EnhancedTableToolbar = (props) => { const classes = useToolbarStyles(); const { numSelected } = props; return ( 0 + [classes.highlight]: numSelected > 0, })} >
{numSelected > 0 ? ( - + {numSelected} selected ) : ( - - Users - - )} + + Users + + )}
{numSelected > 0 ? ( - - + + ) : ( - - - - - - )} + + + + + + )}
); }; EnhancedTableToolbar.propTypes = { - numSelected: PropTypes.number.isRequired + numSelected: PropTypes.number.isRequired, }; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - width: '100%', - marginTop: theme.spacing(3) + width: "100%", + marginTop: theme.spacing(3), }, paper: { - width: '100%', - marginBottom: theme.spacing(2) + width: "100%", + marginBottom: theme.spacing(2), }, table: { - minWidth: 750 + minWidth: 750, }, tableWrapper: { - overflowX: 'auto' + overflowX: "auto", }, visuallyHidden: { border: 0, - clip: 'rect(0 0 0 0)', + clip: "rect(0 0 0 0)", height: 1, margin: -1, - overflow: 'hidden', + overflow: "hidden", padding: 0, - position: 'absolute', + position: "absolute", top: 20, - width: 1 - } + width: 1, + }, })); const style = { - marginTop: '112px', + marginTop: "112px", form: { - padding: '20px', - width: '100%', - marginLeft: 'auto', - marginRight: 'auto', + padding: "20px", + width: "100%", + marginLeft: "auto", + marginRight: "auto", text: { - appearance: 'none', - width: '100%', - padding: '5px', - height: '35px', - borderRadius: '5px', - outline: 'none', - border: 'none', - background: '#e8ebed', - color: '#576366', - fontSize: '14px' - } - } + appearance: "none", + width: "100%", + padding: "5px", + height: "35px", + borderRadius: "5px", + outline: "none", + border: "none", + background: "#e8ebed", + color: "#576366", + fontSize: "14px", + }, + }, }; const useStylesModal = makeStyles((theme) => ({ modal: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', + display: "flex", + alignItems: "center", + justifyContent: "center", }, paper: { backgroundColor: theme.palette.background.paper, @@ -266,11 +268,10 @@ const useStylesModal = makeStyles((theme) => ({ }, })); - export default function UserTable() { const classes = useStyles(); - const [order, setOrder] = React.useState('asc'); - const [orderBy, setOrderBy] = React.useState('calories'); + const [order, setOrder] = React.useState("asc"); + const [orderBy, setOrderBy] = React.useState("calories"); const [selected, setSelected] = React.useState([]); const [page, setPage] = React.useState(0); const [dense, setDense] = React.useState(false); @@ -279,13 +280,9 @@ export default function UserTable() { const classesModal = useStylesModal(); const [open, setOpen] = React.useState(false); - - - - const handleRequestSort = (users, property) => { - const isDesc = orderBy === property && order === 'desc'; - setOrder(isDesc ? 'asc' : 'desc'); + const isDesc = orderBy === property && order === "desc"; + setOrder(isDesc ? "asc" : "desc"); setOrderBy(property); }; @@ -293,32 +290,32 @@ export default function UserTable() { setPage(newPage); }; - const handleChangeRowsPerPage = user => { + const handleChangeRowsPerPage = (user) => { setRowsPerPage(+user.target.value); setPage(0); }; - const handleChangeDense = user => { + const handleChangeDense = (user) => { setDense(user.target.checked); }; - const isSelected = name => selected.indexOf(name) !== -1; + const isSelected = (name) => selected.indexOf(name) !== -1; const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage); onRefreshClicked = () => { - console.log('refreshing list'); + console.log("refreshing list"); }; onDeleteClicked = () => { - console.log('cids:', selected); + console.log("cids:", selected); // deleteContact(selected); }; const editUser = () => { handleOpen(); - console.log("Edit is now working") - } + console.log("Edit is now working"); + }; //Modal const handleOpen = () => { setOpen(true); @@ -328,201 +325,291 @@ export default function UserTable() { setOpen(false); }; - return(<> -
- - -
- - - - - technoTest - 2019-2023 - technotest12.phy@gmail.com - https://LinkedInUrl - https://GithubUrl - ProfileUrl - - - editUser()} /> - - -
-

Edit User

-
- - - - - - - -

- - - - - - -

- - - - - - - - -

- - - - - - - - -

- - - - - - -

- - - - - - - - - - - - +
+ + +
+
+ + + + technoTest + 2019-2023 + + technotest12.phy@gmail.com + + https://LinkedInUrl + https://GithubUrl + ProfileUrl + + + editUser()} /> - -

- - - -

-
- - - - - - - - - - - - - - - - - - - - {emptyRows > 0 && ( - - + + +
+

+ Edit User +

+
+
+ + + + + + +

+ + + + + + +

+ + + + + + + + +

+ + + + + + + + +

+ + + + + + +

+ + + + + + + + + + + + + +

+ + + +

+
+ + + + +
+
+ + + + + + + + + - )} - -
-
- 0 && ( + + + + )} + + +
+ + + + } + label="Dense padding" /> - - } - label='Dense padding' - /> -
- +
+ ); - - - - - - -}//end +} //end diff --git a/src/Components/Styles/Aboutus.styles.js b/src/Components/Styles/Aboutus.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Achievements.styles.js b/src/Components/Styles/Achievements.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Alumni.styles.js b/src/Components/Styles/Alumni.styles.js new file mode 100644 index 0000000..1027ce3 --- /dev/null +++ b/src/Components/Styles/Alumni.styles.js @@ -0,0 +1,33 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles({ + root: { + flexGrow: 1, + marginTop: "100px", + marginBottom: 20, + minHeight: "580px", + }, + card: { + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "25px 0px", + boxShadow: " 0px 4px 8px rgba(0, 0, 0, 0.25) !important", + lineHeight: "20px", + }, + link: { + textDecoration: "none", + color: "#000", + margin: "5px", + }, + circle: { + width: 125, + margin: "20px", + borderRadius: 100, + margin: "50px #fff", + boxShadow: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)", + }, + name: { + marginTop: "15px", + }, +}); diff --git a/src/Components/Styles/Contactus.styles.js b/src/Components/Styles/Contactus.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Events.styles.js b/src/Components/Styles/Events.styles.js new file mode 100644 index 0000000..f8aadaf --- /dev/null +++ b/src/Components/Styles/Events.styles.js @@ -0,0 +1,12 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles((theme) => ({ + container: { + display: "flex", + flexWrap: "wrap", + }, + textField: { + marginLeft: theme.spacing(1), + marginRight: theme.spacing(1), + }, +})); diff --git a/src/Components/Styles/Groups.styles.js b/src/Components/Styles/Groups.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Homepage.styles.js b/src/Components/Styles/Homepage.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Index.styles.js b/src/Components/Styles/Index.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Login.styles.js b/src/Components/Styles/Login.styles.js new file mode 100644 index 0000000..8454bcf --- /dev/null +++ b/src/Components/Styles/Login.styles.js @@ -0,0 +1,23 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles({ + mentorship: { + marginTop: "100px", + }, + paper: { + display: "flex", + flexDirection: "column", + alignItems: "center", + padding: "20px 30px 30px", + opacity: "1", + marginBottom: "2%", + }, + textField: { + marginTop: "15px", + }, + logInButton: { + textTransform: "uppercase", + marginTop: "15px", + fontWeight: "bold", + }, +}); diff --git a/src/Components/Styles/Mentorship.styles.js b/src/Components/Styles/Mentorship.styles.js new file mode 100644 index 0000000..4426c73 --- /dev/null +++ b/src/Components/Styles/Mentorship.styles.js @@ -0,0 +1,22 @@ +import styled from "styled-components"; + +const Mentorship = styled.div` + width: 100%; + background-repeat: no-repeat; + margin-top: 40px; + color: ${currentTheme === "light" ? "black" : "white"}; + &:after { + z-index: -5; + content: ""; + background-image: url(https://tj-static.s3.ap-south-1.amazonaws.com/etc/pro.jpg); + filter: invert(${currentTheme === "dark" ? 1 : 0}); + width: 100%; + height: 100vh; + position: absolute; + top: 0; + background-position-x: center; + background-size: cover; + } +`; + +export default Mentorship; diff --git a/src/Components/Styles/Pannel.styles.js b/src/Components/Styles/Pannel.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Profile.styles.js b/src/Components/Styles/Profile.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/ProfilePage.styles.js b/src/Components/Styles/ProfilePage.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Resources.styles.js b/src/Components/Styles/Resources.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/Team.styles.js b/src/Components/Styles/Team.styles.js new file mode 100644 index 0000000..9a80637 --- /dev/null +++ b/src/Components/Styles/Team.styles.js @@ -0,0 +1,11 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles({ + root: { + flexGrow: 1, + + marginTop: "100px", + marginBottom: 20, + minHeight: "580px", + }, +}); diff --git a/src/Components/Styles/dashboard.styles/AddEvent.styles.js b/src/Components/Styles/dashboard.styles/AddEvent.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/AddEventSectionOne.styles.js b/src/Components/Styles/dashboard.styles/AddEventSectionOne.styles.js new file mode 100644 index 0000000..edca98c --- /dev/null +++ b/src/Components/Styles/dashboard.styles/AddEventSectionOne.styles.js @@ -0,0 +1,38 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles(() => ({ + eventTypeGroup: { + "& .MuiToggleButton-root.Mui-selected": { + backgroundColor: "#ffeef8", + color: "black", + border: "2px solid #e83b7c", + "& p": { + borderBottom: "black 2px solid", + }, + }, + "& *:focus": { + outline: "none", + }, + }, + eventTypeLeft: { + backgroundColor: "none", + borderRadius: ".5rem 0 0 .5rem", + color: "black", + width: 70, + height: 42, + paddingTop: 15, + border: "2px solid #e83b7c", + }, + eventTypeRight: { + backgroundColor: "none", + borderRadius: "0 .5rem .5rem 0", + color: "black", + width: 70, + height: 42, + paddingTop: 15, + border: "2px solid #e83b7c", + }, + label: { + color: "#e83b7c", + }, +})); diff --git a/src/Components/Styles/dashboard.styles/AddEventSectionThree.styles.js b/src/Components/Styles/dashboard.styles/AddEventSectionThree.styles.js new file mode 100644 index 0000000..0d1b9c3 --- /dev/null +++ b/src/Components/Styles/dashboard.styles/AddEventSectionThree.styles.js @@ -0,0 +1,35 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles(() => ({ + eventTypeGroup: { + "& .MuiToggleButton-root.Mui-selected": { + backgroundColor: "#ffeef8", + color: "black", + border: "2px solid #e83b7c", + "& p": { + borderBottom: "black 2px solid", + }, + }, + "& *:focus": { + outline: "none", + }, + }, + eventTypeLeft: { + backgroundColor: "none", + borderRadius: ".5rem 0 0 .5rem", + color: "black", + width: 70, + height: 42, + paddingTop: 15, + border: "2px solid #e83b7c", + }, + eventTypeRight: { + backgroundColor: "none", + borderRadius: "0 .5rem .5rem 0", + color: "black", + width: 70, + height: 42, + paddingTop: 15, + border: "2px solid #e83b7c", + }, +})); diff --git a/src/Components/Styles/dashboard.styles/AddEventSectionTwo.styles.js b/src/Components/Styles/dashboard.styles/AddEventSectionTwo.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/ContactTable.styles.js b/src/Components/Styles/dashboard.styles/ContactTable.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/Dashboard.styles.js b/src/Components/Styles/dashboard.styles/Dashboard.styles.js new file mode 100644 index 0000000..4ebf3d3 --- /dev/null +++ b/src/Components/Styles/dashboard.styles/Dashboard.styles.js @@ -0,0 +1,83 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + }, + toolbar: { + paddingRight: 24, // keep right padding when drawer closed + }, + toolbarIcon: { + display: "flex", + alignItems: "center", + justifyContent: "flex-end", + padding: "0 8px", + ...theme.mixins.toolbar, + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + }, + appBarShift: { + marginLeft: drawerWidth, + width: `calc(100% - ${drawerWidth}px)`, + transition: theme.transitions.create(["width", "margin"], { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + menuButton: { + marginRight: 36, + }, + menuButtonHidden: { + display: "none", + }, + title: { + flexGrow: 1, + }, + drawerPaper: { + whiteSpace: "nowrap", + marginTop: "64px", + width: drawerWidth, + height: `calc(100% - 130px)`, + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.enteringScreen, + }), + }, + drawerPaperClose: { + overflowX: "hidden", + transition: theme.transitions.create("width", { + easing: theme.transitions.easing.sharp, + duration: theme.transitions.duration.leavingScreen, + }), + marginTop: "64px", + width: theme.spacing(7), + height: `calc(100% - 130px)`, + [theme.breakpoints.up("sm")]: { + width: theme.spacing(9), + }, + }, + appBarSpacer: theme.mixins.toolbar, + content: { + flexGrow: 1, + height: "100vh", + overflow: "auto", + }, + container: { + paddingTop: theme.spacing(1), + paddingBottom: theme.spacing(2), + }, + paper: { + padding: theme.spacing(2), + display: "flex", + overflow: "auto", + flexDirection: "column", + }, + fixedHeight: { + height: 240, + }, +})); diff --git a/src/Components/Styles/dashboard.styles/Event.styles.js b/src/Components/Styles/dashboard.styles/Event.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/EventTable.styles.js b/src/Components/Styles/dashboard.styles/EventTable.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/FormSubmitted.styles.js b/src/Components/Styles/dashboard.styles/FormSubmitted.styles.js new file mode 100644 index 0000000..5d5cb61 --- /dev/null +++ b/src/Components/Styles/dashboard.styles/FormSubmitted.styles.js @@ -0,0 +1,29 @@ +import { makeStyles } from "@material-ui/core/styles"; + +export const useStyles = makeStyles(() => ({ + content: { + textAlign: "center", + height: 300, + display: "grid", + alignItems: "center", + alignContent: "center", + }, + message: { + fontFamily: "Roboto", + letterSpacing: "1px", + fontSize: "22px", + marginBottom: 19, + }, + button: { + backgroundColor: "#e83b7c", + color: "white", + width: 210, + margin: "auto", + "&:hover": { + background: "#e580a5", + }, + "&:focus": { + outline: "none", + }, + }, +})); diff --git a/src/Components/Styles/dashboard.styles/ListItems.styles.js b/src/Components/Styles/dashboard.styles/ListItems.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/Main.styles.js b/src/Components/Styles/dashboard.styles/Main.styles.js new file mode 100644 index 0000000..e69de29 diff --git a/src/Components/Styles/dashboard.styles/Profile.styles.js b/src/Components/Styles/dashboard.styles/Profile.styles.js new file mode 100644 index 0000000..e69de29