From 1e0070e42b0f272c431d84ca51fdc6c3c8e39298 Mon Sep 17 00:00:00 2001
From: Anujkumar Darji <anujdarji100737@gmail.com>
Date: Wed, 1 May 2024 16:46:47 +0400
Subject: [PATCH 1/2] Fix title and description allignment for mobile screen
 resolved closes #7

---
 src/components/TrackCard.jsx | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/TrackCard.jsx b/src/components/TrackCard.jsx
index a8bd881..f51c61c 100644
--- a/src/components/TrackCard.jsx
+++ b/src/components/TrackCard.jsx
@@ -1,5 +1,8 @@
 /* eslint-disable react/prop-types */
 
+/* Import Statements */
+import React, { useState, useEffect } from 'react';
+
 /**
  * TrackCard component represents a card displaying a track in the lofi-music-app.
  * It allows users to play tracks and ambient effects.
@@ -16,7 +19,24 @@
  * @param {Function} props.onClick - The function to handle the click event on the track card.
  * @returns {JSX.Element} The rendered TrackCard component.
  */
+
+
+/* Constants */
+const SMALL_SCREEN_WIDTH = 600
+
 const TrackCard = (props) => {
+  /* Identify small screens */
+  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_WIDTH);
+  useEffect(() => {
+    const handleResize = () => {
+      setIsSmallScreen(window.innerWidth < SMALL_SCREEN_WIDTH);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <>
       <div className="flex flex-col justify-center">
@@ -39,13 +59,18 @@ const TrackCard = (props) => {
           />
         </div>
         <div className="space-y-1 text-sm mt-2.5 transition-all">
-          <div className="flex items-center gap-3">
-            <h3
+          <div className="flex items-center gap-3 justify-center sm:justify-start">
+          <h3
               className={`font-medium leading-none ${
                 props.trackPlaying == props.id && props.playingStatus
                   ? "text-green-400 underline"
                   : ""
-              } transition-all`}
+                } transition-all text-center sm:text-left`}
+                style={{
+                  // Apply marginLeft: 30px; on screens smaller than sm 
+                  marginLeft:  isSmallScreen  ? '30px' : '0px',
+                  transition: 'margin-left 0.2s ease', // Apply transition to margin-left
+                }}
             >
               {props.name}
             </h3>
@@ -58,7 +83,7 @@ const TrackCard = (props) => {
                 props.trackPlaying == props.id && props.playingStatus
                   ? "opacity-100 visible"
                   : "opacity-0 invisible"
-              } transition-all duration-200 invert accent-green-900`}
+                } transition-all duration-200 invert accent-green-900`}
             />
           </div>
           <p className="text-xs text-muted-foreground">{props.desc}</p>

From fde9e07b64c1577714a08400cf4b73cdc1871b3f Mon Sep 17 00:00:00 2001
From: Anujkumar Darji <anujdarji100737@gmail.com>
Date: Sun, 13 Oct 2024 19:55:56 +0530
Subject: [PATCH 2/2] Remove extra code fix issue with tailwind classes

---
 src/components/TrackCard.jsx | 35 ++++++-----------------------------
 1 file changed, 6 insertions(+), 29 deletions(-)

diff --git a/src/components/TrackCard.jsx b/src/components/TrackCard.jsx
index f51c61c..57631d1 100644
--- a/src/components/TrackCard.jsx
+++ b/src/components/TrackCard.jsx
@@ -1,8 +1,5 @@
 /* eslint-disable react/prop-types */
 
-/* Import Statements */
-import React, { useState, useEffect } from 'react';
-
 /**
  * TrackCard component represents a card displaying a track in the lofi-music-app.
  * It allows users to play tracks and ambient effects.
@@ -19,24 +16,7 @@ import React, { useState, useEffect } from 'react';
  * @param {Function} props.onClick - The function to handle the click event on the track card.
  * @returns {JSX.Element} The rendered TrackCard component.
  */
-
-
-/* Constants */
-const SMALL_SCREEN_WIDTH = 600
-
 const TrackCard = (props) => {
-  /* Identify small screens */
-  const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth < SMALL_SCREEN_WIDTH);
-  useEffect(() => {
-    const handleResize = () => {
-      setIsSmallScreen(window.innerWidth < SMALL_SCREEN_WIDTH);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
   return (
     <>
       <div className="flex flex-col justify-center">
@@ -59,18 +39,13 @@ const TrackCard = (props) => {
           />
         </div>
         <div className="space-y-1 text-sm mt-2.5 transition-all">
-          <div className="flex items-center gap-3 justify-center sm:justify-start">
-          <h3
+          <div className="flex items-center gap-3 ml-16 sm:ml-0">
+            <h3
               className={`font-medium leading-none ${
                 props.trackPlaying == props.id && props.playingStatus
                   ? "text-green-400 underline"
                   : ""
-                } transition-all text-center sm:text-left`}
-                style={{
-                  // Apply marginLeft: 30px; on screens smaller than sm 
-                  marginLeft:  isSmallScreen  ? '30px' : '0px',
-                  transition: 'margin-left 0.2s ease', // Apply transition to margin-left
-                }}
+              } transition-all`}
             >
               {props.name}
             </h3>
@@ -83,10 +58,12 @@ const TrackCard = (props) => {
                 props.trackPlaying == props.id && props.playingStatus
                   ? "opacity-100 visible"
                   : "opacity-0 invisible"
-                } transition-all duration-200 invert accent-green-900`}
+              } transition-all duration-200 invert accent-green-900`}
             />
           </div>
+          <div className="flex items-center gap-3 ml-16 sm:ml-0">
           <p className="text-xs text-muted-foreground">{props.desc}</p>
+            </div>
         </div>
       </div>
     </>