Improved tutorial and generated element styling.

src/player/MusicPlayer.js

@@ -186,7 +186,7 @@ export default class MusicPlayer {
      */
     generatePlayElement() {
         const playButton = document.createElement("button");
-        playButton.classList.add("player");
+        playButton.classList.add("music-player");
         playButton.classList.add("play-btn");
         if (this.playing) playButton.classList.add("pause");
 
@@ -210,7 +210,7 @@ export default class MusicPlayer {
 
     generateNextElement() {
         const nextButton = document.createElement("button");
-        nextButton.classList.add("player");
+        nextButton.classList.add("music-player");
         nextButton.classList.add("next");
         nextButton.addEventListener("click", () => {
             this.next();
@@ -221,7 +221,7 @@ export default class MusicPlayer {
 
     generatePreviousElement() {
         const previousButton = document.createElement("button");
-        previousButton.classList.add("player");
+        previousButton.classList.add("music-player");
         previousButton.classList.add("previous");
         previousButton.addEventListener("click", () => {
             this.previous();

src/styles/music-player.css

@@ -0,0 +1,38 @@
+button.music-player.play-btn {
+    border-width: 2px;
+    border-style: solid;
+    border-color: gray;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    background-color: transparent;
+    cursor: pointer;
+    border-radius: 15px;
+}
+
+button.music-player.play-btn.pause {
+    background-color: black;
+    color: white;
+    border-color: black;
+}
+
+button.music-player.next {
+    border-width: 2px;
+    border-style: solid;
+    border-color: gray;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    background-color: transparent;
+    cursor: pointer;
+    border-radius: 15px;
+}
+
+button.music-player.previous {
+    border-width: 2px;
+    border-style: solid;
+    border-color: gray;
+    padding: 0.5rem;
+    margin: 0.25rem;
+    background-color: transparent;
+    cursor: pointer;
+    border-radius: 15px;
+}

src/styles/music-playlist.css

@@ -9,15 +9,21 @@ table.music-playlist tr th {
     border-left-style: none;
     border-right-style: none;
     background-color: lightgray;
+    border-bottom-color: black;
+    cursor: default;
 }
 
-
 table.music-playlist tr td {
     border-left-style: none;
     border-right-style: none;
+    border-bottom-color: darkgray;
 }
 
-table.music-playlist .active {
+table.music-playlist tr {
+    cursor: pointer;
+}
+
+table.music-playlist tr.active {
     background-color: gray;
     color: white;
-}
+}