finished based settings of favourite songs part of the middle row

src/renderer/components/FavouriteItem.vue

@@ -1,39 +0,0 @@
-<template>
-  <tr>
-      <td class="song">
-        <img :src="item.artwork" alt="Artwork">  
-        {{item.title}}
-      </td>
-
-      <td>
-        {{item.artist}}
-      </td>
-
-      <td>
-        {{item.duration}}
-      </td>
-  </tr>
-</template>
-
-<script>
-export default {
-  name: 'ListItem',
-  props: ['item']
-}
-</script>
-
-<style lang="sass" scoped>
-tr
-  width: 100%
-  height: 100%
-  padding: .3rem .5rem
-
-  td
-    vertical-align: middle
-
-  img
-    width: 3rem
-    height: 3rem
-    margin-right: .3rem
-</style>
-

src/renderer/components/ListItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <li>
+      <div class="song">
+        <img :src="item.artwork" alt="Artwork">  
+        {{item.title}}
+      </div>
+
+      <div class="artist">
+        {{item.artist}}
+      </div>
+
+      <div class="duration">
+        {{item.duration}}
+      </div>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'ListItem',
+  props: ['item']
+}
+</script>
+
+<style lang="sass" scoped>
+li
+  width: 100%
+  list-style: none
+  display: flex
+  justify-content: space-between
+  margin-bottom: .6rem
+
+  div.song
+    display: flex
+    align-items: center
+    flex: 1 0 50%
+
+  div.artist
+    display: flex
+    align-items: center
+    flex: 1 0 40%
+
+  div.duration
+    display: flex
+    align-items: center
+    justify-content: center
+    flex: 1 0 15%
+
+  img
+    width: 4rem
+    height: 4rem
+    margin-right: .6rem
+    border-radius: 6px
+</style>
+

src/renderer/layouts/HomePage.vue

@@ -6,9 +6,30 @@
       </div>
 
       <div class="middle-row">
-        <List class="grow-half">
+        <div class="grow-half">
-          <ListItem v-for="favourite in favourties" :key="favourite.id"></ListItem>
+          <div class="favourite__title-container">
+            <legend>favourite songs</legend>
+            <Button variant="outlined" class="view-all">View All</Button>
+          </div>
+          
+          <div class="favourite__list-header">
+            <span class="song">
+              <p>songs</p>
+            </span>
+
+            <span class="artist">
+              <p>artist</p>
+            </span>
+
+            <span class="duration">
+              <p>duration</p>
+            </span>
+          </div>
+          <List >
+            <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
           </List>
+        </div>
+
         <div class="grow-half"></div>
       </div>
 
@@ -18,11 +39,13 @@
 <script>
 import ActionBar from './ActionBar'
 import MusicRow from './MusicRow'
-import List from './FavouriteList'
+import List from './List'
+import ListItem from '../components/ListItem'
+import Button from '../components/Button'
 
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicRow, List },
+  components: { ActionBar, MusicRow, List, ListItem, Button },
   data: () => {
     return {
       items: [
@@ -109,7 +132,7 @@ export default {
 }
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 section.page
   padding: 1rem 2.5rem
   overflow-x: hidden
@@ -121,4 +144,43 @@ section.page
 
   .grow-half
     flex: 1 0 50% // deviding the space equally between two element
+
+.favourite
+  &__list-header
+    width: 100%
+    padding: 0.3rem .6rem
+    display: flex
+    justify-content: space-between
+
+    span.song
+        flex: 1 0 50%
+    span.artist
+      flex: 1 0 40%
+    span.duration
+      flex: 1 0 10%
+
+    p
+      color: lighten(grey , 20)
+      text-transform: capitalize
+      
+  &__title-container
+    display: flex
+    justify-content: space-between
+    align-items: center
+
+    legend
+      font-size: 2rem
+      font-family: 'Roboto Slab', serif        
+      margin: 20px 0px
+      text-transform: capitalize
+
+    .view-all
+      border-radius: 1rem
+      line-height: .1rem
+      padding: .9rem 1.3rem
+      font-weight: 300
+      text-transform: capitalize
+      display: flex
+      align-items: center
+      justify-content: center
 </style>

src/renderer/layouts/List.vue

@@ -1,9 +1,5 @@
 <template>
   <div>
-    <div class="favourite__title-container">
-      <legend>favourite songs</legend>
-      <Button variant="outlined" class="view-all">View All</Button>
-    </div>
 
     <ul>
       <slot></slot>
@@ -12,51 +8,17 @@
 </template>
 
 <script>
-import FavouriteItem from '../components/FavouriteItem'
+import FavouriteItem from '../components/ListItem'
-import Button from '../components/Button'
+
 export default {
   name: 'List',
   props: ['favourites'],
-  components: { FavouriteItem, Button }
+  components: { FavouriteItem }
 }
 </script>
 
 <style lang="sass" scoped>
-// TITLE
+ul
-.favourite__title-container
+  margin: 0
-  display: flex
+  padding: .3rem 0rem
-  justify-content: space-between
-  align-items: center
-legend
-  font-size: 2rem
-  font-family: 'Roboto Slab', serif        
-  margin: 20px 0px
-  text-transform: capitalize
-.view-all
-  border-radius: 1rem
-  line-height: .1rem
-  padding: .9rem 1.3rem
-  font-weight: 300
-  text-transform: capitalize
-  display: flex
-  align-items: center
-  justify-content: center
-
-// TABLE
-table
-  width: 100%
-  border-collapse: collapse
-th
-  color: lighten(grey, 20)
-  font-weight: 300
-  text-transform: capitalize
-  text-align: left
-  // define width based on amount of content 
-  &#song
-    width: 50%
-  &#artist
-    width: 34%
-  &#duration
-    width: 16%
-
 </style>