From e4c7327b5eaf7d9147f930f78323f37b33cc0b2c Mon Sep 17 00:00:00 2001
From: Ategon Dev <blue40465@gmail.com>
Date: Mon, 15 Jul 2024 16:29:28 +0000
Subject: [PATCH] [Dark mode] Fix transparent buttons & dissapearing borders on
 palette

---
 packages/client/src/components/Chat/OpenChatButton.tsx  | 2 +-
 packages/client/src/components/Header/HeaderLeft.tsx    | 4 ++--
 packages/client/src/components/Header/HeaderRight.tsx   | 4 ++--
 packages/client/src/components/Header/ThemeSwitcher.tsx | 2 +-
 packages/client/src/components/PixelWhoisSidebar.tsx    | 4 ++--
 packages/client/src/components/Toolbar/Palette.scss     | 3 +--
 6 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/components/Chat/OpenChatButton.tsx b/packages/client/src/components/Chat/OpenChatButton.tsx
index 0d06933..1f16221 100644
--- a/packages/client/src/components/Chat/OpenChatButton.tsx
+++ b/packages/client/src/components/Chat/OpenChatButton.tsx
@@ -19,7 +19,7 @@ const OpenChatButton = () => {
         config?.chat?.element_host && 
         <Button 
           onPress={doLogin}
-          variant="ghost"
+          variant="faded"
         >
           <FontAwesomeIcon icon={faComments} />
           <p>Chat</p>
diff --git a/packages/client/src/components/Header/HeaderLeft.tsx b/packages/client/src/components/Header/HeaderLeft.tsx
index 3b3959c..231e3f5 100644
--- a/packages/client/src/components/Header/HeaderLeft.tsx
+++ b/packages/client/src/components/Header/HeaderLeft.tsx
@@ -13,7 +13,7 @@ export const HeaderLeft = () => {
       <AccountStanding />
       <Button 
         onPress={() => setInfoSidebar(true)}
-        variant="ghost"
+        variant="faded"
       >
         <FontAwesomeIcon icon={faInfoCircle} />
         <p>Info</p>
@@ -21,7 +21,7 @@ export const HeaderLeft = () => {
       {import.meta.env.DEV && (
         <Button 
           onPress={() => Debug.openDebugTools()}
-          variant="ghost"
+          variant="faded"
         >
           <FontAwesomeIcon icon={faTools} />
           <p>Debug Tools</p>
diff --git a/packages/client/src/components/Header/HeaderRight.tsx b/packages/client/src/components/Header/HeaderRight.tsx
index 3b144ce..020d676 100644
--- a/packages/client/src/components/Header/HeaderRight.tsx
+++ b/packages/client/src/components/Header/HeaderRight.tsx
@@ -23,14 +23,14 @@ export const HeaderRight = () => {
       <div className="flex gap-2">
         <Button 
           onClick={() => setSettingsSidebar(true)}
-          variant="ghost"
+          variant="faded"
         >
           <FontAwesomeIcon icon={faGear} />
           <p>Settings</p>
         </Button>
         <ThemeSwitcher />
         {hasAdmin && (
-          <Button href="/admin" target="_blank" as={Link}  variant="ghost" >
+          <Button href="/admin" target="_blank" as={Link}  variant="faded" >
             <FontAwesomeIcon icon={faHammer} />
             <p>Admin</p>
           </Button>
diff --git a/packages/client/src/components/Header/ThemeSwitcher.tsx b/packages/client/src/components/Header/ThemeSwitcher.tsx
index 5bf98cd..eb3dc2b 100644
--- a/packages/client/src/components/Header/ThemeSwitcher.tsx
+++ b/packages/client/src/components/Header/ThemeSwitcher.tsx
@@ -26,7 +26,7 @@ export function ThemeSwitcher() {
   if(!mounted) return null
 
   return (
-    <Button onClick={() => { setToggle(!isToggled) }} variant="ghost">
+    <Button onClick={() => { setToggle(!isToggled) }} variant="faded">
       <Classic toggled={isToggled} placeholder={undefined} />
       <p>{theme === 'dark' ? "Dark" : "Light"}</p>
     </Button>
diff --git a/packages/client/src/components/PixelWhoisSidebar.tsx b/packages/client/src/components/PixelWhoisSidebar.tsx
index 4db4814..6f2189f 100644
--- a/packages/client/src/components/PixelWhoisSidebar.tsx
+++ b/packages/client/src/components/PixelWhoisSidebar.tsx
@@ -77,7 +77,7 @@ export const PixelWhoisSidebar = () => {
 
   return (
     <div
-      className="sidebar sidebar-right"
+      className="sidebar sidebar-right bg-white dark:bg-black text-black dark:text-white"
       style={{ ...(pixelWhois ? {} : { display: "none" }) }}
     >
       {loading && (
@@ -95,7 +95,7 @@ export const PixelWhoisSidebar = () => {
           <FontAwesomeIcon icon={faXmark} />
         </Button>
       </header>
-      <div className="w-full h-52 bg-gray-200 flex justify-center items-center">
+      <div className="w-full h-52 bg-gray-200 dark:bg-gray-800 flex justify-center items-center">
         <div className="w-[128px] h-[128px] bg-white">
           <SmallCanvas
             surrounding={pixelWhois?.surrounding}
diff --git a/packages/client/src/components/Toolbar/Palette.scss b/packages/client/src/components/Toolbar/Palette.scss
index 57d1335..95c463d 100644
--- a/packages/client/src/components/Toolbar/Palette.scss
+++ b/packages/client/src/components/Toolbar/Palette.scss
@@ -40,7 +40,6 @@
     vertical-align: top;
     font-size: 2rem;
     line-height: 1;
-    color: #000;
 
     border: 0;
     background: transparent;
@@ -49,7 +48,7 @@
   .pallete-color {
     width: 36px;
     height: 36px;
-    border: 2px solid #000;
+    border: 2px solid;
     border-radius: 3px;
     transition: transform 0.25s;
     cursor: pointer;