diff --git a/js/components/MediaLibraryWindow/LibraryTable.tsx b/js/components/MediaLibraryWindow/LibraryTable.tsx index d54090ad..3c81cd7b 100644 --- a/js/components/MediaLibraryWindow/LibraryTable.tsx +++ b/js/components/MediaLibraryWindow/LibraryTable.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import classnames from "classnames"; interface Props { headings: Array; @@ -27,7 +28,9 @@ export default function LibraryTable(props: Props) { >
{props.headings.map((heading, i) => ( -
{heading}
+
+ {heading} +
))}
{props.rows.map((row, i) => ( @@ -35,13 +38,18 @@ export default function LibraryTable(props: Props) { style={{ ...rowStyle, boxSizing: "border-box", - border: i === selectedRow ? "1px solid red" : "none", }} + className={classnames("library-table-row", { + selected: i === selectedRow, + })} onClick={() => setSelectedRow(i)} key={`row-${i}`} > {row.map((text, j) => ( -
+
{text}
))} diff --git a/js/components/Skin.js b/js/components/Skin.js index e6ea14c6..eeb340a7 100644 --- a/js/components/Skin.js +++ b/js/components/Skin.js @@ -210,6 +210,11 @@ function cssRulesFromProps(props) { }; }` ); + cssRules.push( + `#webamp-media-library .webamp-media-library-table .library-table-row.selected { + background-color: ${props.skinGenExColors.playlistSelection}; + }` + ); return cssRules; }