Skip to content

Commit d2616dd

Browse files
PrajualitPrajualit
committed
worskpace page redesigned
1 parent 79e46e0 commit d2616dd

2 files changed

Lines changed: 89 additions & 113 deletions

File tree

‎frontend/src/components/workspace/CreateWorkspaceModal.jsx‎

Lines changed: 15 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useNavigate } from "react-router-dom";
66
import { workspace } from "../../utils/media/media";
77
import "./workspace.css";
88
import { API_URL } from "../../config/api.config";
9+
import { Button } from "@chakra-ui/button";
910

1011
const CreateWorkspaceModal = ({ onClose }) => {
1112
const [step, setStep] = useState(1);
@@ -104,41 +105,27 @@ const CreateWorkspaceModal = ({ onClose }) => {
104105
};
105106

106107
return (
107-
<div className="workspace_page">
108+
<div className="">
108109
{showPopup && (
109110
<div className="popup">
110111
<h2>Workspace Created!</h2>
111112
<p>Your workspace has been successfully created.</p>
112113
<button onClick={() => setShowPopup(false)}>Close</button>
113114
</div>
114115
)}
115-
<div className="workspace_display">
116-
<div className="workspace_content">
117-
<div className="workspace_content_heading">
118-
Create a new ComConnect Workspace
119-
120-
121-
<button
122-
className="create_workspace_btn"
123-
onClick={handleCreateWorkspace}
124-
>
125-
Create Workspace
126-
</button>
127-
128-
</div>
129-
130-
<div className="workspace_content_description">
131-
Introducing ComConnect: Revolutionizing college communities by
132-
connecting students, allocating roles based on preferences, and
133-
creating teams that feel like family. Empower collaboration and
134-
enhance productivity with comConnect! to create a workspace click on
135-
the button below
136-
137-
</div>
138-
</div>
139-
<div className="workspace_img_container">
140-
<img className="workspace_img" src="/images/workspace.png" alt="workspace" />
141-
</div>
116+
<div className="">
117+
<Button
118+
bg="#05549e"
119+
color="white"
120+
zIndex={1}
121+
alignItems="center"
122+
justifyContent="center"
123+
rounded={10}
124+
onClick={handleCreateWorkspace}
125+
_hover={{ textColor: "#05549e", bg: "white" }}
126+
>
127+
Create Workspace
128+
</Button>
142129
</div>
143130
{showCreateWorkspace && (
144131
<div className="modal_background">

‎frontend/src/components/workspace/WorkspaceSelection.jsx‎

Lines changed: 74 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -20,97 +20,86 @@ const WorkspaceSelection = () => {
2020
};
2121

2222
return (
23-
<div className="workspace_main">
24-
25-
<div>
26-
<Box
23+
<Flex
24+
minHeight="100vh"
25+
width="100%"
26+
align="center"
27+
justify="center"
28+
bg="#0f1924"
29+
>
30+
31+
<div>
32+
<Box
2733
width={"90vw"}>
2834

2935
<Flex
30-
position={"relative"}
31-
top="0"
32-
left="0"
33-
right="0"
34-
margin="0 auto"
35-
direction={"column"}
36-
justifyContent="center"
37-
alignItems="center"
38-
>
39-
<Flex
40-
position={"relative"}
41-
top="0"
42-
left="0"
43-
right="0"
44-
margin="0 auto"
45-
justifyContent="center"
36+
bg="#1b3046ff"
37+
p={8}
38+
borderRadius="lg"
39+
boxShadow="lg"
40+
position={"relative"}
41+
top="0"
42+
left="0"
43+
right="0"
44+
margin="0 auto"
45+
direction={"column"}
46+
justifyContent="center"
47+
alignItems="center"
48+
>
49+
<div className="flex items-center justify-center ">
50+
<div className="workspace_content_heading text-white ">
51+
Introducing ComConnect:
52+
<p className="workspace_content_description w-[700px] ">Revolutionizing college communities by
53+
connecting students, allocating roles based on preferences, and
54+
creating teams that feel like family. Empower collaboration and
55+
enhance productivity with comConnect! <br /> To create or join a workspace use the buttons below</p>
56+
</div>
57+
<div className="workspace_img_container">
58+
<img className="workspace_img" src="/images/workspace.png" alt="workspace" />
59+
</div>
60+
</div>
61+
<Box
62+
width={["90%", "90%", "90%", "70%"]}
63+
p={8}
64+
display="flex"
4665
alignItems="center"
66+
justifyItems="center"
67+
justifyContent="space-around"
4768
>
48-
<Text
49-
fontFamily="Arial"
50-
fontSize={["12vw", "6vw", "120px"]}
51-
fontWeight="900"
52-
lineHeight={["9vw", "7vw", "180px"]}
53-
textAlign="left"
54-
bg="linear-gradient(0deg, rgba(0, 122, 255, 0.15), rgba(0, 122, 255, 0.15)), linear-gradient(0deg, #CBDCF3, #CBDCF3)"
55-
bgClip="text"
56-
color="transparent"
57-
zIndex={2}
58-
>
59-
COM
60-
</Text>
61-
<Text
62-
fontFamily="Arial"
63-
fontSize={["12vw", "6vw", "120px"]}
64-
fontWeight="900"
65-
lineHeight={["9vw", "7vw", "180px"]}
66-
textAlign="left"
67-
color="transparent"
68-
padding="0 8px"
69-
sx={{
70-
WebkitTextStroke: "2.47px rgba(203, 220, 243, 1)",
71-
WebkitTextFillColor: "transparent",
72-
}}
73-
zIndex={2}
74-
>
75-
CONNECT
76-
</Text>
77-
78-
</Flex>
79-
<div className="workspace_lol">
80-
<CreateWorkspaceModal>Create Workspace</CreateWorkspaceModal>
81-
</div>
82-
<div className="join_workspace_modal translucent-box">
83-
<JoinWorkspaceModal>
84-
<div className="join_workspace_btn">Join Workspace</div>
85-
</JoinWorkspaceModal>
86-
<div className="join_workspace_lol">
87-
{Array.isArray(userWorkspaces) && userWorkspaces.length > 0 ? (
88-
userWorkspaces.map((workspace) => (
89-
<Button
90-
className="cnt"
91-
key={workspace._id}
92-
onClick={() => handleSelectWorkspace(workspace)}
93-
>
94-
{workspace.workspaceName}
95-
</Button>
96-
))
97-
) : (
98-
<Box>
99-
<div className="simple">"No workspaces available"</div>
100-
</Box>
101-
)}
102-
</div>
103-
</div>
104-
</Flex>
105-
106-
107-
</Box>
108-
</div>
69+
<CreateWorkspaceModal>Create Workspace</CreateWorkspaceModal>
70+
<JoinWorkspaceModal>
71+
<div className="bg-[#05549e] text-white px-3 py-2 cursor-pointer hover:bg-white hover:text-[#05549e] transition-colors font-[600] z-1 rounded-lg ">
72+
Join Workspace
73+
</div>
74+
</JoinWorkspaceModal>
75+
<div className="h-fit">
76+
{Array.isArray(userWorkspaces) && userWorkspaces.length > 0 ? (
77+
userWorkspaces.map((workspace) => (
78+
<Button
79+
className="cnt"
80+
key={workspace._id}
81+
onClick={() => handleSelectWorkspace(workspace)}
82+
>
83+
{workspace.workspaceName}
84+
</Button>
85+
))
86+
) : (
87+
<Box>
88+
<div className="simple">"No workspaces available"</div>
89+
</Box>
90+
)}
91+
</div>
92+
</Box>
93+
</Flex>
94+
95+
96+
</Box>
97+
</div>
98+
99+
100+
109101

110-
111-
112-
113-
</div>
102+
</Flex>
114103

115104
);
116105
};

0 commit comments

Comments
 (0)