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,31 @@
   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;
+}
+
+.edit-profile-image img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .cancel-editing-icon {
@@ -25,14 +51,28 @@
   cursor: pointer;
 }
 
+.edit-user-details {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+
 .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: 15px 15px 21px 0px rgba(104,85,224,0.2);
+  border-bottom: 2px solid rgba(104, 85, 224, 0.5);
+  padding-bottom: 5px;
 }
 
 .edit-profile-img {
@@ -46,25 +86,23 @@
   font-size: 16px;
   height: 100px;
   border: 1px solid rgba(104, 85, 224, 1);
+  border-top: 0;
   border-radius: 4px;
-  box-shadow: 0 0 20px rgba(104, 85, 224, 0.2);
+  box-shadow: 17px 17px 21px 2px rgba(104,85,224,0.2);
 }
 
 .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 +112,24 @@
 .error-border {
   border: 2px solid red;
 }
+
+@media only screen and (max-width: 900px) {
+  .edit-user-details {
+    flex-direction: column;
+  }
+  .edit-user-details label {
+    padding-bottom: 15px;
+  }
+  .edit-profile-container {
+    width: 60%;
+    left: 50%;
+    top: 100px;
+  }
+}
+@media only screen and (max-width: 600px) {
+  .edit-profile-container {
+    width: 75%;
+    left: 50%;
+    top: 100px;
+  }
+}

src/components/EditProfile/index.jsx

@@ -4,6 +4,7 @@ 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 { useNavigate } from "react-router-dom";
 import { useSnackbar } from "notistack";
@@ -193,11 +194,19 @@ 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" }}
+            />
+            <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"
@@ -209,36 +218,49 @@ const EditProfile = ({ userData, username, setIsEditing, setUserData }) => {
               <img src={avatar} alt={name} className="edit-profile-img" />
             </label>
           </div>
+          <div className="edit-user-details">
+            {/* 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>
+            {/* 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>
 
-          {/* 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>
           {/* bio */}
           <label htmlFor="">
             <p className="edit-profile-label">Bio</p>
@@ -253,22 +275,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/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;