Skip to content

Commit

Permalink
Edit Profile UI (#1128)
Browse files Browse the repository at this point in the history 
* moved search to navbar and displayed in a modal

* positioned story icons

* story ui

* reduced css

* style: format

* ui change

* responsive

* edit icon

* style: format

* responsive

* minor fix

* removed commentted code

* fix

* fix: styles

---------

Co-authored-by: Narayan soni <narayansoni854@gmail.com>
  • Loading branch information
@anamika7153 @narayan954
anamika7153 and narayan954 committed Aug 5, 2023
1 parent 0fbcb5e commit 98c3158
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 67 deletions.
125 changes: 113 additions & 12 deletions src/components/EditProfile/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
left: 50%;
width: 50%;
transform: translate(-50%, 0%);
padding: 60px;
padding: 30px;
background: var(--btn-color);
border-radius: 22px;
}

.edit-profile-sub-container {
Expand All @@ -15,6 +16,43 @@
justify-content: center;
flex-direction: column;
gap: 30px;
width: 98%;
margin: auto;
}

.edit-profile-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: auto;
}

.edit-profile-image {
position: relative;
left: 50%;
transform: translateX(-50%);
height: 160px;
width: 160px;
display: flex;
cursor: pointer;
}

.edit-profile-image img {
height: 100%;
width: 100%;
object-fit: cover;
}

.edit-profile-image-icon {
position: absolute;
left: 98%;
transform: translate(-98%);
color: rgba(8, 17, 123, 0.69);
background-color: rgb(255, 255, 255, 0.7);
border-radius: 50%;
padding: 10px;
cursor: pointer;
}

.cancel-editing-icon {
Expand All @@ -25,14 +63,39 @@
cursor: pointer;
}

.edit-user-details {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
}

.user-field {
width: 30%;
}

.edit-profile-label {
font-weight: 600;
font-size: 17px;
color: var(--text-light-black);
padding: 22px 0 8px;
}

.edit-profile-input {
margin-top: 0;
width: 100% !important;
width: 95% !important;
background-color: transparent;
border: 0;
box-shadow: none;
border-bottom: 1px solid rgba(104, 85, 224, 0.5);
padding-bottom: 5px;
border-radius: 0;
}

.name-input,
.username-input,
.country-input {
width: 85% !important;
}

.edit-profile-img {
Expand All @@ -45,26 +108,22 @@
padding: 10px;
font-size: 16px;
height: 100px;
border: 1px solid rgba(104, 85, 224, 1);
border-radius: 4px;
box-shadow: 0 0 20px rgba(104, 85, 224, 0.2);
border-bottom: 1px solid rgba(104, 85, 224, 1);
border-top: 0;
/* border-radius: 4px; */
}

.edit-profile-save-btn {
width: 100%;
padding: 10px;
border-radius: 8px;
font-size: 18px;
color: rgba(8, 17, 123, 0.69);
font-size: 20px;
font-weight: 600;
background-color: white;
border: none;
color: white;
background: linear-gradient(rgb(102, 102, 250), rgb(81, 81, 245));
cursor: pointer;
}

.edit-profile-save-btn:hover {
background: linear-gradient(rgb(64, 64, 198), rgb(81, 81, 245));
color: rgba(8, 17, 123, 0.9);
}

.edit-profile-save-btn:active {
Expand All @@ -74,3 +133,45 @@
.error-border {
border: 2px solid red;
}

@media only screen and (max-width: 900px) {
.edit-profile-sub-container {
gap: 20px;
}
.edit-profile-image {
height: 140px;
width: 140px;
}
.edit-user-details {
flex-direction: column;
}
.edit-profile-label {
padding: 0;
padding-top: 18px;
}
.name-input,
.username-input,
.country-input,
.user-field {
width: 98% !important;
}

.edit-user-details label {
padding-bottom: 15px;
}
.edit-profile-container {
width: 60%;
left: 50%;
top: 120px;
}
}
@media only screen and (max-width: 600px) {
.edit-profile-container {
width: 75%;
left: 50%;
}
.edit-profile-image {
height: 120px;
width: 120px;
}
}
121 changes: 68 additions & 53 deletions src/components/EditProfile/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import "./index.css";
import { auth, db, storage } from "../../lib/firebase";
import { useRef, useState } from "react";

import CancelIcon from "@mui/icons-material/Cancel";
import BackIcon from "@mui/icons-material/ArrowBackIosNew";
import { ClickAwayListener } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";
import { useNavigate } from "react-router-dom";
import { useSnackbar } from "notistack";

Expand All @@ -19,6 +20,7 @@ const EditProfile = ({ userData, username, setIsEditing, setUserData }) => {
});
const [image, setImage] = useState(null);
const [usernameAvailable, setUsernameAvailable] = useState(true);

