From 5f4df1ac0fe5f6f903ce6734b6c6784de26b0dfc Mon Sep 17 00:00:00 2001
From: Rami Maalouf <rami.maalouf@ibm.com>
Date: Sun, 6 Aug 2023 00:52:16 -0400
Subject: [PATCH] Feat: You now have the option to use light mode for the popup
 page

---
 src/popup/Tabs.tsx   | 4 ++--
 src/popup/Topbar.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/popup/Tabs.tsx b/src/popup/Tabs.tsx
index b3a769f..2ae50cc 100644
--- a/src/popup/Tabs.tsx
+++ b/src/popup/Tabs.tsx
@@ -18,7 +18,7 @@ const Tabs: FC<Props> = (props) => {
       <nav className="grid grid-cols-2 text-center text-lg sticky top-0 z-10">
         <button
           className={`self-center justify-center py-4 border-b border-r ${
-            0 === activeTab ? "border-gray-950 bg-gray-950" : "border-gray-600 bg-gray-800"
+            0 === activeTab ? "dark:border-gray-950 dark:bg-gray-950" : "dark:border-gray-600 dark:bg-gray-800"
           }`}
           aria-label="tab"
           onClick={() => setActiveTab(0)}
@@ -30,7 +30,7 @@ const Tabs: FC<Props> = (props) => {
 
         <button
           className={`self-center justify-center py-4 border-b border-l ${
-            1 === activeTab ? "border-gray-950 bg-gray-950" : "border-gray-600 bg-gray-800"
+            1 === activeTab ? "dark:border-gray-950 dark:bg-gray-950" : "dark:border-gray-600 dark:bg-gray-800"
           }`}
           aria-label="tab"
           onClick={() => setActiveTab(1)}
diff --git a/src/popup/Topbar.tsx b/src/popup/Topbar.tsx
index 6404aab..0973a74 100644
--- a/src/popup/Topbar.tsx
+++ b/src/popup/Topbar.tsx
@@ -20,15 +20,15 @@ const Header: FC<Props> = (props) => {
   const hasMoreThanFour = allSnips?.length > 4 || snips?.length > 4;
 
   return (
-    <header className={"flex sticky bg-gray-950 py-3 -mx-4 z-10" + (inYoutube ? "  top-[3.8rem]" : " top-0")}>
+    <header className={"flex sticky dark:bg-gray-950 py-3 -mx-4 z-10" + (inYoutube ? "  top-[3.8rem]" : " top-0")}>
       <div className="flex mr-2 overflow-x-auto rounded-full scrollbar-hidden">
         <div className="flex pl-4"></div>
         {tags.map((tag: Tag, i: number) => (
           <button
             key={i}
-            className={`rounded-3xl px-2 py-1 text-xs mr-2 self-center whitespace-nowrap bg-${
-              tag.color ? tag.color : "gray"
-            }-700`}
+            className={`rounded-3xl px-2 py-1 text-xs mr-2 self-center whitespace-nowrap dark:bg-gray-700`}
+            //   tag.color ? tag.color : "gray"
+            // }-700`}
           >
             {tag.name}
           </button>