Edit Profile UI

src/components/EditProfile/index.css

@@ -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 {
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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;
+  }
+}

src/components/EditProfile/index.jsx

@@ -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";
 
@@ -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;
@@ -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=""
@@ -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>

src/components/Navbar/index.css

@@ -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;

src/index.css

@@ -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;
@@ -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;