media players related updates

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

@@ -1,5 +1,5 @@
 .chip-container{
-  border: 1px solid #edf2f9f5;
+  border: 1px solid #eceff9;
   width: 100%;
   padding: 10px;
   background: floralwhite;

jam-ui/src/components/client/JKSessionBackingTrackPlayer.js

@@ -503,7 +503,7 @@ const JKSessionBackingTrackPlayer = ({
         display: 'flex',
         flexDirection: 'column',
         // fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif',
-        backgroundColor: '#edf2f9f5'
+        backgroundColor: '#f8f9fa'
       }}>
         
         {/* Popup Content */}
@@ -575,7 +575,7 @@ const JKSessionBackingTrackPlayer = ({
                       borderRadius: '50%',
                       border: 'none',
                       //backgroundColor: isPlaying ? '#6c757d' : '#5b9bd5',
-                      backgroundColor: '#edf2f9f5',
+                      backgroundColor: '#eceff9',
                       //color: 'white',
                       display: 'flex',
                       alignItems: 'center',
@@ -604,7 +604,7 @@ const JKSessionBackingTrackPlayer = ({
                       height: '44ßpx',
                       borderRadius: '50%',
                       border: 'none',
-                      backgroundColor: '#edf2f9f5',
+                      backgroundColor: '#eceff9',
                       color: 'white',
                       display: 'flex',
                       alignItems: 'center',

jam-ui/src/components/client/JKSessionMetronomePlayer.css

@@ -1,9 +1,9 @@
 .metronome-player-popup {
   padding: 20px 24px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
-  background-color: #f5f5f5;
+  background-color: '#f8f9fa';
   min-width: 380px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
 }
 
 .metronome-player-header {

jam-ui/src/components/client/JKSessionMetronomePlayer.js

@@ -298,7 +298,7 @@ const JKSessionMetronomePlayer = ({
   if (isPopup) {
     return (
       <div className="metronome-player-popup">
-        <div className="metronome-player-header">
+        {/* <div className="metronome-player-header">
           <h3>Metronome Controls</h3>
           <button
             className="metronome-close-btn"
@@ -307,6 +307,14 @@ const JKSessionMetronomePlayer = ({
           >
             <FontAwesomeIcon icon={faTimes} />
           </button>
+        </div> */}
+        <div style={{
+                color: '#666',
+                fontSize: '16px',
+                fontWeight: 'normal'
+              }}>
+                <span>Metronome</span>
+              
               </div>
         <div className="metronome-player-body">
           {renderControls()}

jam-ui/src/components/client/JKSessionScreen.js

@@ -1377,7 +1377,7 @@ const JKSessionScreen = () => {
         </div>
       </CardHeader>
 
-      <CardBody className="pl-4" style={{ backgroundColor: '#edf2f9f5', overflowX: 'auto', width: '100%' }}>
+      <CardBody className="pl-4" style={{ backgroundColor: '#eceff9', overflowX: 'auto', width: '100%' }}>
         <div className='d-flex' style={{ gap: '1rem' }}>
           <div className='audioInputs'>
             <h5>Audio Inputs
@@ -1743,9 +1743,9 @@ const JKSessionScreen = () => {
       {/* Metronome Player Popup */}
       {metronomeState.isOpen && (
         <WindowPortal
-          title="Metronome Controls"
+          title="Metronome"
           onClose={handleMetronomeClose}
-          windowFeatures="width=450,height=400,left=200,top=200,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,location=no, addressbar=no"
+          windowFeatures="width=450,height=300,left=200,top=200,menubar=no,toolbar=no,status=no,scrollbars=yes,resizable=yes,location=no, addressbar=no"
           windowId="metronome-controls"
         >
           <JKSessionMetronomePlayer