Skip to content

Commit 1647db6

Browse files
yp969803yp969803
committed
Merge branch 'kitu/style' of https://github.com/mdgspace/activity-leaderboard into sudo
2 parents 14bc88d + 9719e1a commit 1647db6

File tree

17 files changed

+448
-29
lines changed

17 files changed

+448
-29
lines changed

‎Dockerfile

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Start from a Node base image
2+
FROM node:latest
3+
# Set the working directory
4+
WORKDIR /app
5+
# Set environment variables
6+
ARG REACT_APP_BACKEND_HOST
7+
ENV REACT_APP_BACKEND_HOST=${REACT_APP_BACKEND_HOST}
8+
ARG REACT_APP_BACKEND_PORT
9+
ENV REACT_APP_BACKEND_PORT=${REACT_APP_BACKEND_PORT}
10+
# Copy package.json and package-lock.json
11+
COPY package*.json ./
12+
# Install dependencies
13+
RUN npm install
14+
# Copy the rest of the code
15+
COPY . .
16+
# Build the app
17+
RUN npm run build
18+
# Expose the port the app runs on
19+
EXPOSE 3000
20+
# Start the application
21+
CMD ["npm", "start"]

‎src/app/components/timeRangeSwitch/index.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
.timerange-cont {
2+
display: flex;
3+
justify-content: center;
4+
height: 100%;
5+
align-items: center;
6+
}
7+
18
.timerange-cont button {
29
border: none;
310
outline: none;

‎src/app/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@ function App() {
4242
});
4343

4444
return (
45-
<>
45+
<div>
4646
<Navbar />
4747
<BasicRoutes />
4848
<Toaster />
49-
</>
49+
</div>
5050
);
5151
}
5252

