From a41f898f1db9c96334d9d6ca28dc7a8e5bdd6d3a Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 8 Aug 2021 09:43:27 -0700
Subject: [PATCH] update styling

---
 src/components/playlist/PlaylistViewHeader.tsx |  8 +++++++-
 src/components/scrollingmenu/ScrollingMenu.tsx | 10 ++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/playlist/PlaylistViewHeader.tsx b/src/components/playlist/PlaylistViewHeader.tsx
index 9f1ea40..d74c4ed 100644
--- a/src/components/playlist/PlaylistViewHeader.tsx
+++ b/src/components/playlist/PlaylistViewHeader.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
+import styled from 'styled-components';
 import '../../styles/PlaylistViewHeader.global.css';
 
+const StyledImg = styled.img`
+  border-radius: 85px;
+  box-shadow: 0 0 20px #000;
+`;
+
 const PlaylistViewHeader = ({ name, comment, image, songCount }: any) => {
   return (
     <div id="playlist__header" className="container__playlist">
       <div className="playlist__column_left">
-        <img src={image} alt="playlist-img" />
+        <StyledImg src={image} alt="playlist-img" />
       </div>
       <div className="playlist__column_middle">
         <h1 className="playlist__title">{name}</h1>
diff --git a/src/components/scrollingmenu/ScrollingMenu.tsx b/src/components/scrollingmenu/ScrollingMenu.tsx
index 1ebb970..f1936f2 100644
--- a/src/components/scrollingmenu/ScrollingMenu.tsx
+++ b/src/components/scrollingmenu/ScrollingMenu.tsx
@@ -10,6 +10,7 @@ const ScrollMenuContainer = styled.div`
 `;
 
 const StyledPanel = styled(Panel)`
+  text-align: center;
   width: 150px;
   height: 200px;
   margin: 10px;
@@ -19,7 +20,6 @@ const StyledPanel = styled(Panel)`
 `;
 
 const InfoPanel = styled(Panel)`
-  text-align: center;
   width: 150px;
 `;
 
@@ -27,14 +27,11 @@ const InfoSpan = styled.div`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  width: 150px;
   padding: 0 10px 0px 10px;
 `;
 
 const CardImg = styled.img`
-  width: 150px;
-  height: 150px;
-  object-fit: contain;
+  max-height: 150px;
 `;
 
 const Overlay = styled.div`
@@ -45,7 +42,8 @@ const Overlay = styled.div`
 `;
 
 const Title = styled.h1`
-  font-size: 24px !important;
+  margin-left: 20px;
+  font-size: 20px !important;
 `;
 
 const LeftArrow = () => {