Merge pull request #154 from Ratangulati/fix-issue-#149

Fixed spacing UI of Home page
Satyam1923 · May 24, 2024 · 78ae07b · 78ae07b
2 parents 15e9571 + f528bc2
commit 78ae07b
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 26 deletions.
diff --git 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: "Inter", 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: "Inter", 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
@@ -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>
 
@@ -201,4 +201,4 @@ data.map((element, index) => (
   );
 };
 
-export default App;
+export default App;