From 08a9ff7a0ac4955492c10bd9703629fc4467ff1d Mon Sep 17 00:00:00 2001
From: G2-Games <ke0bhogsg@gmail.com>
Date: Sat, 28 Dec 2024 11:02:29 -0600
Subject: [PATCH] Improved CSS

---
 src/App.css | 70 ++++++++++++++++++++++++++++++++++++++++-------------
 src/App.tsx |  2 ++
 2 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/src/App.css b/src/App.css
index a073edd..f831b1b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,23 @@
   margin: 0;
 }
 
+/* Customize these for themes? */
+:root {
+  --baseColor: #101010;
+  --overlayColor: #1e1e1e;
+  --highlightColor: #1f1f1f;
+  --playBarColor: #5c4bb9;
+  --lightTextColor: #7a7a6f;
+  --mediumTextColor: #cacab8;
+  --highlightTextColor: #FFF;
+}
+
+.elidedText {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .container {
   position: absolute;
   top: 0px;
@@ -31,7 +48,8 @@
 
   align-self: flex-end;
   height: 100%;
-  background-color: #c1bcd1;
+  background-color: var(--baseColor);
+  color: var(--highlightTextColor);
 
   /* Change to resize width */
   min-width: 380px;
@@ -42,11 +60,12 @@
   position: relative;
   height: 40px;
   width: 100%;
-  background-color: #876765;
+  background-color: var(--overlayColor);
 }
 
 .mainView {
-  background-color: #f5eab2;
+  background-color: var(--baseColor);
+  color: var(--lightTextColor);
   height: 100%;
   overflow-y: scroll;
 }
@@ -73,17 +92,16 @@
 }
 
 .song:hover {
-  background-color: grey;
+  background-color: var(--highlightColor);
 }
 
 #playBar {
   position:relative;
   bottom: 0;
   left: 0;
-  background-color: #4c4373;
+  background-color: var(--playBarColor);
   width: 100%;
-  height: 5%;
-  padding: 1.5%;
+  height: 58px;
 }
 
 .topHalf {
@@ -108,19 +126,28 @@
     white-space: nowrap;
   }
 
+  p {
+    color: var(--mediumTextColor);
+  }
+
   img {
     aspect-ratio: 1;
     object-fit: contain;
     width: 100%;
-    padding: 5%;
     display: block;
-    box-sizing: border-box;
   }
 }
 
+.artworkWrapper {
+  box-sizing: border-box;
+  aspect-ratio: 1;
+  border: 1px solid #333;
+  margin: 1%;
+}
+
 .Queue {
   position: relative;
-  background-color: burlywood;
+  background-color: var(--overlayColor);
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
@@ -154,11 +181,20 @@
   font-size: 14pt;
   padding: 5px 0;
 
-  p:first-child {
-    font-weight: bold;
-  }
-
-  p {
-    margin: 0;
-  }
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.queueSongTags p:first-child {
+  font-weight: bold;
+  color: var(--highlightTextColor);
+}
+
+.queueSongTags p {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin: 0;
+  color: var(--mediumTextColor);
 }
diff --git a/src/App.tsx b/src/App.tsx
index 4437ccd..0af6157 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -319,7 +319,9 @@ interface NowPlayingProps {
 function NowPlaying({ title, artist, album, artwork }: NowPlayingProps) {
   return (
     <section className="nowPlaying">
+      <div className="artworkWrapper">
         { artwork }
+      </div>
       <h3>{ title }</h3>
       <p>{ artist }</p>
       <p>{ album }</p>