From d581d87f892eb1f9910854b557c9a5f1a426fc2e Mon Sep 17 00:00:00 2001
From: Rodrigo Pinto <rodrigo_plp@yahoo.com>
Date: Mon, 16 Dec 2019 18:38:48 -0500
Subject: [PATCH] Albums page data and CSS

---
 src/components/Album.jsx    | 16 ++++++---
 src/components/Album.scss   | 67 +++++++++++++++++++++++++++++++++++++
 src/components/Artist.jsx   |  2 +-
 src/views/Albums.jsx        |  2 +-
 src/views/ArtistSearch.jsx  |  4 +--
 src/views/ArtistSearch.scss |  2 +-
 src/views/Login.jsx         |  3 +-
 src/views/Login.scss        |  3 ++
 8 files changed, 89 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Album.scss
 create mode 100644 src/views/Login.scss

diff --git a/src/components/Album.jsx b/src/components/Album.jsx
index 387015f..eff481d 100644
--- a/src/components/Album.jsx
+++ b/src/components/Album.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import './Artist.scss'
+import './Album.scss'
 
 function Album({ props, callback }) {
   let [rate, setRate] = useState([])
@@ -9,7 +9,7 @@ function Album({ props, callback }) {
   }
 
   return (
-    <div className='artist' onClick={openAlbums}>
+    <div className='album' onClick={openAlbums}>
       <div className='picture'>
         {props.images.length > 0 && (
           <img src={props.images[0].url} />
@@ -17,10 +17,18 @@ function Album({ props, callback }) {
       </div>
 
       <div className='details'>
-        <div className='text'>
-          <h2>{props.name}</h2>
+        <div className='top'>
+          <div className='title'><h2>{props.name}</h2></div>
+          <p>{props.artists[0].name}</p>
         </div>
 
+        <div className='bottom'>
+          <p>{props.release_date}</p>
+          <p>{props.total_tracks} {props.total_tracks === 1 ? 'track' : 'tracks'}</p>
+        </div>
+
+        <button>Preview on Spotify</button>
+
       </div>
 
     </div>
diff --git a/src/components/Album.scss b/src/components/Album.scss
new file mode 100644
index 0000000..37372eb
--- /dev/null
+++ b/src/components/Album.scss
@@ -0,0 +1,67 @@
+.album {
+  border: solid thin #b6b6b6;
+  width: 12em;
+  height: 18.5em;
+  cursor: pointer;
+
+  .picture {
+    border-bottom: solid thin #b6b6b6;
+    background: #d7d7d7;
+    height: 9em;
+    overflow: hidden;
+
+    img {
+      min-height: 9em;
+      max-width: 12em;
+    }
+  }
+
+  .details {
+    display: inline-table;
+    position: relative;
+    height: 9.5em;
+    width: 100%;
+    text-align: left;
+
+    .title {
+      max-height: 44px;
+      overflow: hidden;
+
+      h2 {
+        font-size: 14pt;
+        margin: 0 0 3px 0;
+        font-weight: 500;
+        color: #444;
+      }
+    }
+
+    p {
+      font-size: 0.7rem;
+      color: #787878;
+      margin: 0;
+    }
+
+    .top {
+      padding: 10px;
+    }
+
+    .bottom {
+      padding: 10px;
+      position: absolute;
+      bottom: 25px;
+    }
+
+    button {
+      position: absolute;
+      bottom: 0;
+      height: 2.5em;
+      width: 100%;
+      color: #868686;
+      background: #f1f1f1;
+      font-weight: bold;
+      border: none;
+      border-top: solid thin #b6b6b6;
+      border-bottom: solid thin #b6b6b6;
+    }
+  }
+}
diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index ebc98fd..40ae08c 100644
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -15,7 +15,7 @@ function Artist({ props, callback }) {
 
   useEffect(() => {
     let stars = []
-    for (let i=0; i<Math.floor(props.popularity/20); i++) {
+    for (let i=0; i<Math.ceil(props.popularity/20); i++) {
       stars.push(star)
     }
 
diff --git a/src/views/Albums.jsx b/src/views/Albums.jsx
index af123d1..edbeade 100644
--- a/src/views/Albums.jsx
+++ b/src/views/Albums.jsx
@@ -24,7 +24,7 @@ function Albums({ props }) {
   }
 
   return (
-    <div className='albums'>
+    <div className='spotify'>
       <h1>Albums</h1>
 
       {albums && (
diff --git a/src/views/ArtistSearch.jsx b/src/views/ArtistSearch.jsx
index f4ecd03..562c3c8 100644
--- a/src/views/ArtistSearch.jsx
+++ b/src/views/ArtistSearch.jsx
@@ -23,7 +23,7 @@ function ArtistSearch({ props }) {
 
   // Search artists
   useEffect(() => {
-    if (search && search.length > 4) {
+    if (search && search.length > 2) {
       spotifyApi.searchArtists(search)
         .then(function(data) {
           setArtists(data.artists.items)
@@ -56,7 +56,7 @@ function ArtistSearch({ props }) {
   }
 
   return (
-    <div className="artist-search">
+    <div className="spotify">
       <h1>Artist search</h1>
 
       <input placeholder='Search for an artist' onChange={handleChange} />
diff --git a/src/views/ArtistSearch.scss b/src/views/ArtistSearch.scss
index 45c9866..45f1cae 100644
--- a/src/views/ArtistSearch.scss
+++ b/src/views/ArtistSearch.scss
@@ -1,4 +1,4 @@
-.artist-search {
+.spotify {
   text-align: center;
 
   ul {
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index bff7f50..c29dc77 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -1,8 +1,9 @@
 import React from 'react'
+import './Login.scss'
 
 function Login() {
   return (
-    <div className="artist-search">
+    <div className='login'>
       <h1>Touch Tunes</h1>
 
       <a href='http://localhost:8888/login' className='App-link'> Login to Spotify </a>
diff --git a/src/views/Login.scss b/src/views/Login.scss
new file mode 100644
index 0000000..f815e5c
--- /dev/null
+++ b/src/views/Login.scss
@@ -0,0 +1,3 @@
+.login {
+  text-align: center;
+}