Use winamp colors for upload grid

src/components/Metadata.js

@@ -14,7 +14,6 @@ import { useActionCreator } from "../hooks";
 function Metadata() {
   const hash = useSelector(Selectors.getSelectedSkinHash);
   const skinData = useSelector((state) => state.skins[hash] || null);
-  console.log(skinData);
   const fileName = skinData && skinData.fileName;
 
   const permalink = useSelector(

src/theme.js

@@ -0,0 +1,11 @@
+/**
+ * [Text]
+Normal=#00FF00
+Current=#FFFFFF
+NormalBG=#000000
+SelectedBG=#0000C6
+Font=Arial
+
+ */
+export const WINAMP_NORMAL = "#00FF00";
+export const WINAMP_SELECTED_BG = "#0000C6";

src/upload/UploadGrid.js

@@ -5,6 +5,7 @@ import { useActionCreator } from "../hooks";
 import * as Actions from "../redux/actionCreators";
 import DropTarget from "../DropTarget";
 import UploadSection from "./UploadSection";
+import { WINAMP_NORMAL } from "../theme";
 
 function useBucketed(filesArr) {
   return useMemo(() => {
@@ -113,6 +114,7 @@ function UploadGrid({ getInputProps, isDragActive, ...props }) {
         display: "flex",
         flexDirection: "column",
         color: "lightgrey",
+        fontFamily: "Arial, Helvetica, sans-serif",
       }}
     >
       {isDragActive || Object.keys(files).length === 0 ? (

src/upload/UploadRow.js

@@ -1,20 +1,21 @@
 import React from "react";
 import * as Utils from "../utils";
+import { WINAMP_NORMAL, WINAMP_SELECTED_BG } from "../theme";
 
 function Row({ name, loading, right, complete }) {
   return (
     <div
       style={{
-        borderBottom: "1px solid rgba(32, 31, 51, 1)",
         position: "relative",
-        paddingTop: 4,
+        paddingTop: 2,
         paddingBottom: 2,
+        fontSize: 14,
       }}
     >
       {(loading != null || complete) && (
         <div
           style={{
-            backgroundColor: "rgba(51, 71, 88, 1)",
+            backgroundColor: WINAMP_SELECTED_BG,
             position: "absolute",
             left: 0,
             top: 0,
@@ -33,13 +34,13 @@ function Row({ name, loading, right, complete }) {
           position: "relative",
           display: "flex",
           justifyContent: "space-between",
+          color: WINAMP_NORMAL,
         }}
       >
-        <code>{name}</code>
+        <span>{name}</span>
         {right && (
-          <code
+          <span
             style={{
-              color: "darkgray",
               paddingLeft: 10,
               // Ensure we are wide enough that text changes won't affect the layout
               minWidth: 100,
@@ -47,7 +48,7 @@ function Row({ name, loading, right, complete }) {
             }}
           >
             {right}
-          </code>
+          </span>
         )}
       </div>
     </div>
@@ -60,7 +61,7 @@ function SkinLink({ md5, children }) {
       href={Utils.museumUrlFromHash(md5)}
       target="_blank"
       rel="noopener noreferrer"
-      style={{ color: "darkgray" }}
+      style={{ color: WINAMP_NORMAL }}
     >
       {children}
     </a>