Albums page data and CSS

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'>
+        <div className='top'>
-          <h2>{props.name}</h2>
+          <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>

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;
+    }
+  }
+}

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)
     }
 

src/views/Albums.jsx

@@ -24,7 +24,7 @@ function Albums({ props }) {
   }
 
   return (
-    <div className='albums'>
+    <div className='spotify'>
       <h1>Albums</h1>
 
       {albums && (

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} />

src/views/ArtistSearch.scss

@@ -1,4 +1,4 @@
-.artist-search {
+.spotify {
   text-align: center;
 
   ul {

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>

src/views/Login.scss

@@ -0,0 +1,3 @@
+.login {
+  text-align: center;
+}