From 538fa0a17648c2a696d2f1c0b7a499993782c3bd Mon Sep 17 00:00:00 2001
From: Ronelle Caguioa <ronelle.caguioa@gmail.com>
Date: Thu, 23 Jul 2020 18:00:50 -0700
Subject: [PATCH 1/4] Add album art

---
 client/components/RoomPage/index.jsx  | 2 +-
 client/components/RoomPage/index.scss | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/components/RoomPage/index.jsx b/client/components/RoomPage/index.jsx
index 0db2bb6..a7fbe69 100644
--- a/client/components/RoomPage/index.jsx
+++ b/client/components/RoomPage/index.jsx
@@ -243,7 +243,7 @@ const RoomPage = props => {
         </div>
         <div className="room-player">
           <div className="player-cover">
-            <img src="" alt="Image goes here" />
+            <img src={albumArt} alt="Image goes here" />
           </div>
           <div className="player-content">
             <div className="player-playing">
diff --git a/client/components/RoomPage/index.scss b/client/components/RoomPage/index.scss
index bebb154..7076f4a 100644
--- a/client/components/RoomPage/index.scss
+++ b/client/components/RoomPage/index.scss
@@ -32,11 +32,10 @@
       .player-cover {
         width: 250px;
         height: 250px;
-        border: thin solid white;
         border-radius: 0;
 
         img {
-          display: block;
+          height: 100%
         }
       }
 

From a2b3ceec26311b4e1a6ea617974bce910d4fc576 Mon Sep 17 00:00:00 2001
From: Michael <wang.3101@osu.edu>
Date: Thu, 23 Jul 2020 18:09:54 -0700
Subject: [PATCH 2/4] additional styling bug fixes

---
 client/components/RoomOption/index.css | 2 +-
 client/components/RoomOption/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/components/RoomOption/index.css b/client/components/RoomOption/index.css
index 9dfdb35..6faa85e 100644
--- a/client/components/RoomOption/index.css
+++ b/client/components/RoomOption/index.css
@@ -4,6 +4,6 @@
 s {
   background-color: grey;
 } */
-p {
+.roomName {
   color: white;
 }
diff --git a/client/components/RoomOption/index.jsx b/client/components/RoomOption/index.jsx
index ce5dbce..41198cb 100644
--- a/client/components/RoomOption/index.jsx
+++ b/client/components/RoomOption/index.jsx
@@ -22,7 +22,7 @@ const RoomOption = props => {
 
   return (
     <div className="roomOption">
-      <p>{room.room_name}</p>
+      <p className="roomName">{room.room_name}</p>
       <button type="submit" onClick={handleClick}>
         Join
       </button>

From b5850558ba17b4010cb9e6ce0db8f0ce9c19f012 Mon Sep 17 00:00:00 2001
From: Bren Yamaguchi <yamaguchibren@gmail.com>
Date: Thu, 23 Jul 2020 18:10:48 -0700
Subject: [PATCH 3/4] fix song option color

---
 client/components/SongOption/index.css | 1 +
 client/components/SongSearch/index.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/SongOption/index.css b/client/components/SongOption/index.css
index 0c54f14..120e086 100644
--- a/client/components/SongOption/index.css
+++ b/client/components/SongOption/index.css
@@ -5,6 +5,7 @@
   justify-content: space-between;
   align-items: center;
   background-color: rgba(255, 255, 255, 0.05);
+  color: white;
 }
 
 .songOption-add {
diff --git a/client/components/SongSearch/index.css b/client/components/SongSearch/index.css
index 6304c02..9f6ec26 100644
--- a/client/components/SongSearch/index.css
+++ b/client/components/SongSearch/index.css
@@ -50,7 +50,7 @@
   min-height: 100%;
   max-height: 100%;
   overflow: scroll;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
 .songSearch-queue-header {

From f7394b315e19cd843be555f55f829474c0e6caf9 Mon Sep 17 00:00:00 2001
From: Ronelle Caguioa <ronelle.caguioa@gmail.com>
Date: Thu, 23 Jul 2020 18:24:00 -0700
Subject: [PATCH 4/4] Change img classes

---
 client/components/Chat/index.css      | 3 ++-
 client/components/Chat/index.jsx      | 4 ++--
 client/components/RoomPage/index.jsx  | 2 +-
 client/components/RoomPage/index.scss | 7 ++++++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/components/Chat/index.css b/client/components/Chat/index.css
index 2bb05e5..819f6f5 100644
--- a/client/components/Chat/index.css
+++ b/client/components/Chat/index.css
@@ -7,8 +7,9 @@
   overflow-y: scroll;
   display: flex;
   flex-direction: column-reverse;
+  color: white;
 }
-img {
+.chat-img {
   height: 30px !important;
   width: 30px !important;
   border-radius: 50%;
diff --git a/client/components/Chat/index.jsx b/client/components/Chat/index.jsx
index e717d78..6c61f9e 100644
--- a/client/components/Chat/index.jsx
+++ b/client/components/Chat/index.jsx
@@ -22,7 +22,7 @@ const Chat = ({ roomId }) => {
           feed.push(
             <div key={i}>
               <p>
-                <img src={response.data[i].thumbnail} />
+                <img className="chat-img" src={response.data[i].thumbnail} />
                 <span> {response.data[i].username}: </span>
                 {response.data[i].content}
               </p>
@@ -67,7 +67,7 @@ const Chat = ({ roomId }) => {
       [
         <div key={data.created_at}>
           <p>
-            <img src={data.thumbnail} />
+            <img className="chat-img" src={data.thumbnail} />
             <span> {data.username}:</span>
             {data.message}
             <span> {new Date().toLocaleTimeString()} </span>
diff --git a/client/components/RoomPage/index.jsx b/client/components/RoomPage/index.jsx
index a7fbe69..d124dab 100644
--- a/client/components/RoomPage/index.jsx
+++ b/client/components/RoomPage/index.jsx
@@ -243,7 +243,7 @@ const RoomPage = props => {
         </div>
         <div className="room-player">
           <div className="player-cover">
-            <img src={albumArt} alt="Image goes here" />
+            {albumArt && <img src={albumArt} />}
           </div>
           <div className="player-content">
             <div className="player-playing">
diff --git a/client/components/RoomPage/index.scss b/client/components/RoomPage/index.scss
index 7076f4a..f691a0d 100644
--- a/client/components/RoomPage/index.scss
+++ b/client/components/RoomPage/index.scss
@@ -33,6 +33,7 @@
         width: 250px;
         height: 250px;
         border-radius: 0;
+        border: thin solid black;
 
         img {
           height: 100%
@@ -42,6 +43,7 @@
       .player-content {
         @include centerWithFlex($direction: column, $justify: space-evenly, $align: flex-start);
         padding: 0 30px;
+        width: 300px;
 
         .player-playing {}
 
@@ -51,7 +53,10 @@
           flex-direction: column;
           justify-content: space-between;
 
-          h3 { font-size: 145%; }
+          h3 { 
+            font-size: 145%; 
+            color: white;
+          }
         }
 
         .player-btn {