From d75e836f4b7134356ba210859686f5d9f3643af4 Mon Sep 17 00:00:00 2001 From: blyncnov Date: Sun, 9 Oct 2022 10:00:41 +0100 Subject: [PATCH] test removal --- README.md | 8 +- .../Authentication/User-Profile/styles.js | 120 +++++++++++++++--- .../Authentication/User-Profile/useprofile.js | 75 +++++++++-- src/components/Authentication/styles.js | 8 +- 4 files changed, 177 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 84153af..fb73920 100644 --- a/README.md +++ b/README.md @@ -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) @@ -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 @@ -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 ``` diff --git a/src/components/Authentication/User-Profile/styles.js b/src/components/Authentication/User-Profile/styles.js index e7f3636..3d22f45 100644 --- a/src/components/Authentication/User-Profile/styles.js +++ b/src/components/Authentication/User-Profile/styles.js @@ -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; @@ -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; +`; diff --git a/src/components/Authentication/User-Profile/useprofile.js b/src/components/Authentication/User-Profile/useprofile.js index 71f93d6..5b30f8c 100644 --- a/src/components/Authentication/User-Profile/useprofile.js +++ b/src/components/Authentication/User-Profile/useprofile.js @@ -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() { @@ -38,15 +58,50 @@ function Profile() { return ( - User Profile - - -

Name: {user.fullName}

-

Username: {user.username}

- {user.role} -

Email: {user.email}

- Logout - + + User Profile + + + + + + + + + Mary Jane (spidergirl) + + + New Member + + + {/* Additional Information About This User */} + + +

Username

+

{user.username} JaneMar23

+ + +

Role

+

{user.role} Front-End Engineer

+ + +

Email

+

{user.email} Jjanmar02@gmail.com

+ + +

Gender

+

Female

+ + +

About

+

Swimming, Dancing and Coding

+ + {/* LogOut Button */} + Logout + + {/* Additional Information Section Ends */} + + ); diff --git a/src/components/Authentication/styles.js b/src/components/Authentication/styles.js index 6d0ccef..b82c3ab 100644 --- a/src/components/Authentication/styles.js +++ b/src/components/Authentication/styles.js @@ -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;