ok

src/components/Header.js

@@ -215,6 +215,7 @@ const Header = ({
   HeaderText,
   shopId,
   shopName,
+  shopImage,
   shopOwnerId,
   shopClerks,
   tableCode,
@@ -307,7 +308,7 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src="https://i.ibb.co.com/fpg1v8J/profile-major-icon-1024x1024-9rtgyx30.png"
+          src={shopImage}
           alt="Profile"
           onClick={handleImageClick}
           animate={showRectangle && animate}

src/components/Item.module.css

@@ -5,6 +5,7 @@
 }
 
 .item {
+  border-top: 2px solid #00000017;
   display: flex;
   align-items: stretch;
   justify-content: space-between;
@@ -16,6 +17,8 @@
   box-sizing: border-box; /* Include padding and border in the element's total width */
   width: 100%; /* Ensure the item does not exceed the parent's width */
   overflow: hidden; /* Prevent internal overflow */
+  padding-top: 10px;
+  margin-bottom: -3px;
 }
 
 .itemInvoice {

src/components/ItemLister.module.css

@@ -1,7 +1,6 @@
 /* ItemLister.module.css */
 
 .item-lister {
-  border-top: 1px solid #888;
   width: 100%;
   padding: 10px; /* Adjust padding as needed */
   box-sizing: border-box; /* Ensure padding doesn't affect width */
@@ -28,7 +27,6 @@
   height: calc(49vw - 20px);
 }
 
-
 .title-container {
   display: flex;
   align-items: center;

src/components/MusicPlayer.js

@@ -25,6 +25,7 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
   const [lyric_progress_ms, setLyricProgressMs] = useState(0);
 
   const [subtitleColor, setSubtitleColor] = useState("black");
+  const [subtitleBG, setSubtitleBG] = useState("white");
   const [backgroundImage, setBackgroundImage] = useState("");
 
   useEffect(() => {
@@ -89,8 +90,10 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
             255;
           if (luminance > 0.5) {
             setSubtitleColor("black");
+            setSubtitleBG("white");
           } else {
             setSubtitleColor("white");
+            setSubtitleBG("black");
           }
           setBackgroundImage(imageUrl);
         } catch (error) {
@@ -312,17 +315,20 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         style={{ backgroundImage: `url(${backgroundImage})` }}
       >
         {currentLines.past.map((line, index) => (
-          <div className="past" style={{ color: subtitleColor }} key={index}>
+          <div className="past" style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
         {currentLines.present.map((line, index) => (
-          <div className="present" style={{ color: subtitleColor }} key={index}>
+          <div className="present"  style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
         {currentLines.future.map((line, index) => (
-          <div className="future" style={{ color: subtitleColor }} key={index}>
+          <div className="future"  style={{ color: subtitleColor, 
+            textShadow: `2px 2px 2px ${subtitleBG}`, }} key={index}>
             <p>{line.words}</p>
           </div>
         ))}
@@ -439,11 +445,6 @@ export function MusicPlayer({ socket, shopId, user, isSpotifyNeedLogin }) {
         <h5>
           {expanded
             ? "︿"
-            : currentSong.item &&
-              currentSong.item.album &&
-              currentSong.item.album.images[0] &&
-              currentSong.item.artists[0]
-              ? "expand"
             : "request your song"}
         </h5>
       </div></>

src/pages/CafePage.js

@@ -71,7 +71,6 @@ function CafePage({
         setIsStarted(true);
       }
     }
-    setLoading(false);
   };
 
   useEffect(() => {
@@ -118,6 +117,7 @@ function CafePage({
       socket.on("joined-room", (response) => {
         const { isSpotifyNeedLogin } = response;
         setNeedSpotifyLogin(isSpotifyNeedLogin);
+        setLoading(false);
       });
     }
 
@@ -162,6 +162,7 @@ function CafePage({
                   isLogout={handleLogout}
                   shopId={shopId}
                   shopName={shopName}
+                  shopImage={config.image}
                   shopOwnerId={shopOwnerId}
                   shopClerks={shopClerks}
                   tableCode={table.tableCode}