From 155ed94551abbb32691b06175fef62cb0d2e23bc Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 28 Dec 2021 14:29:01 -0800
Subject: [PATCH] style changes for home

---
 src/renderer/style.less           |  2 +-
 src/renderer/views/pages/home.ejs | 83 ++++++++++++++++---------------
 2 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 75c395c9..b221ad89 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1540,7 +1540,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .home-page {
-  background: linear-gradient(0deg, black, #4c2c31);
+  background: linear-gradient(180deg, #4c2c31 0%, #190e10 600px, #10090a);
   top: 0;
   padding-top: var(--navbarHeight);
 
diff --git a/src/renderer/views/pages/home.ejs b/src/renderer/views/pages/home.ejs
index e5af558d..4f99d2c7 100644
--- a/src/renderer/views/pages/home.ejs
+++ b/src/renderer/views/pages/home.ejs
@@ -1,52 +1,55 @@
 <script type="text/x-template" id="cider-home">
     <div class="content-inner home-page">
-        <div class="row">
-            <div class="col">
-                <h3>Home</h3>
-                <div class="well profile-well">
-                    <div class="user-icon">
-                        <mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url" size="300"></mediaitem-artwork>
+        <div class="bg-image"></div>
+        <div>
+            <div class="row">
+                <div class="col">
+                    <h3>Home</h3>
+                    <div class="well profile-well">
+                        <div class="user-icon">
+                            <mediaitem-artwork shadow="none" :url="profile.attributes.artwork.url" size="300"></mediaitem-artwork>
+                        </div>
+                        <h3>{{ profile.attributes.name }}</h3>
+                        <h4>@{{ profile.attributes.handle }}</h4>
+                        <button class="md-btn">Share</button>
+                    </div>
+                </div>
+                <div class="col">
+                    <h3>Recently Played</h3>
+                    <div class="well">
+                        <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
                     </div>
-                    <h3>{{ profile.attributes.name }}</h3>
-                    <h4>@{{ profile.attributes.handle }}</h4>
-                    <button class="md-btn">Share</button>
                 </div>
             </div>
-            <div class="col">
-                <h3>Recently Played</h3>
-                <div class="well">
-                    <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
+            <div class="row">
+                <div class="col">
+                    <h3>Your Favorites</h3>
+                    <div class="well">
+                        <div>Items you have added to your favorites will appear here.</div>
+                        <!-- <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal> -->
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <h3>Your Favorites</h3>
-                <div class="well">
-                    <div>Items you have added to your favorites will appear here.</div>
-                    <!-- <mediaitem-scroller-horizontal kind="small" :items="friendsListeningTo" :item="item"></mediaitem-scroller-horizontal> -->
+            <div class="row">
+                <div class="col madeforyou-col">
+                    <h3>Made For You</h3>
+                    <div class="well">
+                        <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
+                    </div>
+                </div>
+                <div class="col">
+                    <h3>Your Artist Feed</h3>
+                    <div class="well">
+                        <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="row">
-            <div class="col madeforyou-col">
-                <h3>Made For You</h3>
-                <div class="well">
-                    <mediaitem-square kind="small" v-for="item in madeForYou" :item="item"></mediaitem-square>
-                </div>
-            </div>
-            <div class="col">
-                <h3>Your Artist Feed</h3>
-                <div class="well">
-                    <mediaitem-list-item v-for="item in recentlyPlayed.limit(6)" :item="item"></mediaitem-list-item>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col">
-                <h3>Friends Listening To</h3>
-                <div class="well">
-                    <mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
+            <div class="row">
+                <div class="col">
+                    <h3>Friends Listening To</h3>
+                    <div class="well">
+                        <mediaitem-square kind="small" v-for="item in friendsListeningTo" :item="item"></mediaitem-square>
+                    </div>
                 </div>
             </div>
         </div>