‎src/app/routes/BasicRoutes.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import WorkspaceView from 'features/workspace-view';
77
import Login from 'features/login';
88
import AddWorkspace from 'features/AddWorkspace';
99
import Workspace from 'features/workspace';
10+
1011
import EditWorkspace from 'features/EditWorkspace';
12+
1113
const BasicRoutes = () => {
1214
return (
1315
<Routes>
@@ -19,6 +21,7 @@ const BasicRoutes = () => {
1921
<Route path={'/addWorkspace'} element={<AddWorkspace />} />
2022
<Route path={'/editWorkspace/:spaceName'} element ={<EditWorkspace/>} />
2123
<Route path={'/*'} element={<Error />} />
24+
{/* <Route path={'/testing'} element={<ProjectMembers />} /> */}
2225
</Routes>
2326
);
2427
};

‎src/features/project-members/components/BackNavigation.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
const BackNavigation = () => {
2+
const clickBack = () => {
3+
console.log('Back button clicked');
4+
};
5+
return (
6+
<div className='back-title-container' onClick={clickBack}>
7+
<button className='button'>
8+
<span>
9+
<svg
10+
xmlns='http://www.w3.org/2000/svg'
11+
width='25'
12+
height='20'
13+
viewBox='0 0 17 14'
14+
fill='none'
15+
>
16+
<path
17+
fill-rule='evenodd'
18+
clip-rule='evenodd'
19+
d='M6.75811 13.0503C6.48962 13.3188 6.05432 13.3188 5.78584 13.0503L0.221671 7.48618C0.0927395 7.35725 0.0203065 7.18238 0.0203065 7.00004C0.0203065 6.81771 0.0927395 6.64284 0.221671 6.51391L5.78584 0.949741C6.05432 0.681255 6.48962 0.681255 6.75811 0.949741C7.02659 1.21823 7.02659 1.65353 6.75811 1.92201L1.68008 7.00004L6.75811 12.0781C7.02659 12.3466 7.02659 12.7819 6.75811 13.0503Z'
20+
fill='white'
21+
/>
22+
<path
23+
fill-rule='evenodd'
24+
clip-rule='evenodd'
25+
d='M16.979 7.00006C16.979 7.37976 16.6712 7.68756 16.2915 7.68756L0.864004 7.68756C0.484308 7.68756 0.176504 7.37976 0.176504 7.00006C0.176504 6.62037 0.484308 6.31256 0.864004 6.31256L16.2915 6.31256C16.6712 6.31256 16.979 6.62036 16.979 7.00006Z'
26+
fill='white'
27+
/>
28+
</svg>
29+
</span>{' '}
30+
Back
31+
</button>
32+
<h1 className='title'>
33+
Organization <span className='arrow'>{'->'}</span> Manage
34+
</h1>
35+
</div>
36+
);
37+
};
38+
39+
export default BackNavigation;

‎src/features/project-members/components/MemberCard.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const MemberCard = ({
2+
image,
3+
name,
4+
role,
5+
}: {
6+
image: string;
7+
name: string;
8+
role: string;
9+
}) => {
10+
const handleRemove = () => {
11+
console.log('Remove member');
12+
}
13+
return (
14+
<div className='member-card'>
15+
<div className='member-info'>
16+
<img src={image} alt='image' />
17+
<h1 className='member-name'>{name}</h1>
18+
</div>
19+
<div className='member-actions'>
20+
<div className="select-overlay">
21+
<select name='role' id='role' defaultValue={role.toLowerCase()}>
22+
<option value='maintainer'>Maintainer</option>
23+
<option value='manager'>Manager</option>
24+
<option value='member'>Member</option>
25+
</select>
26+
</div>
27+
<button className='member-remove-btn' onClick={handleRemove}>Remove</button>
28+
</div>
29+
</div>
30+
);
31+
};
32+
33+
export default MemberCard;

‎src/features/project-members/components/Options.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const Options = () => {
2+
return (
3+
<div className='options'>
4+
<button className='add-people button'>Add People</button>
5+
<button className='add-people button'>Filter</button>
6+
</div>
7+
);
8+
};
9+
10+
export default Options;

‎src/features/project-members/index.scss

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
.members-page-container {
2+
margin: 0rem 2rem;
3+
margin-top: 2rem;
4+
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
height: 100%;
10+
11+
.back-title-container {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
width: 100%;
16+
}
17+
}
18+
19+
.options {
20+
width: 100%;
21+
display: flex;
22+
flex-direction: row;
23+
justify-content: space-between;
24+
}
25+
26+
.button {
27+
outline: none;
28+
border: none;
29+
color: white;
30+
font-size: 1.4rem;
31+
padding: 1rem 2rem;
32+
border-radius: 3rem;
33+
background: #402aa4;
34+
}
35+
36+
.add-people {
37+
font-size: 1.2rem;
38+
padding: 0.6rem 1.4rem;
39+
}
40+
41+
.title {
42+
color: rgba(237, 237, 237, 0.7);
43+
font-family: Poppins;
44+
font-size: 20px;
45+
font-style: normal;
46+
font-weight: 400;
47+
line-height: normal;
48+
letter-spacing: 1.6px;
49+
text-transform: capitalize;
50+
.arrow {
51+
color: rgba(237, 237, 237, 0.7);
52+
font-family: Poppins;
53+
font-size: 20px;
54+
font-style: normal;
55+
font-weight: 400;
56+
line-height: normal;
57+
letter-spacing: -7.6px;
58+
text-transform: capitalize;
59+
}
60+
}
61+
62+
.member-view {
63+
margin-top: 1rem;
64+
width: 60%;
65+
}
66+
67+
.members-list {
68+
background: transparent;
69+
margin-top: 2rem;
70+
display: flex;
71+
flex-direction: column;
72+
gap: 2rem;
73+
}
74+
.member-card {
75+
border-radius: 20px;
76+
border: 0.5px solid #406a80;
77+
background: #191938;
78+
display: flex;
79+
flex-direction: row;
80+
align-items: center;
81+
justify-content: space-between;
82+
gap: 1rem;
83+
padding: 1rem 2rem;
84+
position: relative;
85+
86+
.member-info {
87+
display: flex;
88+
flex-direction: row;
89+
align-items: center;
90+
justify-content: space-between;
91+
width: 40%;
92+
gap: 0.5rem;
93+
img {
94+
width: 80px;
95+
height: 80px;
96+
border-radius: 50%;
97+
}
98+
.member-name {
99+
font-size: 20px;
100+
font-style: normal;
101+
font-weight: 400;
102+
line-height: normal;
103+
letter-spacing: 1.6px;
104+
text-transform: capitalize;
105+
}
106+
}
107+
108+
.member-actions {
109+
width: 50%;
110+
padding: 1rem;
111+
display: flex;
112+
flex-direction: row;
113+
align-items: center;
114+
justify-content: space-between;
115+
.member-remove-btn {
116+
right: 1rem;
117+
text-decoration: none;
118+
background: transparent;
119+
border: none;
120+
outline: none;
121+
color: #db1b24;
122+
font-size: 1.2rem;
123+
}
124+
.select-overlay {
125+
padding-right: 1rem;
126+
background: #402aa4;
127+
cursor: pointer;
128+
}
129+
select {
130+
border: none;
131+
outline: none;
132+
color: white;
133+
font-size: 1.2rem;
134+
padding: 0.6rem 1.4rem;
135+
background: #402aa4;
136+
cursor: pointer;
137+
}
138+
option {
139+
padding: 1rem;
140+
margin: 2rem;
141+
}
142+
}
143+
}
144+
145+
@media only screen and (max-width: 1400px) {
146+
.member-view {
147+
width: 80%;
148+
}
149+
}
150+
151+
@media only screen and (max-width: 1100px) {
152+
.member-card {
153+
flex-direction: column;
154+
.member-info {
155+
width: 100%;
156+
}
157+
.member-actions {
158+
width: 100%;
159+
}
160+
}
161+
}
162+
163+
@media only screen and (max-width: 600px) {
164+
.member-view {
165+
width: 90%;
166+
}
167+
}

‎src/features/project-members/index.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1+
import BackNavigation from './components/BackNavigation';
2+
import MemberCard from './components/MemberCard';
3+
import Options from './components/Options';
4+
import './index.scss';
15
const ProjectMembers = () => {
2-
return <div>ProjectMembers</div>;
6+
// const member = await fetch('https://api.github.com/orgs/github/public_members');
7+
return (
8+
<div className='members-page-container'>
9+
<BackNavigation />
10+
<div className='member-view'>
11+
<Options />
12+
<div className='members-list'>
13+
<MemberCard
14+
image={
15+
'https://media.licdn.com/dms/image/D4E03AQGI1ZJx1AywYQ/profile-displayphoto-shrink_400_400/0/1665646743847?e=1710979200&v=beta&t=aLom25RLssprCiYXceT78QAtMTFm4Kl_94HoJlZXfTA'
16+
}
17+
name={'Karthik Ayangar'}
18+
role={'member'}
19+
/>
20+
</div>
21+
</div>
22+
</div>
23+
);
324
};
425

526
export default ProjectMembers;

‎src/features/workspace-view/index.scss

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,29 @@
1818

1919
.workspaceview-card-container {
2020
background: linear-gradient(110.51deg, #141432 0.9%, #2a2a4b 101.51%);
21+
padding: 3rem 1rem;
2122
width: 70%;
2223
margin-left: auto;
2324
margin-right: auto;
2425
margin-top: 2em;
2526
border-radius: 20px;
2627
display: grid;
2728
grid-template-columns: repeat(2, 1fr);
28-
row-gap: 2em;
29-
column-gap: 2em;
30-
padding: 1em;
29+
row-gap: 3em;
30+
column-gap: 3em;
31+
3132
justify-items: center;
3233
align-items: center;
3334
}
3435

35-
@media only screen and (max-width: 860px) {
36+
@media only screen and (max-width: 1100px) {
3637
.workspaceview-card-container {
3738
grid-template-columns: 1fr;
3839
width: 90%;
3940
}
4041
}
42+
@media only screen and (max-width: 1600px) {
43+
.workspaceview-card-container {
44+
width: 90%;
45+
}
46+
}

0 commit comments

Comments
 (0)