Skip to content

Commit a10c09c

Browse files
spec-nithspec-nith
authored
Merge pull request #12 from ArpitSiNgh08/main
Sign Up page and Task Allocater page changed
2 parents d29fc80 + a242b3b commit a10c09c

9 files changed

Lines changed: 349 additions & 193 deletions

File tree

‎frontend/src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import TaskAllocatorPage from "./components/task_allocator/TaskAllocatorPage";
1010
import MyTasks from "./components/task_allocator/MyTasks";
1111
import Signup from "./components/Authentication/Signup";
1212
import Geo from "./components/geolocation/App";
13+
import theme from "./theme";
1314

1415
const App = () => {
1516
useEffect(() => {
@@ -29,7 +30,7 @@ const App = () => {
2930

3031
return (
3132
<Router>
32-
<ChakraProvider>
33+
<ChakraProvider theme={theme}>
3334
<ChatProvider>
3435
<WorkspaceProvider>
3536
<div className="container">

‎frontend/src/assets/signup.png‎

7.75 MB
Loading

‎frontend/src/components/Authentication/Signup.js‎

Lines changed: 154 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import axios from "axios";
77
import { useState } from "react";
88
import { useNavigate } from "react-router-dom";
99
import { API_URL } from "../../config/api.config";
10+
import { Box, Flex, Stack, Text, Image } from "@chakra-ui/react";
11+
import signupimg from "../../assets/signup.png";
1012

1113
const Signup = () => {
1214
const [show, setShow] = useState(false);
@@ -132,71 +134,159 @@ const Signup = () => {
132134
};
133135

134136
return (
135-
<VStack spacing="5px">
136-
<FormControl id="first-name" isRequired>
137-
<FormLabel>Name</FormLabel>
138-
<Input
139-
placeholder="Enter Your Name"
140-
onChange={(e) => setName(e.target.value)}
141-
/>
142-
</FormControl>
143-
<FormControl id="email" isRequired>
144-
<FormLabel>Email Address</FormLabel>
145-
<Input
146-
type="email"
147-
placeholder="Enter Your Email Address"
148-
onChange={(e) => setEmail(e.target.value)}
149-
/>
150-
</FormControl>
151-
<FormControl id="password" isRequired>
152-
<FormLabel>Password</FormLabel>
153-
<InputGroup size="md">
154-
<Input
155-
type={show ? "text" : "password"}
156-
placeholder="Enter Password"
157-
onChange={(e) => setPassword(e.target.value)}
158-
/>
159-
<InputRightElement width="4.5rem">
160-
<Button h="1.75rem" size="sm" onClick={handleClick}>
161-
{show ? "Hide" : "Show"}
162-
</Button>
163-
</InputRightElement>
164-
</InputGroup>
165-
</FormControl>
166-
<FormControl id="password" isRequired>
167-
<FormLabel>Confirm Password</FormLabel>
168-
<InputGroup size="md">
169-
<Input
170-
type={show ? "text" : "password"}
171-
placeholder="Confirm password"
172-
onChange={(e) => setConfirmpassword(e.target.value)}
173-
/>
174-
<InputRightElement width="4.5rem">
175-
<Button h="1.75rem" size="sm" onClick={handleClick}>
176-
{show ? "Hide" : "Show"}
177-
</Button>
178-
</InputRightElement>
179-
</InputGroup>
180-
</FormControl>
181-
<FormControl id="pic">
182-
<FormLabel>Upload your Picture</FormLabel>
183-
<Input
184-
type="file"
185-
p={1.5}
186-
accept="image/*"
187-
onChange={(e) => postDetails(e.target.files[0])}
188-
/>
189-
</FormControl>
190-
<Button
191-
colorScheme="blue"
192-
width="100%"
193-
style={{ marginTop: 15 }}
194-
onClick={submitHandler}
195-
isLoading={picLoading}
137+
<Flex
138+
minHeight="100vh"
139+
width="100%"
140+
align="center"
141+
justify="center"
142+
bg="#0f1924"
143+
>
144+
<Box
145+
bg="#1b3046ff"
146+
width={["90%", "90%","90%","70%"]}
147+
p={8}
148+
borderRadius="lg"
149+
boxShadow="lg"
150+
196151
>
197-
Sign Up
198-
</Button>
199-
</VStack>
152+
<Text
153+
textAlign="center"
154+
fontSize="4xl"
155+
fontWeight="600"
156+
fontFamily="head"
157+
textColor="#fff"
158+
>Create Your Account</Text>
159+
<Stack
160+
direction={["column", "column", "row"]}
161+
spacing={8}
162+
align="center"
163+
justify="center"
164+
>
165+
<Box
166+
width={["100%", "100%", "60%"]}
167+
>
168+
<VStack spacing="5px" >
169+
<FormControl id="first-name" isRequired>
170+
<FormLabel mb={0} mt={3} fontFamily="subhead" textColor="lgrey">Name</FormLabel>
171+
<Input
172+
fontFamily="content"
173+
placeholder="Enter Your Name"
174+
onChange={(e) => setName(e.target.value)}
175+
/>
176+
</FormControl>
177+
<FormControl id="email" isRequired>
178+
<FormLabel mb={0} mt={3} fontFamily="subhead" textColor="lgrey">Email Address</FormLabel>
179+
<Input
180+
fontFamily="content"
181+
type="email"
182+
placeholder="Enter Your Email Address"
183+
onChange={(e) => setEmail(e.target.value)}
184+
/>
185+
</FormControl>
186+
<FormControl id="password" isRequired>
187+
<FormLabel mb={0} mt={3} fontFamily="subhead" textColor="lgrey">Password</FormLabel>
188+
<InputGroup size="md">
189+
<Input
190+
fontFamily="content"
191+
type={show ? "text" : "password"}
192+
placeholder="Enter Password"
193+
onChange={(e) => setPassword(e.target.value)}
194+
/>
195+
<InputRightElement width="4.5rem">
196+
<Button h="1.75rem" size="sm" onClick={handleClick}>
197+
{show ? "Hide" : "Show"}
198+
</Button>
199+
</InputRightElement>
200+
</InputGroup>
201+
</FormControl>
202+
<FormControl id="password" isRequired>
203+
<FormLabel mb={0} mt={3} fontFamily="subhead" textColor="lgrey">Confirm Password</FormLabel>
204+
<InputGroup size="md">
205+
<Input
206+
fontFamily="content"
207+
type={show ? "text" : "password"}
208+
placeholder="Confirm password"
209+
onChange={(e) => setConfirmpassword(e.target.value)}
210+
/>
211+
<InputRightElement width="4.5rem">
212+
<Button h="1.75rem" size="sm" onClick={handleClick}>
213+
{show ? "Hide" : "Show"}
214+
</Button>
215+
</InputRightElement>
216+
</InputGroup>
217+
</FormControl>
218+
<FormControl id="pic">
219+
<FormLabel mb={0} mt={3} fontFamily="subhead" textColor="lgrey">Upload your Picture</FormLabel>
220+
<Box position="relative" width="100%">
221+
<Input
222+
type="file"
223+
accept="image/*"
224+
onChange={(e) => postDetails(e.target.files[0])}
225+
position="absolute"
226+
left={0}
227+
top={0}
228+
width="100%"
229+
height="100%"
230+
opacity={0}
231+
zIndex={2}
232+
cursor="pointer"
233+
/>
234+
<Button
235+
as="span"
236+
bg="#05549e"
237+
color="white"
238+
width="100%"
239+
fontFamily="subhead"
240+
_hover={{ bg: "#0c77dbff" }}
241+
zIndex={1}
242+
>
243+
Choose Profile Photo
244+
</Button>
245+
</Box>
246+
</FormControl>
247+
248+
</VStack>
249+
</Box>
250+
<Box
251+
width={["100%", "100%", "60%"]}
252+
display="flex"
253+
justifyContent="center"
254+
alignItems="center"
255+
mt={[8, 8, 0]}
256+
>
257+
<Image
258+
src={signupimg}
259+
alt="Description"
260+
boxSize={["270px", "300px", "350px"]}
261+
objectFit="cover"
262+
borderRadius="lg"
263+
/>
264+
</Box>
265+
266+
267+
268+
</Stack>
269+
<Button
270+
bg="#05549e"
271+
width="80%"
272+
alignItems="center"
273+
justifyContent="center"
274+
rounded={50}
275+
style={{ marginTop: 15 }}
276+
onClick={submitHandler}
277+
isLoading={picLoading}
278+
textColor="white"
279+
fontFamily="subhead"
280+
_hover={{ bg: "#025fb6ff" }}
281+
mx="auto"
282+
display="block"
283+
>
284+
Sign Up
285+
</Button>
286+
</Box>
287+
288+
</Flex>
289+
200290
);
201291
};
202292

‎frontend/src/components/task_allocator/AllocatedTasks.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ const AllocatedTasks = () => {
7373

7474
return (
7575
<Box p={5}>
76-
<Text fontSize="2xl" mb={4} fontWeight="bold">
76+
<Text fontSize="4xl" mb={4} fontWeight="500" fontFamily="head" textColor="#fff">
7777
Tasks I've Allocated
7878
</Text>
7979
{tasks.length === 0 ? (

‎frontend/src/components/task_allocator/StatusPanel.js‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,32 @@ const StatusPanel = ({ title, tasks, fetchTasks, config, onTaskClick }) => {
1313
return (
1414
<Box
1515
w="100%"
16-
maxW="400px"
1716
p={4}
1817
borderWidth="1px"
1918
borderRadius="md"
20-
bg="white"
19+
bg="#21364a"
20+
border="none"
2121
boxShadow="md"
2222
>
23-
<Text fontSize="2xl" mb={4}>
23+
<Text fontSize="2xl" mb={4} textColor="#fff">
2424
{title}
2525
</Text>
26-
<VStack spacing={4}>
27-
{tasks.map((task) => (
28-
<TaskCard
29-
key={task._id}
30-
task={task}
31-
fetchTasks={fetchTasks}
32-
config={config}
33-
onClick={() => onTaskClick(task)}
34-
/>
35-
))}
26+
<VStack spacing={4} align="start">
27+
{tasks.length === 0 ? (
28+
<Text textColor="#fff" fontSize="lg" fontFamily="content">
29+
No tasks
30+
</Text>
31+
) : (
32+
tasks.map((task) => (
33+
<TaskCard
34+
key={task._id}
35+
task={task}
36+
fetchTasks={fetchTasks}
37+
config={config}
38+
onClick={() => onTaskClick(task)}
39+
/>
40+
))
41+
)}
3642
</VStack>
3743
</Box>
3844
);

0 commit comments

Comments
 (0)