Improved styling of tutorial and generated music playlist display.

src/player/MusicPlaylist.js

@@ -1,8 +1,6 @@
+import "../styles/music-playlist.css";
 import Music from "./Music.js";
 
-
-
-
 /**
  * A playlist that holds a multitude of musics in the form of {@link Music}.
  */
@@ -206,7 +204,6 @@ export default class MusicPlaylist {
 
     generatePlaylistElement() {
         const element = document.createElement("table");
-        element.createTHead().innerText = "Playlist";
         const headers = element.insertRow();
         const musicHeader = document.createElement("th");
         musicHeader.innerText = "Music";
@@ -239,6 +236,8 @@ export default class MusicPlaylist {
             element.rows[old + 1].classList.remove("active");
             element.rows[current + 1].classList.add("active");
         });
+
+        element.classList.add("music-playlist");
         return element;
     }
 

src/styles/music-playlist.css

@@ -0,0 +1,23 @@
+table.music-playlist {
+    border-collapse: collapse;
+    background-color: white;
+    border-width: 2px;
+    border-style: solid;
+}
+
+table.music-playlist tr th {
+    border-left-style: none;
+    border-right-style: none;
+    background-color: lightgray;
+}
+
+
+table.music-playlist tr td {
+    border-left-style: none;
+    border-right-style: none;
+}
+
+table.music-playlist .active {
+    background-color: gray;
+    color: white;
+}