Skip to content

Commit ba91dcc

Browse files
Taiwo BoluwatifeTaiwo Boluwatife
Taiwo Boluwatife
authored and
Taiwo Boluwatife
committed
test removal
1 parent 8c4bdc0 commit ba91dcc

File tree

4 files changed

+73
-14372
lines changed

4 files changed

+73
-14372
lines changed

Diff for: ‎src/components/Authentication/User-Profile/styles.js

+46-47
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,41 @@
11
import styled from 'styled-components';
22

3+
export const HeadingContainer = styled.div`
4+
width: auto;
5+
`;
6+
37
export const Heading = styled.h1`
48
text-align: start !important;
59
font-size: 1.8rem;
610
color: #ec8d20;
711
`;
812

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+
935
export const ProfileGridContainer = styled.div`
1036
width: 100%;
1137
display: grid;
1238
grid-template-columns: 40%;
13-
// grid-template-columns: 1fr 2fr;
1439
align-items: center;
1540
justify-content: center;
1641
column-gap: 20px;
@@ -25,39 +50,34 @@ export const ProfileImageContainer = styled.div`
2550
width: 100%;
2651
display: flex;
2752
justify-content: center;
53+
`;
2854

29-
.profile-image-circle {
30-
background-color: black;
31-
width: 150px;
32-
height: 150px;
33-
clip-path: circle();
34-
}
55+
export const ProfileImageCircle = styled.div`
56+
background-color: #333;
57+
width: 150px;
58+
height: 150px;
59+
clip-path: circle();
3560
`;
3661

3762
export const ProfileCTXText = styled.h1`
3863
font-size: 1.8rem;
64+
`;
3965

40-
.profile-ctx-user {
41-
color: #ec8d20;
42-
43-
h4 {
44-
font-size: 18px;
45-
margin: 0.5em 0 0.2em 0;
46-
color: #333;
47-
}
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;
4874
}
75+
`;
4976

50-
.profile-ctx-badge {
51-
span {
52-
background-color: #238636;
53-
padding: 0.5em 3em;
54-
text-align: center;
55-
border-radius: 5px;
56-
color: white;
57-
font-size: 14px;
58-
}
59-
}
77+
export const ProfileCtxUser = styled.div`
78+
color: #ec8d20;
6079
`;
80+
6181
export const ProfileDetailsWrapper = styled.h1`
6282
width: 100%;
6383
margin: 1em 0;
@@ -71,22 +91,9 @@ export const ProfileDetails = styled.h1`
7191
margin-bottom: 0.3em;
7292
border-radius: 8px;
7393
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
74-
75-
p {
76-
font-size: 0.8rem;
77-
margin: 0.1em;
78-
opacity: 0.8;
79-
color: #6c757d;
80-
}
81-
82-
h4 {
83-
font-size: 0.9rem;
84-
font-weight: 600;
85-
}
8694
`;
8795

88-
export const Card = styled.h1`
89-
// height: 100%;
96+
export const Card = styled.div`
9097
background-color: white;
9198
text-align: center;
9299
font-family: arial;
@@ -101,10 +108,6 @@ export const Title = styled.p`
101108
font-size: 18px;
102109
`;
103110

104-
export const H1 = styled.h1`
105-
font-size: 1.3rem;
106-
`;
107-
108111
export const ButtonLogout = styled.button`
109112
border: none;
110113
outline: 0;
@@ -124,8 +127,4 @@ export const ProfileGridInnerContainer = styled.div`
124127
grid-template-columns: 1fr;
125128
column-gap: 20px;
126129
row-gap: 10px;
127-
128-
@media (max-width: 768px) {
129-
grid-template-columns: 1fr;
130-
}
131130
`;

Diff for: ‎src/components/Authentication/User-Profile/useprofile.js

+26-27
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,21 @@ import LOGOUT from '../../../graphql/mutation/LOGOUT';
1515
import { useHistory } from 'react-router';
1616

1717
import {
18+
HeadingContainer,
1819
Heading,
1920
Card,
2021
Title,
2122
ButtonLogout,
23+
P,
2224
H1,
25+
H4,
26+
CTXH4,
2327
ProfileGridContainer,
2428
ProfileImageContainer,
29+
ProfileImageCircle,
2530
ProfileCTXText,
31+
ProfileCtxBadge,
32+
ProfileCtxUser,
2633
ProfileDetailsWrapper,
2734
ProfileDetails,
2835
ProfileGridInnerContainer,
@@ -51,57 +58,49 @@ function Profile() {
5158
return (
5259
<SectionLayout>
5360
<Container>
54-
<div>
61+
<HeadingContainer>
5562
<Heading style={{ textAlign: 'center' }}>User Profile</Heading>
56-
</div>
63+
</HeadingContainer>
5764
<ProfileGridContainer>
5865
<Card>
5966
<ProfileImageContainer>
60-
<div className='profile-image-circle'></div>
67+
<ProfileImageCircle></ProfileImageCircle>
6168
</ProfileImageContainer>
6269
<ProfileCTXText>
63-
<div className='profile-ctx-user'>
64-
<h4>Mary Jane (spidergirl)</h4>
65-
</div>
66-
<div className='profile-ctx-badge'>
70+
<ProfileCtxUser>
71+
<CTXH4>Mary Jane (spidergirl)</CTXH4>
72+
</ProfileCtxUser>
73+
<ProfileCtxBadge>
6774
<span>New Member</span>
68-
</div>
75+
</ProfileCtxBadge>
6976
</ProfileCTXText>
7077
{/* Additional Information About This User */}
7178
<ProfileDetailsWrapper>
7279
<ProfileDetails>
73-
<p>Username</p>
74-
<h4>{user.username} JaneMar23 </h4>
80+
<P>Username</P>
81+
<H4>{user.username} JaneMar23 </H4>
7582
</ProfileDetails>
7683
<ProfileDetails>
77-
<p>Role</p>
78-
<h4>{user.role} Front-End Engineer </h4>
84+
<P>Role</P>
85+
<H4>{user.role} Front-End Engineer </H4>
7986
</ProfileDetails>
8087
<ProfileDetails>
81-
<p>Email</p>
82-
<h4>{user.email} [email protected]</h4>
88+
<P>Email</P>
89+
<H4>{user.email} [email protected]</H4>
8390
</ProfileDetails>
8491
<ProfileDetails>
85-
<p>Gender</p>
86-
<h4>Female</h4>
92+
<P>Gender</P>
93+
<H4>Female</H4>
8794
</ProfileDetails>
8895
<ProfileDetails>
89-
<p>About</p>
90-
<h4>Swimming, Dancing and Coding </h4>
96+
<P>About</P>
97+
<H4>Swimming, Dancing and Coding </H4>
9198
</ProfileDetails>
9299
{/* LogOut Button */}
93-
<div>
94-
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
95-
</div>
100+
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
96101
</ProfileDetailsWrapper>
97102
{/* Additional Information Section Ends */}
98103
</Card>
99-
100-
{/* This Can be uncomment if you need extra Card Sections For Information */}
101-
{/* <ProfileGridInnerContainer>
102-
<Card>Hi</Card>
103-
<Card>Hi</Card>
104-
</ProfileGridInnerContainer> */}
105104
</ProfileGridContainer>
106105
</Container>
107106
</SectionLayout>

Diff for: ‎src/components/Authentication/styles.js

+1
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,7 @@ export const FormInputBtn = styled.button`
156156
display: flex;
157157
justify-content: center;
158158
margin: 2em auto 0 auto;
159+
cursor: pointer;
159160
160161
&:hover {
161162
cursor: pointer;

0 commit comments

Comments
 (0)