From a847b51f26e1fb830a5cb20e13d68c4b659f2aec Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 2 Dec 2018 21:06:59 -0800
Subject: [PATCH] Improve style of metadata

---
 src/App.css        | 17 +++++++++++------
 src/FocusedSkin.js | 12 ++++++------
 2 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/App.css b/src/App.css
index f2f9ba7b..7e35b692 100644
--- a/src/App.css
+++ b/src/App.css
@@ -139,7 +139,7 @@ body.overlay-open .overlay {
 }
 
 #close-modal {
-  color: white;
+  color: #a7a394;
   position: fixed;
   top: 10px;
   right: 10px;
@@ -149,14 +149,19 @@ body.overlay-open .overlay {
   text-decoration: none;
 }
 
-#focused-skin .metadata {
-  text-align: center;
+.metadata {
+  position: absolute;
   margin: 10px;
-  color: white;
+  color: #a7a394;
+  line-height: 25px;
+  font-family: "Courier New", Courier, monospace;
+  bottom: 0;
+  text-align: center;
+  width: 100%;
 }
 
-#focused-skin .metadata a {
-  color: white;
+.metadata a {
+  color: #a7a394;
 }
 
 #focused-skin {
diff --git a/src/FocusedSkin.js b/src/FocusedSkin.js
index deafaed5..b9c3685c 100644
--- a/src/FocusedSkin.js
+++ b/src/FocusedSkin.js
@@ -140,12 +140,12 @@ class FocusedSkin extends React.Component {
               />
             )}
           </div>
-          <div className="metadata">
-            <div className="file-name">
-              {Utils.filenameFromHash(this.props.hash)}
-            </div>
-            <a href={Utils.skinUrlFromHash(this.props.hash)}>Download</a>
-          </div>
+        </div>
+        <div className="metadata">
+          {Utils.filenameFromHash(this.props.hash)}
+          {" ["}
+          <a href={Utils.skinUrlFromHash(this.props.hash)}>Download</a>
+          {"]"}
         </div>
       </React.Fragment>
     );