dependency and style updates

gatsby-config.js

@@ -22,9 +22,7 @@ module.exports = {
     },
     {
       resolve: 'gatsby-plugin-google-fonts',
-      options: {
-        fonts: ['Lato:400,700,900'],
-      },
+      options: { fonts: ['Lato:400,700,900'] },
     },
     {
       resolve: 'gatsby-plugin-manifest',

package.json

@@ -9,23 +9,26 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "gatsby": "^2.13.20",
-    "gatsby-plugin-google-analytics": "^2.1.4",
+    "eslint-plugin-flowtype": "^2.50.3",
+    "gatsby": "^2.15.1",
+    "gatsby-plugin-google-analytics": "^2.1.12",
     "gatsby-plugin-google-fonts": "^1.0.1",
-    "gatsby-plugin-manifest": "^2.2.3",
-    "gatsby-plugin-react-helmet": "^3.1.2",
-    "gatsby-plugin-sass": "^2.1.3",
+    "gatsby-plugin-manifest": "^2.2.12",
+    "gatsby-plugin-react-helmet": "^3.1.5",
+    "gatsby-plugin-sass": "^2.1.12",
     "knuth-shuffle": "^1.0.8",
-    "lodash": "^4.17.14",
+    "lodash": "^4.17.15",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
     "react-helmet": "^5.2.1",
     "store": "^2.0.12",
-    "webpack": "^4.35.3"
+    "typescript": "^3.6.2",
+    "webpack": "^4.39.3"
   },
   "devDependencies": {
+    "eslint": "^6.3.0",
     "prettier": "^1.18.2"
   }
 }

src/components/Background.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import bg from '../images/bg.jpg';
 import cn from 'classnames';
 import './Background.scss';
 
-const Background = ({ hide }) => (
-  <img alt="" className={cn({ App_background: true, hide })} src={bg} />
+const Background = ({ src, hide }) => (
+  <img
+    alt=""
+    className={cn({ App_background: true, hide })}
+    src="https://source.unsplash.com/collection/8541150"
+  />
 );
 
 export default Background;

src/components/Background.scss

@@ -10,10 +10,14 @@
   top: 0;
   left: 0;
   z-index: $z-neg;
-  transition: opacity $speed-slowest;
+  transition: opacity $speed-slow, transform $speed-normal;
   opacity: 0.3;
 
   &.hide {
     opacity: 0;
+
+    @media (min-width: $break-lg) {
+      transform: translateX($player-width / -2);
+    }
   }
 }

src/components/Footer.jsx

@@ -8,12 +8,19 @@ const Footer = () => (
       <a href="https://8tracks.com" rel="noopener noreferrer" target="_blank">
         8tracks
       </a>
-      &nbsp; &amp; &nbsp;
+      ,{' '}
       <a href="https://www.last.fm" rel="noopener noreferrer" target="_blank">
         Last.fm
+      </a>{' '}
+      &amp;{' '}
+      <a
+        href="https://unsplash.com/collections/8541150/line-radio-background-images"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Unsplash
       </a>
     </span>
-    <span className="Footer_line" />
     <span>
       Source on &nbsp;
       <a

src/components/Footer.scss

@@ -4,12 +4,15 @@
 .Footer {
   @extend .fade_in;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   align-items: center;
   padding: 0 $padding-md $padding-lg;
   font-size: 0.8rem;
+  line-height: 1.6rem;
 
   @media (min-width: $break-md) {
+    flex-direction: row;
     padding: 0 $padding-lg $padding-lg;
   }
 
@@ -18,17 +21,6 @@
   }
 
   a {
-    color: $accent-primary;
     text-decoration: underline;
   }
 }
-
-.Footer_line {
-  @media (min-width: $break-md) {
-    position: relative;
-    top: 1px;
-    height: 1px;
-    width: 30vw;
-    background-color: $background-primary-darker;
-  }
-}

src/components/Header.jsx

@@ -17,7 +17,7 @@ const Header = props => (
         <img alt="Line Radio" src={logo} />
       </a>
     </h1>
-    <h2>Streamlined Music Discovery</h2>
+    <h2>Streamlined music discovery.</h2>
     <CurrentTags currentTags={props.currentTags} removeTag={props.removeTag} />
   </header>
 );

src/components/Header.scss

@@ -31,7 +31,6 @@
 
   h2 {
     font-size: 0.8rem;
-    text-transform: uppercase;
     letter-spacing: 0.05em;
 
     @media (min-width: $break-md) {

src/components/List.scss

@@ -54,12 +54,12 @@
   justify-content: space-between;
   align-items: center;
   padding: $padding-xs;
-  background-color: $background-secondary-light;
+  background-color: $background-secondary;
   border-radius: $border-radius $border-radius 0 0;
   transition: background-color $speed-fast;
 
   &:hover {
-    background-color: $background-secondary;
+    background-color: $background-secondary-light;
   }
 }
 

src/components/Suggestion.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import cn from 'classnames';
 import { callGa } from '../utilities/helpers';
 
 export default class Suggestion extends React.PureComponent {
@@ -20,11 +21,14 @@ export default class Suggestion extends React.PureComponent {
   };
 
   render() {
-    const { suggestion } = this.props;
+    const { playerVisible, suggestion } = this.props;
 
     return (
       !!suggestion.length && (
-        <button onClick={this.handleSuggestionClick}>
+        <button
+          className={cn({ playerVisible })}
+          onClick={this.handleSuggestionClick}
+        >
           {this.getSuggestionText()}
         </button>
       )

src/components/Suggestions.scss

@@ -41,5 +41,13 @@
     &:active {
       transform: translateY(0);
     }
+
+    &.playerVisible {
+      background-color: $background-secondary;
+
+      &:hover {
+        background-color: $background-secondary-light;
+      }
+    }
   }
 }

src/components/Tag.scss

@@ -30,12 +30,14 @@
     border-radius: 2rem;
     background-color: $background-secondary;
     box-shadow: $box-shadow-button;
+    transition: background-color $speed-fast;
     color: $text-secondary;
     font-size: 1.2rem;
     font-weight: $font-weight-black;
     line-height: $padding-md;
 
     &:hover {
+      background-color: $background-secondary-light;
       text-decoration: line-through;
       cursor: pointer;
     }

src/utilities/variables.scss

@@ -37,7 +37,7 @@ $speed-fast: 0.2s;
 $speed-normal: 0.3s;
 $speed-slow: 0.5s;
 $speed-slower: 1s;
-$speed-slowest: 1.5s;
+$speed-slowest: 2s;
 $translate-distance: 2px;
 
 // boxes