tweek ui and styles in browse sessions page

jam-ui/package.json

@@ -39,7 +39,7 @@
     "leaflet.tilelayer.colorfilter": "^1.2.5",
     "lodash": "^4.17.20",
     "merge-partially": "^2.0.2",
-    "moment": "^2.28.0",
+    "moment": "^2.29.4",
     "plyr": "3.6.2",
     "prism-react-renderer": "^0.1.7",
     "prism-themes": "^1.4.0",
@@ -95,8 +95,8 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.2.0",
-    "@playwright/test": "^1.15.2",
-    "browser-sync": "^2.26.12",
+    "@playwright/test": "^1.40.0",
+    "browser-sync": "^2.29.3",
     "eslint-config-prettier": "^4.2.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.6",

jam-ui/src/assets/scss/custom/_user.scss

@@ -113,5 +113,5 @@
   min-width: 0%;
   font-size: 8px;
   position: relative;
-  bottom: 1px;
+  bottom: 5px;
 }

jam-ui/src/components/profile/JKProfileAvatar.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import defaultAvatarUrl from '../../assets/img/team/avatar.png';
 import Avatar from '../common/Avatar';
 
-const JKProfileAvatar = ({ src, size, className }) => {
+const JKProfileAvatar = (options) => {
+  const {src, ...rest} = options;
   const avatarUrl = () => {
     if (src) {
       return src;
@@ -12,12 +13,18 @@ const JKProfileAvatar = ({ src, size, className }) => {
     }
   };
 
-  return <Avatar src={avatarUrl()} size={size} className={className}  />;
+  return <Avatar src={avatarUrl()} rest />;
 };
 
 JKProfileAvatar.propTypes = {
-  url: PropTypes.string,
-  size: PropTypes.string
+  size: PropTypes.oneOf(['s', 'm', 'l', 'xl', '2xl', '3xl', '4xl', '5xl']).isRequired,
+  rounded: PropTypes.string,
+  src: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  name: PropTypes.string,
+  emoji: PropTypes.string,
+  className: PropTypes.string,
+  mediaClass: PropTypes.string,
+  isExact: PropTypes.bool
 };
 
 JKProfileAvatar.defaultProps = {

jam-ui/src/components/sessions/JKSession.js

@@ -7,7 +7,7 @@ import { toast } from 'react-toastify';
 import { useTranslation } from 'react-i18next';
 import { useResponsive } from '@farfetch/react-context-responsive';
 import PropTypes from 'prop-types';
-import { Row, Col, Button } from 'reactstrap';
+import { Row, Col, Button, UncontrolledTooltip } from 'reactstrap';
 
 import jkCustomUrlScheme from '../../helpers/jkCustomUrlScheme';
 
@@ -17,7 +17,6 @@ import useNativeAppCheck from '../../hooks/useNativeAppCheck';
 import { useNativeApp } from '../../context/NativeAppContext';
 import EnterIcon from '../../assets/img/session/session_entrance.png';
 
-
 function JKSession({ session }) {
   const { currentUser } = useAuth();
   const dispatch = useDispatch();
@@ -75,8 +74,13 @@ function JKSession({ session }) {
   const actionButtons = () => {
     return (
       <div>
-        <a onClick={joinSession} data-testid="joinBtn" className="btn btn-outline-light btn-join mr-1 mb-1" style={{ cursor: 'pointer', padding: 2 }}>
-          <img src={EnterIcon} alt="enter" className="mr-1" height={28} width={38}  />
+        <a
+          onClick={joinSession}
+          data-testid="joinBtn"
+          className="btn btn-primary btn-join mr-1 mb-1 pt-1 pb-1 pl-1 pr-1"
+          style={{ cursor: 'pointer' }}
+        >
+          <img src={EnterIcon} alt="enter" className="mr-1" height={25} width={30} />
         </a>
         {/* <Button
           color="primary"
@@ -92,18 +96,10 @@ clicks this button, we open an audio stream using Icecast server to let the user
   };
 
   const musicianRowStyle = {
-    height: "50px",
-    flexWrap: "wrap",
-    overflow: "hidden",
-  }
-
-  const instrumentIconFile = track => {
-    try {
-      return require(`../../icons/instruments/icon_instrument_${track.instrument_id.replace(/\s+/g,"_")}.svg`)
-    }catch (error) {
-      return require(`../../icons/instruments/icon_instrument_unknown.svg`);
-    }
-  }
+    height: '50px',
+    flexWrap: 'wrap',
+    overflow: 'hidden'
+  };
 
   return (
     <>
@@ -133,9 +129,9 @@ clicks this button, we open an audio stream using Icecast server to let the user
               </Row>
             ))}
           </td>
-          <td>
+          <td className="text-center">
             {session.participants.map(participant => (
-              <Row key={participant.id} style={musicianRowStyle}>
+              <Row key={participant.id} style={musicianRowStyle} className="align-items-top">
                 <Col>
                   <JKUserLatencyBadge key={participant.id} user={participant.user} />
                 </Col>
@@ -147,15 +143,20 @@ clicks this button, we open an audio stream using Icecast server to let the user
               <Row style={musicianRowStyle} key={participant.id} data-testid={`Participant${participant.id}Tracks`}>
                 <Col>
                   {participant.tracks.map(track => (
-                    <span key={track.id} className='mr-1 mb-1' title={track.instrment}>
-                       <img width="25" src={instrumentIconFile(track)} alt={track.instrment} />
+                    <span key={track.id} className="mr-1 mb-1" title={track.instrment}>
+                      <a id={`Participant${participant.id}Track${track.id}Instrument`}>
+                        <InstrumentIcon track={track} />
+                      </a>
+                      <UncontrolledTooltip placement="top" target={`Participant${participant.id}Track${track.id}Instrument`}>
+                        {track.instrument}
+                      </UncontrolledTooltip>
                     </span>
                   ))}
                 </Col>
               </Row>
             ))}
           </td>
-          <td>{actionButtons()}</td>
+          <td className="text-center">{actionButtons()}</td>
         </tr>
       ) : (
         <Row>
@@ -194,6 +195,17 @@ clicks this button, we open an audio stream using Icecast server to let the user
   );
 }
 
+function InstrumentIcon({ track }) {
+  try {
+    const file = require(`../../icons/instruments/icon_instrument_${track.instrument_id.replace(/\s+/g, '_')}.svg`);
+    return <img width="25" src={file} alt={track.instrument} />
+  } catch (error) {
+    //return require(`../../icons/instruments/icon_instrument_unknown.svg`);
+    return <FontAwesomeIcon icon="music" transform="shrink-4 down-1" />
+  }
+}
+
+
 JKSession.propTypes = { session: PropTypes.object.isRequired };
 
 export default JKSession;

jam-ui/src/components/sessions/JKSessionList.js

@@ -14,9 +14,9 @@ function JKSessionList({ sessions }) {
           <th width="15%" scope="col" style={{ minWidth: 250 }}>
             {t('list.header.musicians', { ns: 'sessions' })}
           </th>
-          <th scope="col">{t('list.header.latency', { ns: 'sessions' })}</th>
+          <th scope="col" className='text-center'>{t('list.header.latency', { ns: 'sessions' })}</th>
           <th scope="col">{t('list.header.instruments', { ns: 'sessions' })}</th>
-          <th scope="col">{t('actions', { ns: 'common' })}</th>
+          <th scope="col" className="text-center">{t('actions', { ns: 'common' })}</th>
         </tr>
       </thead>
       <tbody className="list">

jam-ui/src/components/sessions/JKSessionUser.js

@@ -36,7 +36,7 @@ function JKSessionUser({ user }) {
         <div className="d-flex flex-row justify-content-between">
           <div className="avatar avatar-sm">
             <a href="/#" onClick={toggleMoreDetails}>
-              <JKProfileAvatar url={user.photo_url} />
+              <JKProfileAvatar src={user.photo_url} />
             </a>
           </div>
           <div className="ml-2 ms-2" style={{ width: '70%' }}>
@@ -49,13 +49,13 @@ function JKSessionUser({ user }) {
           </div>
         </div>
       ) : (
-        <div className="d-flex flex-row align-items-center mb-1 fs-0">
+        <div className="d-flex flex-row align-items-top mb-1 mt-0 p-0">
           <div className="avatar avatar-xl">
             <a href="/#" onClick={toggleMoreDetails}>
               <JKProfileAvatar url={user.photo_url} />
             </a>
           </div>
-          <div className="ml-2 ms-2">
+          <div className="ml-2 ms-2 mt-0 pt-0">
             <a href="/#" onClick={toggleMoreDetails}>
               {truncate(user.name)}
             </a>

jam-ui/src/i18n/locales/en/sessions.json

@@ -18,7 +18,7 @@
     "create_session": "Create Session"
   },
   "list": {
-    "page_title": "Browse Current Sessions",
+    "page_title": "Browse Sessions",
     "header": {
       "session": "Session",
       "musicians": "Musicians",