Merge pull request #1 from Thamanmuthappa/dev

Dev

package.json

@@ -19,14 +19,15 @@
 		"moment": "^2.29.1",
 		"react": "^17.0.1",
 		"react-clear-cache": "^1.4.11",
-		"react-countdown": "^2.3.1",
+		"react-countdown": "^2.3.2",
 		"react-dom": "^17.0.1",
 		"react-dropzone": "^11.2.4",
 		"react-hook-form": "^6.13.1",
 		"react-material-ui-carousel": "^2.1.1",
 		"react-router-dom": "^5.2.0",
 		"react-scripts": "4.0.1",
 		"react-socks": "^2.1.0",
+		"react-webcam": "^6.0.0",
 		"web-vitals": "^0.2.4"
 	},
 	"scripts": {

public/index.html

@@ -52,7 +52,7 @@
 	<meta property="og:description"
 		content="One stop solution to make club, team and chapter recruitments in VIT simpler and hassle free.">
 	<meta property="og:url" content="https://cet-portal.codechefvit.com">
-	<meta name="theme-color" content="#E31E43">
+	<meta name="theme-color" content="#1799E1">
 	<meta property="og:image" itemprop="image" content="%PUBLIC_URL%/logo.png">
 	<link rel="icon" href="%PUBLIC_URL%/favicon.png" type="image/png">
 	<link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" type="image/png">

public/manifest.json

@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#E31E43",
+  "theme_color": "#1799E1",
   "background_color": "#FFFFFF"
 }

src/App.css

