From c60dca996af40193ff333fa0fb537327abee37cb Mon Sep 17 00:00:00 2001
From: Nate Sesti <sestinj@gmail.com>
Date: Tue, 4 Jul 2023 12:47:28 -0700
Subject: better control over context

---
 extension/react-app/src/components/index.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'extension/react-app/src/components/index.ts')

diff --git a/extension/react-app/src/components/index.ts b/extension/react-app/src/components/index.ts
index 429a7df5..db1925ed 100644
--- a/extension/react-app/src/components/index.ts
+++ b/extension/react-app/src/components/index.ts
@@ -124,16 +124,19 @@ export const appear = keyframes`
     }
 `;
 
-export const HeaderButton = styled.button`
-  background-color: transparent;
+export const HeaderButton = styled.button<{ inverted: boolean | undefined }>`
+  background-color: ${({ inverted }) => (inverted ? "white" : "transparent")};
+  color: ${({ inverted }) => (inverted ? "black" : "white")};
+
   border: 1px solid white;
   border-radius: ${defaultBorderRadius};
   cursor: pointer;
-  color: white;
 
   &:hover {
-    background-color: white;
-    color: black;
+    background-color: ${({ inverted }) =>
+      typeof inverted === "undefined" || inverted ? "white" : "transparent"};
+    color: ${({ inverted }) =>
+      typeof inverted === "undefined" || inverted ? "black" : "white"};
   }
   display: flex;
   align-items: center;
-- 
cgit v1.2.3-70-g09d2