From 81244738397e59a1ef404817175c2431217d5e52 Mon Sep 17 00:00:00 2001 From: kamryn-fey Date: Wed, 30 Mar 2022 11:38:58 -0500 Subject: [PATCH 1/4] Adding Account Pages --- src/Pages/AccountPage/AccountPage.css | 170 ++++++++++++++++++++++++++ src/Pages/AccountPage/AccountPage.js | 52 ++++++++ 2 files changed, 222 insertions(+) create mode 100644 src/Pages/AccountPage/AccountPage.css create mode 100644 src/Pages/AccountPage/AccountPage.js diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css new file mode 100644 index 0000000..57857a4 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.css @@ -0,0 +1,170 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + + + +.body{ + /* height: 500%; + width:500%; */ + display: flex; + justify-content: center; + align-items: center; + padding: 100px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} + +.nav { + background-color: grey; + height: 30px; +} +.a{ + color: white; + margin-right: 2em; + text-decoration: none; + +} +.container{ + max-width: 700px; + width: 100%; + background-color: #fff; + padding: 25px 30px; + border-radius: 5px; + border: blue; + box-shadow: 0 5px 10px rgba(0,0,0,0.15); +} +.container .title{ + font-size: 25px; + font-weight: 500; + position: relative; +} +.container .title::before{ + content: ""; + position: absolute; + left: auto; + bottom: auto; + height: 3px; + width: 30px; + border-radius: 5px; + background: linear-gradient(135deg, #71b7e6, #9b59b6); +} +.content form .user-details{ + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 20px 0 12px 0; +} +div.positioning{ + margin-left: auto; + margin-right: auto; + width: 8em +} +form .user-details .input-box{ + margin-bottom: 15px; + width: calc(100% / 2 - 20px); +} +form .input-box span.details{ + display: block; + font-weight: 500; + margin-bottom: 20px; +} +.user-details .input-box input{ + height: 45px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding-left: 15px; + border: 1px solid black; + border-bottom-width: 2px; + transition: all 0.3s ease; +} +.user-details .input-box input:focus, +.user-details .input-box input:valid{ + border-color: #9b59b6; +} + form .gender-details .gender-title{ + font-size: 20px; + font-weight: 500; + } + form .category{ + display: flex; + width: 80%; + margin: 14px 0 ; + justify-content: space-between; + } + form .category label{ + display: flex; + align-items: center; + cursor: pointer; + } + form .category label .dot{ + height: 18px; + width: 18px; + border-radius: 50%; + margin-right: 10px; + background-color: #15a05a; + border: 5px solid transparent; + transition: all 0.3s ease; +} + #dot-1:checked ~ .category label .one, + #dot-2:checked ~ .category label .two, + #dot-3:checked ~ .category label .three{ + background: #9b59b6; + border-color: #d9d9d9; + } + form .input[type="radio"]{ + display: none; + } + form .button{ + height: 45px; + margin: 35px 0 + } + form .button input{ + height: 100%; + width: 100%; + border-radius: 5px; + border: none; + color: rgb(229, 236, 238); + font: bold; + font-size: 18px; + font-weight: 500; + letter-spacing: 1px; + cursor: pointer; + transition: all 0.3s ease; + background: linear-gradient(135deg, #71b7e6, #9b59b6); + } + form .button input:hover{ + /* transform: scale(0.99); */ + background: linear-gradient(-135deg, #71b7e6, #9b59b6); + } + @media(max-width: 584px){ + .container{ + max-width: 100%; +} +form .user-details .input-box{ + margin-bottom: 15px; + width: 100%; + } + form .category{ + width: 100%; + } + .content form .user-details{ + max-height: 300px; + overflow-y: scroll; + } + .user-details::-webkit-scrollbar{ + width: 5px; + } + } + @media(max-width: 459px){ + .container .content .category{ + flex-direction: column; + } + + .nav { + background-color: grey; + height: 30px; + padding-left: 20px; + color: red !important; + + } +} diff --git a/src/Pages/AccountPage/AccountPage.js b/src/Pages/AccountPage/AccountPage.js new file mode 100644 index 0000000..a637c91 --- /dev/null +++ b/src/Pages/AccountPage/AccountPage.js @@ -0,0 +1,52 @@ +import { useState } from "react"; +import "./AccountPage.css" +import Axios from "axios"; +import { useHistory } from "react-router-dom"; + + + +function getAccountInformation() { + +return ( + +
+
Profile
+
+
+
+
+ Full Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Password + +
+
+ Confirm Password + +
+
+
+ +
+
+
+
+ +); + + } +export default getAccountInformation; From 5fe5d997662a65c8b752365cdd84c5e75f8f0fe6 Mon Sep 17 00:00:00 2001 From: kamryn-fey Date: Wed, 30 Mar 2022 12:14:32 -0500 Subject: [PATCH 2/4] Home page commit --- src/Pages/HomePage/HomePage.css | 2 +- src/Pages/HomePage/HomePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css index 39594a2..8d0f473 100644 --- a/src/Pages/HomePage/HomePage.css +++ b/src/Pages/HomePage/HomePage.css @@ -1,4 +1,4 @@ -.App { +.HomePage { min-height: 100vh; background-color: rgb(211, 254, 255); font-family: 'Times New Roman', Times, serif; diff --git a/src/Pages/HomePage/HomePage.js b/src/Pages/HomePage/HomePage.js index 7510f74..6d9d1e7 100644 --- a/src/Pages/HomePage/HomePage.js +++ b/src/Pages/HomePage/HomePage.js @@ -23,7 +23,7 @@ function Home() { -
+
WorldWide Frames - See A Better World

Items on Sale

From 9f038e5fb324047ea366a7e31b7f006c4d04b7a0 Mon Sep 17 00:00:00 2001 From: kamryn-fey Date: Wed, 30 Mar 2022 12:29:25 -0500 Subject: [PATCH 3/4] account page stuff --- src/App.js | 3 +++ src/Pages/AccountPage/AccountPage.css | 16 ++++++++-------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 8f0207a..f365ae9 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import Home from "./Pages/HomePage/HomePage" import Axios from "axios"; import Product from "./Pages/ProductPage/ProductPage" import Login from "./Pages/SignInPage/SignInPage" +import Account from "./Pages/AccountPage/AccountPage" import "./GeneralStyles.css"; import "./App.css" import home from "../src/images/homebutton.png" @@ -41,6 +42,7 @@ function App() { <> Register Sign In + Account )}
@@ -49,6 +51,7 @@ function App() { + diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css index 57857a4..cc6aa0c 100644 --- a/src/Pages/AccountPage/AccountPage.css +++ b/src/Pages/AccountPage/AccountPage.css @@ -1,7 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); - - .body{ /* height: 500%; width:500%; */ @@ -17,17 +15,21 @@ height: 30px; } .a{ + color: white; margin-right: 2em; text-decoration: none; } .container{ + position: fixed; + left: 25%; + margin-top: 5%; max-width: 700px; width: 100%; - background-color: #fff; + background-color: rgb(255, 255, 255); padding: 25px 30px; - border-radius: 5px; + border-radius: 10px; border: blue; box-shadow: 0 5px 10px rgba(0,0,0,0.15); } @@ -52,10 +54,8 @@ justify-content: space-between; margin: 20px 0 12px 0; } -div.positioning{ - margin-left: auto; - margin-right: auto; - width: 8em +.positioning{ + width: 8em; } form .user-details .input-box{ margin-bottom: 15px; From 392b7c0d42d39d8e7e31e217234985bcfb51d3fe Mon Sep 17 00:00:00 2001 From: kamryn-fey Date: Fri, 8 Apr 2022 11:41:59 -0500 Subject: [PATCH 4/4] Account update --- src/Pages/AccountPage/AccountPage.css | 36 +++--------- src/Pages/AccountPage/AccountPage.js | 80 +++++++++++++-------------- 2 files changed, 49 insertions(+), 67 deletions(-) diff --git a/src/Pages/AccountPage/AccountPage.css b/src/Pages/AccountPage/AccountPage.css index cc6aa0c..fc3014e 100644 --- a/src/Pages/AccountPage/AccountPage.css +++ b/src/Pages/AccountPage/AccountPage.css @@ -1,25 +1,9 @@ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); -.body{ - /* height: 500%; - width:500%; */ - display: flex; - justify-content: center; - align-items: center; - padding: 100px; - background: linear-gradient(135deg, #71b7e6, #9b59b6); -} - -.nav { - background-color: grey; - height: 30px; -} -.a{ - - color: white; - margin-right: 2em; - text-decoration: none; +body +{ + background-image:url("../../images/oceanimagedesktop.jpg"); } .container{ position: fixed; @@ -40,13 +24,13 @@ } .container .title::before{ content: ""; - position: absolute; + position: fixed; left: auto; bottom: auto; height: 3px; width: 30px; border-radius: 5px; - background: linear-gradient(135deg, #71b7e6, #9b59b6); + background: linear-gradient(135deg, #71b7e6, #314fa1); } .content form .user-details{ display: flex; @@ -54,9 +38,7 @@ justify-content: space-between; margin: 20px 0 12px 0; } -.positioning{ - width: 8em; -} + form .user-details .input-box{ margin-bottom: 15px; width: calc(100% / 2 - 20px); @@ -130,11 +112,11 @@ form .input-box span.details{ letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; - background: linear-gradient(135deg, #71b7e6, #9b59b6); + background: linear-gradient(135deg, #71b7e6, #314fa1); } form .button input:hover{ /* transform: scale(0.99); */ - background: linear-gradient(-135deg, #71b7e6, #9b59b6); + background: linear-gradient(-135deg, #71b7e6, #314fa1); } @media(max-width: 584px){ .container{ @@ -154,7 +136,7 @@ form .user-details .input-box{ .user-details::-webkit-scrollbar{ width: 5px; } - } +} @media(max-width: 459px){ .container .content .category{ flex-direction: column; diff --git a/src/Pages/AccountPage/AccountPage.js b/src/Pages/AccountPage/AccountPage.js index a637c91..6de845c 100644 --- a/src/Pages/AccountPage/AccountPage.js +++ b/src/Pages/AccountPage/AccountPage.js @@ -6,47 +6,47 @@ import { useHistory } from "react-router-dom"; function getAccountInformation() { - -return ( - -
-
Profile
-
-
-
-
- Full Name - -
-
- Username - -
-
- Email - -
-
- Phone Number - -
-
- Password - -
-
- Confirm Password - + + return ( + +
+
Profile
+
+ +
+
+ First Name + +
+
+ Last Name + +
+
+ Username + +
+
+ Email + +
+
+ Phone Number + +
+
+ Address + +
+
+
+ +
+
-
- -
- -
-
- -); + + ); - } +} export default getAccountInformation;