Merge branch 'dark-mode' into 'main'

[Dark mode] Fix transparent buttons & dissapearing borders on palette

See merge request sc07/canvas!18

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>

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>

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>

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>

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}

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;