From 6ac5101e2f6d039c4e57aa131094f5251dc39b24 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 12 Aug 2021 18:31:29 -0700
Subject: [PATCH] fix scrollingmenu size

---
 src/components/dashboard/Dashboard.tsx         | 16 ++++++++++++++--
 src/components/scrollingmenu/ScrollingMenu.tsx |  9 ++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/dashboard/Dashboard.tsx b/src/components/dashboard/Dashboard.tsx
index cf37eaf..4078971 100644
--- a/src/components/dashboard/Dashboard.tsx
+++ b/src/components/dashboard/Dashboard.tsx
@@ -45,11 +45,19 @@ const Dashboard = () => {
   }, []);
 
   if (isLoading) {
-    return <Loader />;
+    return (
+      <GenericPage header={<GenericPageHeader title="Dashboard" />}>
+        <Loader />
+      </GenericPage>
+    );
   }
 
   if (isError) {
-    return <span>Error: {isError}</span>;
+    return (
+      <GenericPage header={<GenericPageHeader title="Dashboard" />}>
+        <span>Error: {isError}</span>
+      </GenericPage>
+    );
   }
 
   return (
@@ -61,6 +69,7 @@ const Dashboard = () => {
             data={recentAlbums.album}
             cardTitle={{ prefix: 'album', property: 'name' }}
             cardSubtitle={{ prefix: 'album', property: 'artist' }}
+            cardSize="175px"
           />
 
           <ScrollingMenu
@@ -68,6 +77,7 @@ const Dashboard = () => {
             data={newestAlbums.album}
             cardTitle={{ prefix: 'album', property: 'name' }}
             cardSubtitle={{ prefix: 'album', property: 'artist' }}
+            cardSize="175px"
           />
 
           <ScrollingMenu
@@ -75,6 +85,7 @@ const Dashboard = () => {
             data={randomAlbums.album}
             cardTitle={{ prefix: 'album', property: 'name' }}
             cardSubtitle={{ prefix: 'album', property: 'artist' }}
+            cardSize="175px"
           />
 
           <ScrollingMenu
@@ -82,6 +93,7 @@ const Dashboard = () => {
             data={frequentAlbums.album}
             cardTitle={{ prefix: 'album', property: 'name' }}
             cardSubtitle={{ prefix: 'album', property: 'artist' }}
+            cardSize="175px"
           />
         </>
       )}
diff --git a/src/components/scrollingmenu/ScrollingMenu.tsx b/src/components/scrollingmenu/ScrollingMenu.tsx
index 695d6be..6c3d2ce 100644
--- a/src/components/scrollingmenu/ScrollingMenu.tsx
+++ b/src/components/scrollingmenu/ScrollingMenu.tsx
@@ -41,7 +41,13 @@ const RightArrow = () => {
   );
 };
 
-const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title }: any) => {
+const ScrollingMenu = ({
+  cardTitle,
+  cardSubtitle,
+  data,
+  title,
+  cardSize,
+}: any) => {
   return (
     <ScrollMenuContainer>
       <Title>{title}</Title>
@@ -57,6 +63,7 @@ const ScrollingMenu = ({ cardTitle, cardSubtitle, data, title }: any) => {
             subUrl={`${cardSubtitle.prefix}/${item[cardSubtitle.property]}`}
             playClick={{ type: 'album', id: item.id }}
             hasHoverButtons
+            size={cardSize}
           />
         ))}
       </ScrollMenu>