Enhance visual

QubitPi · Nov 30, 2024 · f456793 · f456793
1 parent 90a1c5c
commit f456793
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/App.css b/src/App.css
@@ -39,5 +39,16 @@
 }
 
 .container .playListSection {
-  flex: 40%;
+  flex: 20%;
+
+  background: white;
+  background: linear-gradient(
+          to right bottom,
+          rgba(255, 255, 255, 0.7),
+          rgba(255, 255, 255, 0.3)
+  );
+  border-radius: 2rem;
+
+  display: flex;
+  justify-content: center;
 }
diff --git a/src/components/PlayList.css b/src/components/PlayList.css
@@ -13,7 +13,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.playlist {
+    width: 85%;
+}
+
 .playlist .title {
+    margin-top: 1rem;
+    text-align: center;
+}
+
+
+.playlist .videoTitle {
+    margin-top: 1rem;
     padding-left: 1rem;
 }
 

diff --git a/src/components/PlayList.tsx b/src/components/PlayList.tsx
@@ -39,7 +39,7 @@ export default function PlayList(props: PlayListProps) {
                   onClick={() => props.listItemOnClick(video)}
               >
                 <img src={playIcon} alt=""/>
-                <h3 className="title">{video.title}</h3>
+                <h3 className="videoTitle">{video.title}</h3>
                 <p className="time">{video.duration}</p>
               </div>
             })