Merge pull request nukeop#209 from aayushchhabra/master

Add ability to click on artist name in the down-left corner
AndrewBezold · Jan 30, 2019 · 2da156d · 2da156d
2 parents b722f33 + c274eee
commit 2da156d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/app/App.js b/app/App.js
@@ -208,6 +208,8 @@ class App extends React.Component {
       <TrackInfo
         track={this.getCurrentSongParameter('name')}
         artist={this.getCurrentSongParameter('artist')}
+        artistInfoSearchByName={this.props.actions.artistInfoSearchByName}
+        history={this.props.history}
       />
     );
   }

diff --git a/app/components/TrackInfo/index.js b/app/components/TrackInfo/index.js
@@ -5,10 +5,23 @@ import styles from './styles.scss';
 class TrackInfo extends React.Component {
 
   render() {
+    let {
+      track,
+      artist,
+      artistInfoSearchByName,
+      history
+    } = this.props;
     return (
       <div className={styles.track_info_container}>
-        <div className={styles.track_name}>{this.props.track}</div>
-        <div className={styles.artist_name}>{this.props.artist}</div>
+        <div className={styles.track_name}>{track}</div>
+        <a
+          onClick={() => artistInfoSearchByName(artist, history)}
+          href='#'
+        >
+          <div className={styles.artist_name}>
+            {artist}
+          </div>
+        </a>
       </div>
     );
   }

diff --git a/app/components/TrackInfo/styles.scss b/app/components/TrackInfo/styles.scss
@@ -1,3 +1,4 @@
+@import '../../vars';
 .track_info_container {
   display: flex 1;
   margin: 10px 20px;
@@ -16,7 +17,10 @@
 }
 
 .artist_name {
-  color: rgba(248, 248, 242, 0.5);
+  color: $lightbg;
+  &:hover {
+    color: $white;
+  }
   font-size: 16px;
   flex: 1 1 auto;
   overflow: hidden;