From 37294489a821caccf88874f0fb6fb510e01a55b3 Mon Sep 17 00:00:00 2001
From: Triston <tarmstrong95@proton.me>
Date: Sun, 7 Apr 2024 13:03:42 -0500
Subject: [PATCH] (feat): fix some of the music player styles

---
 src/App.tsx                           |  6 ++++--
 src/components/music_player/index.tsx | 27 +++++++++++++--------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 02b80c7..7175343 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,20 +17,22 @@ export function App() {
     <div className="flex flex-row gap-2 px-2">
 
       {/* Left Section __________*/}
-      <div className="pt-2 min-h-[95vh] max-h-[95vh] min-w-[150px] flex flex-col gap-4 justify-start">
+      <div className="pt-2 min-h-[98vh] max-h-[98vh] min-w-[150px] flex flex-col gap-4 justify-start">
         <div className="w-full flex justify-center">
           <input type="text" className="rounded-md border p-1 w-full" placeholder="Search" />
         </div>
+
         <div>
           <h2 className="text-gray-500 text-sm">Music</h2>
           <Navigation />
         </div>
+
         <button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button>
       </div>
 
 
       {/* Right Section __________*/}
-      <div className="flex-1 min-h-[95vh] max-h-[95vh] flex h-0 p-2">
+      <div className="flex-1 min-h-[98vh] max-h-[98vh] flex h-0 p-2">
         <div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
           <MusicPlayer />
           <Popular />
diff --git a/src/components/music_player/index.tsx b/src/components/music_player/index.tsx
index b6c0783..17f7838 100644
--- a/src/components/music_player/index.tsx
+++ b/src/components/music_player/index.tsx
@@ -1,26 +1,24 @@
 export function MusicPlayer() {
   return (
-    <div
-      id="top"
-      className="justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] flex gap-2 items-center"
-    >
-      <div className="flex gap-2 items-center">
+    <div className="flex justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] gap-2 items-center">
+      <div className="flex gap-2 items-center flex-[0.5]">
         <img
+          width={50}
           className="rounded-xl"
           src="https://www.thispersondoesnotexist.com"
-          width={80}
-          height={"auto"}
           alt="station art"
         />
-        <div className="flex flex-col">
-          <p>Camden to Chinatown</p>
-          <p>Loafy Building, Raimu</p>
+
+        <div className="flex flex-col" style={{ overflowX: 'hidden' }}>
+          <p className="text-sm" style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>Camden to Chinatown</p>
+          <p className="text-sm" style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>Loafy Building, Raimu</p>
         </div>
       </div>
 
-      <div>
+      <div className="flex-1 flex flex-col items-center">
         <div className="flex gap-1 justify-center">
           <svg
+            id="playbutton"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
@@ -30,7 +28,7 @@ export function MusicPlayer() {
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            className="lucide lucide-play"
+            className="lucide lucide-play w-5"
           >
             <polygon points="6 3 20 12 6 21 6 3" />
           </svg>
@@ -43,8 +41,9 @@ export function MusicPlayer() {
         </div>
       </div>
 
-      <div className="flex gap-1">
+      <div className="flex flex-row flex-[0.5] gap-1 justify-end items-end">
         <svg
+          id="volume"
           xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
@@ -54,7 +53,7 @@ export function MusicPlayer() {
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
-          className="lucide lucide-volume-1"
+          className="lucide lucide-volume-1 w-5"
         >
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />