UI/UX imporvements

Author: shashankitsoft

src/components/NewsSection.css

@@ -13,7 +13,7 @@
   flex-direction: row;
   overflow-x: auto;
   gap: 24px;
-  padding: 16px 24px 16px 24px;
+  padding: 16px 0px 16px 0px;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
 }

src/components/NewsSection.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import "./NewsSection.css";
 import VideoThumbnailCard from "./VideoThumbnailCard";
 import { VideoEntry } from "../types";
 

src/components/VideoModal.css

@@ -1,16 +1,34 @@
 .modal-content {
+  outline: none;
+  background: #181818;
+  color: #fff;
+  border-radius: 16px;
+  padding: 0 0 16px 0;
+  max-width: 640px;
+  max-height: 96vh;
+  min-width: 320px;
+  width: 90vw;
+  box-sizing: border-box;
+  margin: 2vh auto;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 100%;
-  background: #181818;
 }
 .yt-player-container {
-  width: 640px;
-  height: 360px;
+  width: 100%;
+  max-width: 600px;
+  min-width: 280px;
+  aspect-ratio: 16/9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+}
+.yt-player-container iframe {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
   background: #000;
-  margin-bottom: 16px;
 }
 .close-btn {
   min-width: 100px;
@@ -53,3 +71,19 @@
   vertical-align: middle;
   fill: #fff;
 }
+@media (max-width: 900px) {
+  .modal-content {
+    max-width: 96vw;
+    min-width: 0;
+    width: 100vw;
+    border-radius: 0;
+    margin: 0;
+    padding: 0 0 8px 0;
+  }
+  .yt-player-container {
+    max-width: 100vw;
+    min-width: 0;
+    aspect-ratio: 16/9;
+    padding: 0 4vw;
+  }
+}

src/components/VideoThumbnailCard.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { VideoInfo } from "../types";
+import "./VideoThumbnailCard.css";
 
 interface VideoThumbnailCardProps {
   video: VideoInfo;

src/global.css

@@ -6,6 +6,14 @@
   color: #ffffff;
 } */
 
+.logo{
+ width: 28px;
+ height: 28px;
+  vertical-align: middle;
+  margin-right: 8px;
+  border-radius: 6px;
+}
+
 .category {
   margin-bottom: 20px;
   padding-left: 16px;
@@ -16,3 +24,4 @@
   margin: 0;
   text-transform: capitalize;
 }
+

src/pages/Channels.css

@@ -46,7 +46,7 @@
   flex-direction: row;
   overflow-x: auto;
   gap: 24px;
-  padding: 16px 24px 16px 24px;
+  padding: 16px 0px 16px 0px;
   -ms-overflow-style: none;
   overflow: -moz-scrollbars-none;
 }

src/pages/Channels.tsx

@@ -52,7 +52,14 @@ const Channels: React.FC = () => {
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle>Channels</IonTitle>
+          <IonTitle>
+            <img
+              src={`${BASE_PATH}assets/icon/supertube-32x32.png`}
+              alt="SuperTube Logo"
+              className="logo"
+            />
+            Channels
+          </IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>