Skip to content

Commit

Permalink
test removal
Browse files Browse the repository at this point in the history
  • Loading branch information
blyncnov committed Oct 9, 2022
1 parent 494a60b commit d75e836
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 34 deletions.
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ This is the frontend repository for the [Journal Policy Tracker](https://github.

### Built With

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

<!-- GETTING STARTED -->

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

- nodejs
- npm
- yarn

### Installation

Expand All @@ -48,11 +48,11 @@ To run this project locally on your machine you need the following installed
```
2. Install NPM packages
```sh
npm install
yarn
```
3. Running the project
```sh
npm start
yarn start
```
<!-- USAGE EXAMPLES -->
<!-- ## Usage will be added later -->
Expand Down
120 changes: 101 additions & 19 deletions src/components/Authentication/User-Profile/styles.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,112 @@
import styled from 'styled-components';

export const HeadingContainer = styled.div`
width: auto;
`;

export const Heading = styled.h1`
text-align: start !important;
font-size: 1.8rem;
color: #ec8d20;
`;

export const P = styled.p`
font-size: 0.8rem;
margin: 0.1em;
opacity: 0.8;
color: #6c757d;
`;

export const H1 = styled.h1`
font-size: 1.3rem;
`;

export const H4 = styled.h4`
font-size: 0.9rem;
font-weight: 600;
`;

export const CTXH4 = styled.h4`
font-size: 18px;
margin: 0.5em 0 0.2em 0;
color: #333;
`;

export const ProfileGridContainer = styled.div`
width: 100%;
display: grid;
grid-template-columns: 40%;
align-items: center;
justify-content: center;
column-gap: 20px;
row-gap: 10px;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
`;

export const ProfileImageContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
`;

export const ProfileImageCircle = styled.div`
background-color: #333;
width: 150px;
height: 150px;
clip-path: circle();
`;

export const ProfileCTXText = styled.h1`
font-size: 1.8rem;
`;

export const ProfileCtxBadge = styled.div`
span {
background-color: #238636;
padding: 0.5em 3em;
text-align: center;
border-radius: 5px;
color: white;
font-size: 14px;
}
`;

export const ProfileCtxUser = styled.div`
color: #ec8d20;
`;

export const Card = styled.h1`
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 500px;
margin: auto;
margin-top: 20px;
export const ProfileDetailsWrapper = styled.h1`
width: 100%;
margin: 1em 0;
text-align: start !important;
`;

export const ProfileDetails = styled.h1`
color: #333;
background-color: #e9ecef;
padding: 0.2em 0.3em;
margin-bottom: 0.3em;
border-radius: 8px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
`;

export const Card = styled.div`
background-color: white;
text-align: center;
font-family: arial;
padding: 2rem;
padding: 1em;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 4%), 0 1px 2px 0 rgb(0 0 0 / 5%);
`;

export const Title = styled.p`
color: grey;
font-size: 18px;
`;
export const H1 = styled.h1`
color: grey;
font-size: 1.3rem;
`;

export const ButtonLogout = styled.button`
border: none;
Expand All @@ -37,12 +121,10 @@ export const ButtonLogout = styled.button`
font-size: 18px;
`;

// a {
// text-decoration: none;
// /* font-size: 22px; */
// color: black;
// }

// button:hover, a:hover {
// opacity: 0.7;
// }
export const ProfileGridInnerContainer = styled.div`
width: 100%;
display: grid;
grid-template-columns: 1fr;
column-gap: 20px;
row-gap: 10px;
`;
75 changes: 65 additions & 10 deletions src/components/Authentication/User-Profile/useprofile.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,27 @@ import { SectionLayout } from '../../marginals';
import { Container } from 'react-bootstrap';
import LOGOUT from '../../../graphql/mutation/LOGOUT';
import { useHistory } from 'react-router';
import { Heading, Card, Title, ButtonLogout, H1 } from './styles';

import {
HeadingContainer,
Heading,
Card,
Title,
ButtonLogout,
P,
H1,
H4,
CTXH4,
ProfileGridContainer,
ProfileImageContainer,
ProfileImageCircle,
ProfileCTXText,
ProfileCtxBadge,
ProfileCtxUser,
ProfileDetailsWrapper,
ProfileDetails,
ProfileGridInnerContainer,
} from './styles';
import { FormInputBtn } from '../styles';

function Profile() {
Expand All @@ -38,15 +58,50 @@ function Profile() {
return (
<SectionLayout>
<Container>
<Heading style={{ textAlign: 'center' }}>User Profile</Heading>

<Card>
<H1>Name: {user.fullName}</H1>
<H1>Username: {user.username}</H1>
<Title>{user.role}</Title>
<H1>Email: {user.email}</H1>
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
</Card>
<HeadingContainer>
<Heading style={{ textAlign: 'center' }}>User Profile</Heading>
</HeadingContainer>
<ProfileGridContainer>
<Card>
<ProfileImageContainer>
<ProfileImageCircle></ProfileImageCircle>
</ProfileImageContainer>
<ProfileCTXText>
<ProfileCtxUser>
<CTXH4>Mary Jane (spidergirl)</CTXH4>
</ProfileCtxUser>
<ProfileCtxBadge>
<span>New Member</span>
</ProfileCtxBadge>
</ProfileCTXText>
{/* Additional Information About This User */}
<ProfileDetailsWrapper>
<ProfileDetails>
<P>Username</P>
<H4>{user.username} JaneMar23 </H4>
</ProfileDetails>
<ProfileDetails>
<P>Role</P>
<H4>{user.role} Front-End Engineer </H4>
</ProfileDetails>
<ProfileDetails>
<P>Email</P>
<H4>{user.email} [email protected]</H4>
</ProfileDetails>
<ProfileDetails>
<P>Gender</P>
<H4>Female</H4>
</ProfileDetails>
<ProfileDetails>
<P>About</P>
<H4>Swimming, Dancing and Coding </H4>
</ProfileDetails>
{/* LogOut Button */}
<FormInputBtn onClick={handlelogout}>Logout</FormInputBtn>
</ProfileDetailsWrapper>
{/* Additional Information Section Ends */}
</Card>
</ProfileGridContainer>
</Container>
</SectionLayout>
);
Expand Down
8 changes: 7 additions & 1 deletion src/components/Authentication/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -146,12 +146,18 @@ export const FormInputBtn = styled.button`
padding: 2.2%;
// height: 50px;
margin-top: 10px;
border-radius: 10px;
border-radius: 5px;
background: ${(props) => (props.primary ? 'white' : '#E48900')};
outline: none;
border: ${(props) => (props.primary ? '1.5px solid #EA8900' : 'none')};
color: ${(props) => (props.primary ? '#EA8900' : '#fff')};
font-size: 1rem;
text-align: center;
display: flex;
justify-content: center;
margin: 2em auto 0 auto;
cursor: pointer;
&:hover {
cursor: pointer;
color: #fff;
Expand Down

0 comments on commit d75e836

Please sign in to comment.