From b51207dd3ef6485c681fdd9210ee793716772593 Mon Sep 17 00:00:00 2001
From: Nuwan <nuwanchaturanga@gmail.com>
Date: Tue, 29 Oct 2024 09:04:58 +0530
Subject: [PATCH] UI style fixes in find friends page

---
 jam-ui/cypress/e2e/friends/friends-page.cy.js |  5 +++--
 jam-ui/src/components/page/JKPeopleFilter.js  |  4 ++--
 jam-ui/src/components/page/JKPerson.js        | 21 ++++++++++---------
 .../profile/JKProfileInstrumentsList.js       |  8 +++----
 4 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/jam-ui/cypress/e2e/friends/friends-page.cy.js b/jam-ui/cypress/e2e/friends/friends-page.cy.js
index 5985c2856..ca9307aa9 100644
--- a/jam-ui/cypress/e2e/friends/friends-page.cy.js
+++ b/jam-ui/cypress/e2e/friends/friends-page.cy.js
@@ -45,7 +45,8 @@ describe('Friends page without data', () => {
     }).as("getPeople_empty");
   });
 
-  it('from_location is unchecked', () => {
+  //from_location checkbox is hidden for now. so we skip this test for now
+  it.skip('from_location is unchecked', () => {
     cy.visit('/friends');
 
     //default api call with from_location parameter turned off
@@ -206,7 +207,7 @@ describe('Friends page with data', () => {
       
     });
 
-    describe('in mobile', () => {
+    describe.only('in mobile', () => {
       beforeEach(() => {
         cy.viewport('iphone-6');
       });
diff --git a/jam-ui/src/components/page/JKPeopleFilter.js b/jam-ui/src/components/page/JKPeopleFilter.js
index f03d368d6..551bd0e30 100644
--- a/jam-ui/src/components/page/JKPeopleFilter.js
+++ b/jam-ui/src/components/page/JKPeopleFilter.js
@@ -345,7 +345,7 @@ function JKPeopleFilter() {
                   <div className="col-12 col-md-6">
                     <label className="form-label" htmlFor="instruments">
                       Instruments{' '}
-                      <JKTooltip title="Use these checkboxes to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
+                      <JKTooltip title="Use these list to search for other musicians who play particular instruments. If you do not select any instruments, we search for any/all instruments. If you select multiple instruments, we search for musicians who play any of these instruments." />
                     </label>
                     <div className="choices">
                       <Controller
@@ -364,7 +364,7 @@ function JKPeopleFilter() {
                     </div>
                     <label className="form-label" htmlFor="genres">
                       Genres{' '}
-                      <JKTooltip title="Use these checkboxes to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
+                      <JKTooltip title="Use these list to search for other musicians who enjoy playing particular musical genres/styles. If you do not select any genres, we search for any/all genres. If you select multiple genres, we search for musicians who play any of these genres." />
                     </label>
                     <div className="choices">
                       <Controller
diff --git a/jam-ui/src/components/page/JKPerson.js b/jam-ui/src/components/page/JKPerson.js
index 87b00fab1..c33da8180 100644
--- a/jam-ui/src/components/page/JKPerson.js
+++ b/jam-ui/src/components/page/JKPerson.js
@@ -132,7 +132,6 @@ const JKPerson = props => {
             >
               <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
             </JKEditProfileButton>
-
           </td>
         </tr>
       ) : (
@@ -171,7 +170,10 @@ const JKPerson = props => {
           </Row>
           <br />
           <Row data-testid="mobBiography">
-            <Col>{biography}</Col>
+            <Col>
+              <h5>{t('person_attributes.about', { ns: 'people' })}</h5>
+              <div>{biography}</div>
+            </Col>
           </Row>
           <br />
 
@@ -198,14 +200,13 @@ const JKPerson = props => {
           </a> */}
 
           <JKEditProfileButton
-              onClick={toggleMoreDetails}
-              dataTestId="btnMore"
-              cssClasses="btn btn-primary fs--1 px-2 py-1"
-              title={t('view_profile', { ns: 'people' })}
-            >
-              <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
-            </JKEditProfileButton>
-
+            onClick={toggleMoreDetails}
+            dataTestId="btnMore"
+            cssClasses="btn btn-primary fs--1 px-2 py-1"
+            title={t('view_profile', { ns: 'people' })}
+          >
+            <FontAwesomeIcon icon="user" transform="shrink-4 down-1" className="mr-1" />
+          </JKEditProfileButton>
         </>
       )}
       <JKProfileSidePanel user={user} latencyData={latency_data} show={showSidePanel} setShow={setShowSidePanel} />
diff --git a/jam-ui/src/components/profile/JKProfileInstrumentsList.js b/jam-ui/src/components/profile/JKProfileInstrumentsList.js
index e4bea836b..2f871cc17 100644
--- a/jam-ui/src/components/profile/JKProfileInstrumentsList.js
+++ b/jam-ui/src/components/profile/JKProfileInstrumentsList.js
@@ -21,14 +21,14 @@ const JKPersonInstrumentsList = ({ instruments, showIcons, showAll, toggleMoreDe
   }, [showAll]);
 
   return (
-    <div data-testid="instrumentList">
+    <div data-testid="instrumentList" className='d-flex flex-column'>
       {instrumentsToShow &&
         instrumentsToShow.map(instrument => (
-          <div key={instrument.instrument_id} className="text-nowrap mb-1 d-flex align-items-center" data-testid="instrument">
-            <div className="mr-1">
+          <div key={instrument.instrument_id} className="mb-1 d-flex" data-testid="instrument">
+            <div className="mr-1" style={{ flexGrow: 1, flexBasis: '10%'}}>
               <JKInstrumentIcon instrumentId={instrument.instrument_id} instrumentName={instrument.description} />
             </div>
-            <div>
+            <div style={{ flexGrow: 1, flexBasis: '89%'}}>
               <strong>{instrument.description}:</strong> {proficiencies[instrument.proficiency_level]}
             </div>
           </div>