Skip to content

Commit d75e836

Browse files
blyncnovblyncnov
committed
test removal
1 parent 494a60b commit d75e836

File tree

4 files changed

+177
-34
lines changed

4 files changed

+177
-34
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ This is the frontend repository for the [Journal Policy Tracker](https://github.
2626

2727
### Built With
2828

29-
- [React Bootstrap](https://react-bootstrap.github.io/)
3029
- [React](https://reactjs.org/)
30+
- [Apollo Client](https://github.com/apollographql/apollo-client)
3131

3232
<!-- GETTING STARTED -->
3333

@@ -38,7 +38,7 @@ This is the frontend repository for the [Journal Policy Tracker](https://github.
3838
To run this project locally on your machine you need the following installed
3939

4040
- nodejs
41-
- npm
41+
- yarn
4242

4343
### Installation
4444

@@ -48,11 +48,11 @@ To run this project locally on your machine you need the following installed
4848
```
4949
2. Install NPM packages
5050
```sh
51-
npm install
51+
yarn
5252
```
5353
3. Running the project
5454
```sh
55-
npm start
55+
yarn start
5656
```
5757
<!-- USAGE EXAMPLES -->
5858
<!-- ## Usage will be added later -->

‎src/components/Authentication/User-Profile/styles.js

+101-19
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,112 @@
11
import styled from 'styled-components';
22

3+
export const HeadingContainer = styled.div`
4+
width: auto;
5+
`;
6+
37
export const Heading = styled.h1`
8+
text-align: start !important;
9+
font-size: 1.8rem;
10+
color: #ec8d20;
11+
`;
12+
13+
export const P = styled.p`
14+
font-size: 0.8rem;
15+
margin: 0.1em;
16+
opacity: 0.8;
17+
color: #6c757d;
18+
`;
19+
20+
export const H1 = styled.h1`
21+
font-size: 1.3rem;
22+
`;
23+
24+
export const H4 = styled.h4`
25+
font-size: 0.9rem;
26+
font-weight: 600;
27+
`;
28+
29+
export const CTXH4 = styled.h4`
30+
font-size: 18px;
31+
margin: 0.5em 0 0.2em 0;
32+
color: #333;
33+
`;
34+
35+
export const ProfileGridContainer = styled.div`
36+
width: 100%;
37+
display: grid;
38+
grid-template-columns: 40%;
39+
align-items: center;
40+
justify-content: center;
41+
column-gap: 20px;
42+
row-gap: 10px;
43+
44+
@media (max-width: 768px) {
45+
grid-template-columns: 1fr;
46+
}
47+
`;
48+
49+
export const ProfileImageContainer = styled.div`
50+
width: 100%;
51+
display: flex;
52+
justify-content: center;
53+
`;
54+
55+
export const ProfileImageCircle = styled.div`
56+
background-color: #333;
57+
width: 150px;
58+
height: 150px;
59+
clip-path: circle();
60+
`;
61+
62+
export const ProfileCTXText = styled.h1`
463
font-size: 1.8rem;
64+
`;
65+
66+
export const ProfileCtxBadge = styled.div`
67+
span {
68+
background-color: #238636;
69+
padding: 0.5em 3em;
70+
text-align: center;
71+
border-radius: 5px;
72+
color: white;
73+
font-size: 14px;
74+
}
75+
`;
76+
77+
export const ProfileCtxUser = styled.div`
578
color: #ec8d20;
679
`;
780

8-
export const Card = styled.h1`
9-
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
10-
max-width: 500px;
11-
margin: auto;
12-
margin-top: 20px;
81+
export const ProfileDetailsWrapper = styled.h1`
82+
width: 100%;
83+
margin: 1em 0;
84+
text-align: start !important;
85+
`;
86+
87+
export const ProfileDetails = styled.h1`
88+
color: #333;
89+
background-color: #e9ecef;
90+
padding: 0.2em 0.3em;
91+
margin-bottom: 0.3em;
92+
border-radius: 8px;
93+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
94+
`;
95+
96+
export const Card = styled.div`
97+
background-color: white;
1398
text-align: center;
1499
font-family: arial;
15-
padding: 2rem;
100+
padding: 1em;
101+
background-color: #fff;
102+
border-radius: 8px;
103+
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 4%), 0 1px 2px 0 rgb(0 0 0 / 5%);
16104
`;
17105

18106
export const Title = styled.p`
19107
color: grey;
20108
font-size: 18px;
21109
`;
22-
export const H1 = styled.h1`
23-
color: grey;
24-
font-size: 1.3rem;
25-
`;
26110

27111
export const ButtonLogout = styled.button`
28112
border: none;
@@ -37,12 +121,10 @@ export const ButtonLogout = styled.button`
37121
font-size: 18px;
38122
`;
39123

40-
// a {
41-
// text-decoration: none;
42-
// /* font-size: 22px; */
43-
// color: black;
44-
// }
45-
46-
// button:hover, a:hover {
47-
// opacity: 0.7;
48-
// }
124+
export const ProfileGridInnerContainer = styled.div`
125+
width: 100%;
126+
display: grid;
127+
grid-template-columns: 1fr;
128+
column-gap: 20px;
129+
row-gap: 10px;
130+
`;

‎src/components/Authentication/User-Profile/useprofile.js

+65-10
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,27 @@ import { SectionLayout } from '../../marginals';
1313
import { Container } from 'react-bootstrap';
1414
import LOGOUT from '../../../graphql/mutation/LOGOUT';
1515
import { useHistory } from 'react-router';
16-
import { Heading, Card, Title, ButtonLogout, H1 } from './styles';
16+
17+
import {
18+
HeadingContainer,
19+
Heading,
20+
Card,
21+
Title,
22+
ButtonLogout,
23+
P,
24+
H1,
25+
H4,
26+
CTXH4,
27+
ProfileGridContainer,
28+
ProfileImageContainer,
29+
ProfileImageCircle,
30+
ProfileCTXText,
31+
ProfileCtxBadge,
32+
ProfileCtxUser,
33+
ProfileDetailsWrapper,
34+
ProfileDetails,
35+
ProfileGridInnerContainer,
36+
} from './styles';
1737
import { FormInputBtn } from '../styles';
1838

1939
function Profile() {
@@ -38,15 +58,50 @@ function Profile() {
3858
return (
3959
<SectionLayout>
4060
<Container>
41-
<Heading style={{ textAlign: 'center' }}>User Profile</Heading>
42-
43-
<Card>
44-
<H1>Name: {user.fullName}</H1>
45-
<H1>Username: {user.username}</H1>
46-
<Title>{user.role}</Title>
47-
<H1>Email: {user.email}</H1>
48-
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
49-
</Card>
61+
<HeadingContainer>
62+
<Heading style={{ textAlign: 'center' }}>User Profile</Heading>
63+
</HeadingContainer>
64+
<ProfileGridContainer>
65+
<Card>
66+
<ProfileImageContainer>
67+
<ProfileImageCircle></ProfileImageCircle>
68+
</ProfileImageContainer>
69+
<ProfileCTXText>
70+
<ProfileCtxUser>
71+
<CTXH4>Mary Jane (spidergirl)</CTXH4>
72+
</ProfileCtxUser>
73+
<ProfileCtxBadge>
74+
<span>New Member</span>
75+
</ProfileCtxBadge>
76+
</ProfileCTXText>
77+
{/* Additional Information About This User */}
78+
<ProfileDetailsWrapper>
79+
<ProfileDetails>
80+
<P>Username</P>
81+
<H4>{user.username} JaneMar23 </H4>
82+
</ProfileDetails>
83+
<ProfileDetails>
84+
<P>Role</P>
85+
<H4>{user.role} Front-End Engineer </H4>
86+
</ProfileDetails>
87+
<ProfileDetails>
88+
<P>Email</P>
89+
<H4>{user.email} [email protected]</H4>
90+
</ProfileDetails>
91+
<ProfileDetails>
92+
<P>Gender</P>
93+
<H4>Female</H4>
94+
</ProfileDetails>
95+
<ProfileDetails>
96+
<P>About</P>
97+
<H4>Swimming, Dancing and Coding </H4>
98+
</ProfileDetails>
99+
{/* LogOut Button */}
100+
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
101+
</ProfileDetailsWrapper>
102+
{/* Additional Information Section Ends */}
103+
</Card>
104+
</ProfileGridContainer>
50105
</Container>
51106
</SectionLayout>
52107
);

‎src/components/Authentication/styles.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -146,12 +146,18 @@ export const FormInputBtn = styled.button`
146146
padding: 2.2%;
147147
// height: 50px;
148148
margin-top: 10px;
149-
border-radius: 10px;
149+
border-radius: 5px;
150150
background: ${(props) => (props.primary ? 'white' : '#E48900')};
151151
outline: none;
152152
border: ${(props) => (props.primary ? '1.5px solid #EA8900' : 'none')};
153153
color: ${(props) => (props.primary ? '#EA8900' : '#fff')};
154154
font-size: 1rem;
155+
text-align: center;
156+
display: flex;
157+
justify-content: center;
158+
margin: 2em auto 0 auto;
159+
cursor: pointer;
160+
155161
&:hover {
156162
cursor: pointer;
157163
color: #fff;

0 commit comments

Comments
 (0)