diff --git a/client/src/screens/UserProfile/UserProfile.jsx b/client/src/screens/UserProfile/UserProfile.jsx
new file mode 100644
index 000000000..43fa0e82f
--- /dev/null
+++ b/client/src/screens/UserProfile/UserProfile.jsx
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+// components
+import { ShowPortfolioProjects } from '../../components/Projects/PortfolioCard/PortfolioCard';
+import { EditProfile } from '../EditProfile/EditProfile';
+// assets
+import { uiActions } from '../../services/redux/slices/uiSlice';
+import './UserProfile.scss';
+import { getOneUser } from '../../services/api/users';
+
+export const UserProfile = () => {
+ const { user: reduxUser, editMode } = useSelector((state) => state.ui);
+ const [currUser, setCurrUser] = useState({
+ first_name: '',
+ last_name: '',
+ role: '',
+ email: '',
+ about: '',
+ fun_fact: '',
+ portfolio_link: '',
+ });
+ const dispatch = useDispatch();
+ const params = useParams();
+ const validUrl = `http://${reduxUser.portfolio_link}`;
+
+ useEffect(() => {
+ const setUser = async () => {
+ if (params.id === reduxUser._id) {
+ setCurrUser(reduxUser);
+ } else {
+ const res = await getOneUser(params.id);
+ setCurrUser(res);
+ }
+ };
+ setUser();
+ }, [params]);
+
+ const handleToggleMode = () => {
+ dispatch(uiActions.toggleEditMode());
+ };
+
+ if (editMode) {
+ return (
+ <>
+
+
+
+ );
+ } else {
+ const { about, email, fun_fact, first_name, last_name, role, _id: currUserId } = currUser;
+ return (
+
+
Profile
+
im an image
+
+ {currUserId === reduxUser._id && }
+
+ {first_name} {last_name}
+
+ {role}
+
+ {/*
+
+ */}
+
+
+
+ {fun_fact && (
+
+
Fun Fact
+
{fun_fact}
+
+ )}
+
+
+
+
+
Sign Up
+
-
- Already have an account? Sign in.
-
+
+
+ Already have an account? Sign in.
+
+
);
};
diff --git a/src/screens/SignUp/SignUp.scss b/src/screens/SignUp/SignUp.scss
index 6f25b3af8..fd34b7499 100644
--- a/src/screens/SignUp/SignUp.scss
+++ b/src/screens/SignUp/SignUp.scss
@@ -1,45 +1,57 @@
+.form-error {
+ margin-top: 5px;
+}
+.single-button {
+ background-color: grey;
+ height: 50px;
+ margin-top: 2rem;
+ padding: 14px 20px;
+ width: 102px;
+}
.sign-up-screen {
display: flex;
flex-direction: column;
font-family: 'Nunito', sans-serif;
+ font-weight: 700;
justify-content: center;
+ padding-top: 80px;
- h4 {
+ .footer {
align-self: center;
- font-weight: 500;
- text-align: center;
- width: max-content;
- }
-
- label {
- font-size: 14px;
- font-weight: 300;
- }
-
- input {
- border: solid black 1px;
- height: 28px;
- padding-left: 7px;
- width: 100%;
- }
-
- .input-wrapper {
- margin-top: 7px;
- width: 100%;
}
-
- h6 {
- align-self: center;
+
+ form {
+ a {
+ align-self: center;
+ color: black;
+ font-size: 12px;
+ font-style: italic;
+ }
+ .input-wrapper {
+ margin-top: 7px;
+ width: 100%;
+ }
+ input {
+ border: solid black 1px;
+ box-shadow: 0.3px 1px darkgrey;
+ height: 28px;
+ margin-top: -.5rem;
+ padding-left: 7px;
+ width: 100%;
+ }
+ label {
+ font-size: 14px;
+ font-weight: 500;
+ }
}
-
- a {
+
+ .header {
align-self: center;
- color: black;
- font-size: 12px;
- font-style: italic;
+ font-weight: 700;
+ font-size: 24px;
+ margin-top: -4rem;
+ text-align: center;
+ width: max-content;
}
}
-.form-error {
- margin-top: 5px;
-}