const { enqueueSnackbar } = useSnackbar();
const usernameRef = useRef("");
const { name, newUsername, bio, country, uid, avatar } = editedData;
Expand Down Expand Up @@ -193,55 +195,84 @@ const EditProfile = ({ userData, username, setIsEditing, setUserData }) => {
<ClickAwayListener onClickAway={() => setIsEditing(false)}>
<div className="edit-profile-container">
<div className="edit-profile-sub-container">
<CancelIcon
className="cancel-editing-icon"
onClick={() => setIsEditing(false)}
/>
<div>
<div className="edit-profile-header">
<BackIcon
onClick={() => setIsEditing(false)}
style={{ display: "flex", marginTop: "6px", cursor: "pointer" }}
/>
<h2>Edit Profile</h2>
<div>
<span className="edit-profile-save-btn" onClick={handleImgSave}>
Save
</span>
</div>
</div>
<div className="edit-profile-image">
<input
type="file"
id="file"
className="file"
onChange={handleImgChange}
accept="image/*"
/>
<EditIcon className="edit-profile-image-icon" />
<label htmlFor="file">
<img src={avatar} alt={name} className="edit-profile-img" />
</label>
</div>

{/* name */}
<label defaultValue={"Name"}>
<p className="edit-profile-label">Name</p>
<input
type="text"
value={name}
name="name"
className="edit-profile-input"
onChange={handleChange}
/>
</label>
{/* username */}
<label htmlFor="">
<p className="edit-profile-label">Username</p>
<input
type="text"
value={newUsername}
name="newUsername"
className={`edit-profile-input ${
usernameAvailable ? "" : "error-border"
}`}
ref={usernameRef}
onChange={(e) => {
usernameRef.current = e.target.value.trim();
handleChange(e);
checkUsername();
}}
/>
</label>
<div className="edit-user-details">
{/* name */}
<div className="user-field">
<label defaultValue={"Name"}>
<p className="edit-profile-label">Name</p>
<input
type="text"
value={name}
name="name"
className="edit-profile-input name-input"
onChange={handleChange}
/>
</label>
</div>
{/* username */}
<div className="user-field">
<label htmlFor="">
<p className="edit-profile-label">Username</p>
<input
type="text"
value={newUsername}
name="newUsername"
className={`edit-profile-input username-input ${
usernameAvailable ? "" : "error-border"
}`}
ref={usernameRef}
onChange={(e) => {
usernameRef.current = e.target.value.trim();
handleChange(e);
checkUsername();
}}
/>
</label>
</div>
{/* country */}
<div className="user-field">
<label htmlFor="">
<p className="edit-profile-label">Country</p>
<input
type="text"
name="country"
value={country}
className="edit-profile-input country-input"
onChange={handleChange}
/>
</label>
</div>
</div>
{/* bio */}
<label htmlFor="">
<p className="edit-profile-label">Bio</p>
<p style={{ paddingTop: "0" }} className="edit-profile-label">
Bio
</p>
<textarea
name="bio"
id=""
Expand All @@ -253,22 +284,6 @@ const EditProfile = ({ userData, username, setIsEditing, setUserData }) => {
onChange={handleChange}
></textarea>
</label>
{/* country */}
<label htmlFor="">
<p className="edit-profile-label">Country</p>
<input
type="text"
name="country"
value={country}
className="edit-profile-input"
onChange={handleChange}
/>
</label>
<div>
<button className="edit-profile-save-btn" onClick={handleImgSave}>
Save
</button>
</div>
</div>
</div>
</ClickAwayListener>
Expand Down
5 changes: 3 additions & 2 deletions src/components/Navbar/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
position: fixed;
width: 100%;
top: 0;
z-index: 999;
padding-block: 10px;
z-index: 9999;
padding-top: 10px;
padding-bottom: 10px;
object-fit: contain;
display: flex;
align-items: center;
Expand Down
2 changes: 2 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
--label-color: rgb(200, 246, 248);
--profile-color: #7d7575;
--text-light: rgba(0, 0, 0, 0.6);
--text-light-black: rgba(0, 0, 0, 0.6);
--text-dim: rgba(0, 0, 0, 0.8);
--post-error-boundary: rgba(0, 0, 0, 0.54);
--text-black-only: black;
Expand Down Expand Up @@ -56,6 +57,7 @@
--profile-color: #c8c6c6;
--text-black-only: black;
--text-light: rgba(255, 255, 255, 0.6);
--text-light-black: rgba(0, 0, 0, 0.6);
--text-dim: rgba(255, 255, 255, 0.8);
--post-error-boundary: rgba(255, 255, 255, 0.54);
--darkmode-white: white;
Expand Down

0 comments on commit 98c3158

Please sign in to comment.