From a0eaff49ca482972618dc699bd4d48fe49b58ae8 Mon Sep 17 00:00:00 2001
From: Peter Klingelhofer <peterklingelhofer@gmail.com>
Date: Thu, 23 Jun 2022 23:02:18 -0500
Subject: [PATCH 1/4] fix: player and header icon dark mode coloration

---
 src/components/AudioWrapper.tsx | 6 ++++++
 src/components/Header.tsx       | 3 +++
 src/components/Player.tsx       | 9 ++++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/AudioWrapper.tsx b/src/components/AudioWrapper.tsx
index 174b78b..48e30fc 100644
--- a/src/components/AudioWrapper.tsx
+++ b/src/components/AudioWrapper.tsx
@@ -167,6 +167,12 @@ export const AudioWrapper: React.FC<{
             box-shadow: none;
             padding: 0;
             margin-right: 1rem;
+            @media (prefers-color-scheme: dark) {
+              filter: invert(80%);
+            }
+            @media (prefers-color-scheme: light) {
+              background: #fff;;
+            }
           }
         `}
       />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2bc2d7a..070991d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -46,6 +46,9 @@ const Content = styled.div`
       scale: 0.7;
       margin-left: -0.5rem;
       height: 46px;
+      @media (prefers-color-scheme: dark) {
+        filter: invert(1);
+      }
     }
 
     @media (prefers-color-scheme: dark) {
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index c2de8c5..1a45935 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -29,7 +29,14 @@ const playerClass = css`
   width: 100%;
   z-index: 10;
   bottom: 0;
-  background-color: #fff;
+
+  @media (prefers-color-scheme: dark) {
+    background: #333;
+  }
+
+  @media (prefers-color-scheme: light) {
+    background: #fff;;
+  }
 
   @media (max-width: ${bp.small}px) {
     height: 150px;

From 2ac1a640f9995097e2b73eca700a4a879d7bffdd Mon Sep 17 00:00:00 2001
From: Peter Klingelhofer <peterklingelhofer@gmail.com>
Date: Thu, 23 Jun 2022 23:24:55 -0500
Subject: [PATCH 2/4] feat: subtle drop-shadow for header & player for
 elevation/separation

---
 src/components/Header.tsx | 1 +
 src/components/Player.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 070991d..ba754e9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -17,6 +17,7 @@ const Wrapper = styled.header`
   min-height: 48px;
   border-bottom: 1px solid ${(props) => colorShade(props.theme.colors.text, 20)};
   display: flex;
+  filter: drop-shadow(0 0 0.15rem #000);
   flex-direction: column;
   position: sticky;
   width: 100%;
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 1a45935..5e78859 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -29,6 +29,7 @@ const playerClass = css`
   width: 100%;
   z-index: 10;
   bottom: 0;
+  filter: drop-shadow(0 0 0.075rem #000);
 
   @media (prefers-color-scheme: dark) {
     background: #333;

From 55bd622d5dc958caa161db96dc7f6ff86c7a5fbc Mon Sep 17 00:00:00 2001
From: Peter Klingelhofer <peterklingelhofer@gmail.com>
Date: Fri, 24 Jun 2022 07:10:34 -0500
Subject: [PATCH 3/4] fix: remove extra semicolon in css

Co-authored-by: Psi <simonv3@users.noreply.github.com>
---
 src/components/AudioWrapper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AudioWrapper.tsx b/src/components/AudioWrapper.tsx
index 48e30fc..c272cb3 100644
--- a/src/components/AudioWrapper.tsx
+++ b/src/components/AudioWrapper.tsx
@@ -171,7 +171,7 @@ export const AudioWrapper: React.FC<{
               filter: invert(80%);
             }
             @media (prefers-color-scheme: light) {
-              background: #fff;;
+              background: #fff;
             }
           }
         `}

From 84c8202496c80b9c19c8ca5c4a09ebc0402423e9 Mon Sep 17 00:00:00 2001
From: Peter Klingelhofer <peterklingelhofer@gmail.com>
Date: Fri, 24 Jun 2022 07:12:16 -0500
Subject: [PATCH 4/4] fix: remove extra semicolon in css

Co-authored-by: Psi <simonv3@users.noreply.github.com>
---
 src/components/Player.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
index 5e78859..7120719 100644
--- a/src/components/Player.tsx
+++ b/src/components/Player.tsx
@@ -36,7 +36,7 @@ const playerClass = css`
   }
 
   @media (prefers-color-scheme: light) {
-    background: #fff;;
+    background: #fff;
   }
 
   @media (max-width: ${bp.small}px) {