From b4fc89543e0e1efe9c00e7a490c13922f90c0152 Mon Sep 17 00:00:00 2001
From: Ratan Gulati <ratangulati.dev@gmail.com>
Date: Thu, 23 May 2024 09:54:50 +0530
Subject: [PATCH] Fixed spacing UI of Home page

---
 frontend/src/App.css | 23 ++++++++++++++++++++--
 frontend/src/App.jsx | 47 ++++++++++++++++++++++----------------------
 2 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 019ae71..37b9317 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -295,11 +295,30 @@ aside p {
   width:100%;
   height:80vh;
   display: flex;
- 
-  align-items: center;
   flex-direction:column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.search_results{
+  font-size: xx-large;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 600;
+  align-self: flex-start;
+  margin-left: 2rem;
+  padding-bottom: 0.5rem;
+
 }
 
+.recent {
+  font-size: xx-large;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 600;
+  color: white;
+  margin-left: 2rem;
+  padding-bottom: 0.5rem;
+  padding-top: 2rem;
+}
 /*============================================= Section3 ==================================================*/
 
 .section3 {
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index d45b080..dce4791 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -113,7 +113,7 @@ const App = () => {
         </div>
        
         <div className="song_content">
-          <b>Song Results</b>
+          <b className="search_results">Search Results</b>
 
           <Swiper
             onSwiper={setSwiperRef}
@@ -152,7 +152,7 @@ const App = () => {
             )}
           </Swiper>
 
-          <h3>Recents</h3>
+          <h3 className="recent">Recents</h3>
           <Swiper
             onSwiper={setSwiperRef}
             slidesPerView={4}
@@ -167,27 +167,27 @@ const App = () => {
           >
              {data == null ? (
 
-<SwiperSlide style={{display:"flex",justifyContent:"center"}}><img src={waiting2} alt="" /></SwiperSlide>
-
-) : (
-data !== null &&
-data !== undefined &&
-data.map((element, index) => (
-<div key={index} onClick={() => playSong(index)}>
-  <SwiperSlide className="song">
-    <img
-      src={element.img}
-      height={"60%"}
-      alt={element.name}
-      onClick={() => playSong(index)}
-    />
-    <p onClick={() => playSong(index)}>
-      {decodeEntities(element.name)}
-    </p>
-  </SwiperSlide>
-</div>
-))
-)}
+            <SwiperSlide style={{display:"flex",justifyContent:"center"}}><img src={waiting2} alt="" /></SwiperSlide>
+
+            ) : (
+            data !== null &&
+            data !== undefined &&
+            data.map((element, index) => (
+            <div key={index} onClick={() => playSong(index)}>
+              <SwiperSlide className="song">
+                <img
+                  src={element.img}
+                  height={"60%"}
+                  alt={element.name}
+                  onClick={() => playSong(index)}
+                />
+                <p onClick={() => playSong(index)}>
+                  {decodeEntities(element.name)}
+                </p>
+              </SwiperSlide>
+            </div>
+            ))
+            )}
           </Swiper>
         </div>
 
@@ -202,3 +202,4 @@ data.map((element, index) => (
 };
 
 export default App;
+ 
\ No newline at end of file