added EditProfile

src/App.js

@@ -1,23 +1,23 @@
 import React from "react";
-import styled from "styled-components";
+// import styled from "styled-components";
 import GlobalStyle from "./styles/GlobalStyle";
 // import Login from './components/Login';
-// import Signup from './components/Signup';
+// import Signup from "./components/Signup";
+import Container from "./styles/Container";
 import Nav from "./components/Nav";
+import EditProfile from "./components/EditProfile";
+// import Profile from "./components/Profile";
+// import DetailedPost from "./components/DetailedPost";
 // import Post from "./components/Post";
 // import ProfilePreview from "./components/ProfilePreview";
 
-const Container = styled.div`
-	width: 930px;
-	margin: 0 auto;
-`;
-
 const App = () => {
 	return (
 		<>
 			<GlobalStyle />
 			<Nav />
-			<Container style={{ marginTop: "6rem" }}>
+			<Container>
+				<EditProfile />
 			</Container>
 		</>
 	);

src/components/ChangePassword.js

@@ -0,0 +1,37 @@
+import React from "react";
+import styled from "styled-components";
+import Button from "../styles/Button";
+import { Wrapper } from "./ProfileForm";
+
+const buttonStyle = {
+	marginLeft: '13rem'
+}
+
+const labelStyle = {
+	width: '200px'
+}
+
+
+const ChangeAvatar = () => {
+	return (
+		<Wrapper>
+			<form>
+				<div className="input-group">
+					<label style={labelStyle} className="bold">Old Password</label>
+					<input type="password" />
+				</div>
+				<div className="input-group">
+					<label style={labelStyle} className="bold">New Password</label>
+					<input type="password" />
+				</div>
+				<div className="input-group">
+					<label style={labelStyle} className="bold">Confirm New Password</label>
+					<input type="password" />
+				</div>
+				<Button style={buttonStyle}>Submit</Button>
+			</form>
+		</Wrapper>
+	);
+};
+
+export default ChangeAvatar;

src/components/EditProfile.js

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import ProfileForm from "./ProfileForm";
+import ChangePassword from "./ChangePassword";
+
+const Wrapper = styled.div`
+	grid-template-columns: 240px 1fr;
+	width: 930px;
+	border: 1px solid #dbdbdb;
+	display: grid;
+	background: #fff;
+
+	.tabs {
+		border-right: 1px solid #dbdbdb;
+		padding: 1rem;
+	}
+
+	ul {
+		list-style-type: none;
+	}
+
+	li {
+		margin-bottom: 1.5rem;
+		cursor: pointer;
+	}
+
+	.profile-form-container {
+		display: flex;
+		justify-content: center;
+	}
+`;
+
+const EditProfile = () => {
+	const [tab, setTab] = useState("profile");
+
+	return (
+		<Wrapper>
+			<div className="tabs">
+				<ul>
+					<li
+						onClick={() => setTab("profile")}
+						className={tab === "profile" ? "bold" : ""}
+					>
+						Edit Profile
+					</li>
+					<li
+						onClick={() => setTab("changepw")}
+						className={tab === "changepw" ? "bold" : ""}
+					>
+						Change Password
+					</li>
+				</ul>
+			</div>
+
+			{tab === "profile" && (
+				<div className="profile-form-container">
+					<ProfileForm />
+				</div>
+			)}
+
+			{tab === "changepw" && (
+				<div className="profile-form-container">
+					<ChangePassword />
+				</div>
+			)}
+		</Wrapper>
+	);
+};
+
+export default EditProfile;

src/components/ProfileForm.js

@@ -0,0 +1,117 @@
+import React from "react";
+import styled from "styled-components";
+import avatar from "../assets/avatar.jpg";
+import Button from "../styles/Button";
+import Avatar from "../styles/Avatar";
+
+export const Wrapper = styled.div`
+	padding: 1rem;
+
+	img {
+		cursor: pointer;
+		margin-right: 40px;
+	}
+
+	.input-group {
+		margin-top: 1.5rem;
+	}
+
+	.input-group > label {
+		display: inline-block;
+		width: 100px;
+	}
+
+	input,
+	textarea {
+		padding: 0.4rem 1rem;
+		font-family: "Fira Sans", sans-serif;
+		font-size: 1rem;
+		border-radius: 4px;
+		border: 1px solid #dbdbdb;
+		width: 350px;
+	}
+
+	.textarea-group {
+		display: flex;
+	}
+
+	.change-avatar {
+		display: flex;
+	}
+
+	input[id="change-avatar"] {
+		display: none;
+	}
+
+	span {
+		color: #0095f6;
+		cursor: pointer;
+	}
+
+	button {
+		margin-top: 1.5rem;
+		margin-left: 6.25rem;
+		margin-bottom: 1rem;
+	}
+`;
+
+const ProfileForm = () => {
+	return (
+		<Wrapper>
+			<form>
+				<div className="input-group change-avatar">
+					<div>
+						<label htmlFor="change-avatar">
+							<Avatar lg src={avatar} alt="avatar" />
+						</label>
+						<input id="change-avatar" type="file" />
+					</div>
+					<div class="change-avatar-meta">
+						<h2>kickbuttowski248</h2>
+						<label htmlFor="change-avatar">
+							<span>Change Profile Photo</span>
+						</label>
+						<input id="change-avatar" type="file" />
+					</div>
+				</div>
+
+				<div className="input-group">
+					<label className="bold" htmlFor="name">
+						Name
+					</label>
+					<input type="text" value="Kick Buttowski" />
+				</div>
+				<div className="input-group">
+					<label className="bold" htmlFor="username">
+						Username
+					</label>
+					<input type="text" value="kickbuttowski248" />
+				</div>
+				<div className="input-group">
+					<label className="bold" htmlFor="website">
+						Website
+					</label>
+					<input type="text" value="https://github.com/manikandanraji" />
+				</div>
+				<div className="input-group textarea-group">
+					<label className="bold" htmlFor="bio">
+						Bio
+					</label>
+					<textarea
+						cols="10"
+						value="Former Assassin, killed a guy with an pencil"
+					></textarea>
+				</div>
+				<div className="input-group">
+					<label className="bold" htmlFor="email">
+						Email
+					</label>
+					<input type="email" value="[email protected]" />
+				</div>
+				<Button>Submit</Button>
+			</form>
+		</Wrapper>
+	);
+};
+
+export default ProfileForm;

src/styles/Avatar.js

@@ -1,10 +1,16 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 const Avatar = styled.img`
 	width: 28px;
 	height: 28px;
 	border-radius: 14px;
 	margin-right: 1rem;
+
+	${props => props.lg && css`
+		width: 60px;
+		height: 60px;
+		border-radius: 30px;
+`}
 `;
 
 export default Avatar;

src/styles/Button.js

@@ -7,6 +7,7 @@ const Button = styled.button`
 	color: #fff;
 	border-radius: 4px;
 	margin-top: 1rem;
+	margin-left: 1rem;
 	font-family: "Fira Sans", sans-serif;
 	font-size: 1rem;
 `;

src/styles/Container.js

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 const Container = styled.div`
 	width: 930px;
 	margin: 6rem auto;
+	margin-bottom: 4rem;
 `;
 
 export default Container;

src/styles/GlobalStyle.js

@@ -29,6 +29,10 @@ const GlobalStyle = createGlobalStyle`
 		color: #0095F6;
 	}
 
+	.bold {
+		font-weight: 500;
+	}
+
 	*:focus {
 	  outline: none;
 	}