Albums page data and CSS

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