From 136a3c399dcbf506aa163dbfb631a284470dcefe Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Wed, 21 Aug 2024 00:49:58 +0530
Subject: [PATCH] edit profile page ui changes

---
 jam-ui/package-lock.json                      | 15 +++++---
 .../components/dashboard/JKDashboardMain.js   |  3 +-
 .../navbar/JKNotificationDropdown.js          |  3 +-
 .../components/navbar/JKProfileDropdown.js    |  2 +-
 .../navbar/JKTopNavRightSideNavItem.js        |  2 +-
 jam-ui/src/components/page/JKEditProfile.js   | 34 +++++++++----------
 jam-ui/src/helpers/initFA.js                  |  7 ++--
 7 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/jam-ui/package-lock.json b/jam-ui/package-lock.json
index 62407236b..fb9138119 100644
--- a/jam-ui/package-lock.json
+++ b/jam-ui/package-lock.json
@@ -3363,11 +3363,18 @@
       }
     },
     "@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.36",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz",
+          "integrity": "sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg=="
+        }
       }
     },
     "@fortawesome/react-fontawesome": {
diff --git a/jam-ui/src/components/dashboard/JKDashboardMain.js b/jam-ui/src/components/dashboard/JKDashboardMain.js
index c4da26d64..dc1178dcc 100644
--- a/jam-ui/src/components/dashboard/JKDashboardMain.js
+++ b/jam-ui/src/components/dashboard/JKDashboardMain.js
@@ -271,7 +271,8 @@ function JKDashboardMain() {
           <Route path="/privacy" component={JKPrivacy} />
           <Route path="/help" component={JKHelp} />
           <Route path="/unsubscribe" exact component={JKUnsubscribe} />
-          <PrivateRoute path="/" exact component={HomePage} />
+          {/* <PrivateRoute path="/" exact component={HomePage} /> */}
+          <PrivateRoute path="/" exact component={JKEditProfile} />
           <PrivateRoute path="/friends/my" component={JKMyFriends} />
           <PrivateRoute path="/friends" component={JKPeopleFilter} />
           <PrivateRoute path="/sessions/new" component={JKNewMusicSession} />
diff --git a/jam-ui/src/components/navbar/JKNotificationDropdown.js b/jam-ui/src/components/navbar/JKNotificationDropdown.js
index a884c3fb6..c57224bcc 100644
--- a/jam-ui/src/components/navbar/JKNotificationDropdown.js
+++ b/jam-ui/src/components/navbar/JKNotificationDropdown.js
@@ -75,7 +75,8 @@ const JKNotificationDropdown = () => {
           'notification-indicator notification-indicator-primary': !isAllRead
         })}
       >
-        <FontAwesomeIcon icon="bell" transform="shrink-6" className="fs-4" />
+        {/* <i class="fas fa-bell fa-2x fs-4" data-count="2"></i> */}
+        <FontAwesomeIcon icon={["fas", "bell"]} transform="shrink-5" className="fs-4" />
       </DropdownToggle>
       <DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
         <Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
diff --git a/jam-ui/src/components/navbar/JKProfileDropdown.js b/jam-ui/src/components/navbar/JKProfileDropdown.js
index 1662caba3..4d78dec75 100644
--- a/jam-ui/src/components/navbar/JKProfileDropdown.js
+++ b/jam-ui/src/components/navbar/JKProfileDropdown.js
@@ -44,7 +44,7 @@ const ProfileDropdown = () => {
         // }}
       >
         <DropdownToggle nav className="pr-0">
-          <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
+          <JKProfileAvatar src={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
           {/* <span className="d-none d-lg-block">{currentUser && currentUser.name}</span> */}
         </DropdownToggle>
         <DropdownMenu right className="dropdown-menu-card">
diff --git a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
index 9c8f66876..7684cb968 100644
--- a/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
+++ b/jam-ui/src/components/navbar/JKTopNavRightSideNavItem.js
@@ -29,7 +29,7 @@ const TopNavRightSideNavItem = () => {
       </NavItem> */}
 
       <NavbarText className="d-none d-md-inline">{t('keep_jamkazam_improving', { ns: 'common' })}:</NavbarText>
-      <NavItem className="d-none d-md-inline ml-1 mr-0">
+      <NavItem className="d-none d-md-inline ml-1 mr-2">
         <a className="nav-link" href={`${process.env.REACT_APP_CLIENT_BASE_URL}/client#/account/subscription`} target="_blank">
           {t('subscribe', { ns: 'common' })}
         </a>
diff --git a/jam-ui/src/components/page/JKEditProfile.js b/jam-ui/src/components/page/JKEditProfile.js
index ca5cf20eb..889b077ae 100644
--- a/jam-ui/src/components/page/JKEditProfile.js
+++ b/jam-ui/src/components/page/JKEditProfile.js
@@ -470,24 +470,24 @@ function JKEditProfile() {
                           />
                         </FormGroup>
                       </Col>
-                      <Col md={4}>
-                        <div className="d-flex align-items-center">
-                          <div>
-                            <JKProfileAvatar src={currentUser.photo_url} size="4xl" />
+                      <Col md={4} className='d-flex flex-column'>
+                        <a
+                          href="#"
+                          onClick={e => {
+                            e.preventDefault();
+                            toggleAvatarUpload();
+                          }}
+                          style={{ marginTop: "auto", marginBottom: "auto" }}
+                        >
+                          <div className="d-flex align-items-center">
+                            <div>
+                              <JKProfileAvatar src={currentUser.photo_url} size="3xl" />
+                            </div>
+                            <div>
+                              <FontAwesomeIcon icon={['fas', 'edit']} className="ml-2 mr-1" />
+                            </div>
                           </div>
-                          <div>
-                            <a
-                              href="#"
-                              onClick={e => {
-                                e.preventDefault();
-                                toggleAvatarUpload();
-                              }}
-                            >
-                              <FontAwesomeIcon icon="edit" className="ml-2 mr-1" />
-                              {t('change_photo')}
-                            </a>
-                          </div>
-                        </div>
+                        </a>
                       </Col>
                     </Row>
                     <Row>
diff --git a/jam-ui/src/helpers/initFA.js b/jam-ui/src/helpers/initFA.js
index 6caf53261..2a656f9eb 100644
--- a/jam-ui/src/helpers/initFA.js
+++ b/jam-ui/src/helpers/initFA.js
@@ -37,6 +37,7 @@ import {
   faSmileBeam as farSmileBeam,
   faStar as farStar,
   faMinus as farMinus,
+  faBell as farBell,
   far,
 } from '@fortawesome/free-regular-svg-icons';
 
@@ -321,6 +322,8 @@ library.add(
   faInfoCircle,
   faPhone,
   faTrello,
+   faMinus,
+  faDownload,
 
   // Regular
   farHeart,
@@ -344,7 +347,7 @@ library.add(
   farCircle,
   farCopy,
   farComment,
-  faMinus,
-  faDownload,
+  farBell,
+ 
   //faAcousticGuitar,
 );