@@ -2,7 +2,8 @@
 
 .form-input {
   width: 100% !important;
-  background-color: #fdf9f9 !important;
+  background-color: #081220 !important;
+  color: #fff !important;
 }
 
 .light-text {
@@ -16,17 +17,18 @@ a {
 .custom-action-btn {
   font-weight: bold !important;
   border-radius: 50px !important;
-  padding-left: 50px !important;
-  padding-right: 50px !important;
+  padding: 10px 15px !important;
+  /* padding-left: 50px !important;
+  padding-right: 50px !important; */
 }
 
 ::-moz-selection {
-  background: #e31e43;
+  background: #1799E1;
   color: #fff;
 }
 
 ::selection {
-  background: #e31e43;
+  background: #1799E1;
   color: #fff;
 }
 
@@ -39,7 +41,7 @@ a {
 }
 
 .profile-banner {
-  margin-top: 50px;
+  /* margin-top: 50px; */
   max-height: 500px !important;
   border-radius: 12px;
 }

src/App.jsx

@@ -7,12 +7,38 @@ import ErrorPage from "./pages/ErrorPage";
 import StudentRoutes from "./routes/StudentRoutes";
 import ClubRoutes from "./routes/ClubRoutes";
 import { Breakpoint, BreakpointProvider } from "react-socks";
-
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
 import OrgProfile from "./pages/ClubProfile";
 import CCProfile from "./pages/CCProfile";
 
+const theme = createTheme({
+    palette: {
+        type: "dark",
+        background: {
+            default: "#081220",
+            paper: "#081220",
+        },
+        primary: {
+            main: "#1799E1",
+        },
+        secondary: {
+			main: "#1799E1",
+		},
+        // whitetext: {
+		// 	main: "#fafafa",
+		// },
+		// pureWhite: {
+		// 	main: "#FFFFFF",
+		// },
+    },
+    typography: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    }
+  });
+
 function App() {
     return (
+        <ThemeProvider theme={theme}>
         <div className="App">
             <BreakpointProvider>
                 <Breakpoint medium down>
@@ -37,6 +63,7 @@ function App() {
                 </Breakpoint>
             </BreakpointProvider>
         </div>
+        </ThemeProvider>
     );
 }
 

src/components/Club/DomainAddModal.css

@@ -0,0 +1,3 @@
+.MuiInputBase-root {
+    background-color: rgba(255, 255, 255, 0.342);
+}

src/components/Club/DomainAddModal.jsx

@@ -8,7 +8,9 @@ import {
 	TextField,
 	Typography,
 } from "@material-ui/core";
+import './DomainAddModal.css'
 import Axios from "axios";
+
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
@@ -61,11 +63,12 @@ const DomainAddModal = ({ open, handleClose, id, refresh, clubId }) => {
 
 	return (
 		<Dialog onClose={handleClose} open={open} fullWidth>
-			<DialogTitle>Add a Domain</DialogTitle>
-			<DialogContent>
+			<DialogTitle style={{color: "white", background:"#252D3A"}}>Add a Domain</DialogTitle>
+			<DialogContent style={{color: "white", background:"#252D3A"}}>
 				<form
 					id="add-domain-form"
 					onSubmit={handleSubmit(handleFormSubmit)}
+					style={{color: "white", background:"#252D3A"}}
 				>
 					<TextField
 						variant="outlined"
@@ -118,7 +121,7 @@ const DomainAddModal = ({ open, handleClose, id, refresh, clubId }) => {
 					</div>
 				</form>
 			</DialogContent>
-			<DialogActions>
+			<DialogActions style={{color: "white", background:"#252D3A"}}>
 				<Button
 					variant="contained"
 					color="primary"

src/components/Club/DomainTile/ClubDomainTile.css

@@ -2,8 +2,8 @@
 	width: 200px;
 	height: 200px;
 	border-radius: 10px;
-	background: linear-gradient(to bottom, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
-	color: white;
+	background: linear-gradient(180deg, #1799E1 0%, #093966 100%) !important;
+	color: "081220";
 	font-weight: bold;
 	display: flex;
 	justify-content: center;
@@ -16,6 +16,7 @@
 .tile-title {
 	font-size: 1.4rem;
 	text-align: center;
+	color: white;
 }
 
 .club-domain-tile:hover {

src/components/Club/QuestionAddModal.jsx

@@ -25,6 +25,8 @@ import CreateMultipleCorrect from "./QuestionForms/CreateMultipleCorrect";
 const useStyle = makeStyles((theme) => ({
   drawer: {
     width: 200,
+    color: "white",
+    background: "#081220",
   },
 }));
 
@@ -78,14 +80,14 @@ const QuestionAddModal = ({
       onClose={handleClose}
       open={open}
       fullScreen
-      style={{ zIndex: 1500 }}
+      style={{ zIndex: 1500, background: "#081220" }}
       TransitionComponent={Transition}>
       <AppBar style={{ zIndex: 1401 }}>
         <Toolbar>
           <IconButton onClick={handleClose}>
             <Close style={{ fill: "white" }} />
           </IconButton>
-          <Typography variant='h6' style={{ flex: 1 }}>
+          <Typography variant='h6' style={{ flex: 1 , color: "white"}}>
             Add a Question
           </Typography>
           <Button
@@ -109,13 +111,14 @@ const QuestionAddModal = ({
                 onClick={() => setSelectedType(type.id)}>
                 <ListItemText primary={type.name} />
               </ListItem>
-              <Divider />
+              <Divider style={{background:"#F5F5F540"}}/>
             </div>
           ))}
         </List>
       </Drawer>
-      <div className='create-question-area'>
-        <Typography variant='h4'>Enter Question details</Typography>
+      <div className='create-question-area' style={{background: "#081220"}}>
+        <Typography variant='h4' style={{color: "#fff"}}>Enter Question details</Typography>
+        <Divider style={{background:"#F5F5F540", marginTop: "1%", marginRight:"15%"}}/>
         <div className='create-question-display'>
           {selectedType === 1 ? (
             <CreateSingleCorrect

src/components/Club/QuestionForms/CreateLongQuestion.jsx

@@ -4,12 +4,23 @@ import {
 	Switch,
 	TextField,
 	Typography,
+	makeStyles
 } from "@material-ui/core";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 import "./QuestionForms.css";
 import { postQuestionInDomain } from "../../../API/POST";
 
+const useStyles = makeStyles((theme) => ({
+	input: {
+	  color: "#FFF",
+	},
+	label: {
+	  color: "#FFF",
+	},
+  }));
+
+
 const CreateLongQuestion = ({
 	testId,
 	domainId,
@@ -71,10 +82,11 @@ const CreateLongQuestion = ({
 
 		setLoading(false);
 	};
+	const classes = useStyles();
 
 	return (
 		<div className="create-question-form">
-			<Typography variant="h6" className="light-text">
+			<Typography variant="h6" style={{color: "#fff"}}>
 				Question type: <strong>Long Answer</strong>
 			</Typography>
 			<form id="create-question-4" onSubmit={handleSubmit(submit)}>
@@ -83,30 +95,41 @@ const CreateLongQuestion = ({
 					rows={4}
 					name="description"
 					variant="outlined"
-					label="Question Description"
+					placeholder="Question Description"
+					floatingLabelStyle="white"
 					className="create-question-text-input"
 					inputRef={register({ required: true })}
 					value={question.description}
 					onChange={handleFormChange}
+					inputProps={{ className: classes.input }} 
+					InputLabelProps={{ style: { color: '#fff' },}}
 				/>{" "}
 				<br />
+				<Typography style={{color: "white"}}>
+					<strong>Marks:</strong>
+				</Typography>
 				<TextField
 					name="questionMarks"
 					type="number"
+					floatingLabelStyle="white"
 					variant="outlined"
-					label="Question Marks"
+					// label="Question Marks"
 					inputRef={register({ required: true })}
 					value={question.questionMarks}
 					onChange={handleFormChange}
+					inputProps={{ className: classes.input }} 
+					InputLabelProps={{ style: { color: '#fff' },}}
 				/>
 				<br />
-				<div className="media-switch">
+				<div className="media-switch" style={{marginLeft:"-1.25%"}}>
 					<FormControlLabel
+						style={{ color: "#fff" }}
 						control={
 							<Switch
 								checked={isMedia}
 								onChange={(e) => setIsMedia(e.target.checked)}
 							/>
+
 						}
 						label="Add Media (Image/Audio/Video): "
 						labelPlacement="start"
@@ -115,13 +138,15 @@ const CreateLongQuestion = ({
 				<div
 					style={{ display: isMedia ? "block" : "none" }}
 					className="add-media-section"
+
 				>
 					<input
 						type="file"
 						name="media"
 						onChange={(e) => setMedia(e.target.files[0])}
 						accept=".jpg,.jpeg,.png,.mp3,.wav,.mp4,.mkv,.mov"
 						ref={register({ required: isMedia })}
+						style={{ color: "#fff" }}
 					/>
 				</div>
 			</form>