Adds foundation for dark mode from user (#4623)

* fix: adds foundation for dark mode from user

* start theme sync with hub

* send chart_tables to backend

* last fix

* fix: pushed table html

* fix: footer size wasnt correct

---------

Co-authored-by: Diogo Sousa <montezdesousa@gmail.com>
Co-authored-by: montezdesousa <79287829+montezdesousa@users.noreply.github.com>
Co-authored-by: andrewkenreich <andrew.kenreich@gmail.com>

frontend-components/tables/src/App.tsx

@@ -80,6 +80,13 @@ function App() {
             title={title}
             data={transformedData.data}
             columns={transformedData.columns}
+            initialTheme={
+              data.theme &&
+              typeof data.theme === "string" &&
+              data.theme === "dark"
+                ? "dark"
+                : "light"
+            }
           />
         )}
       </DndProvider>

frontend-components/tables/src/components/Table/index.tsx

@@ -94,12 +94,22 @@ function getCellWidth(row, column) {
   }
 }
 
-export default function Table({ data, columns, title }: any) {  // source = ""
-  const [colorTheme, setTheme] = useDarkMode();
+export default function Table({
+  data,
+  columns,
+  title,
+  initialTheme,
+}: {
+  data: any[];
+  columns: any[];
+  title: string;
+  initialTheme: "light" | "dark";
+}) {
+  const [colorTheme, setTheme] = useDarkMode(initialTheme);
   const [darkMode, setDarkMode] = useState(
-    colorTheme === "light" ? true : false
+    colorTheme === "dark" ? true : false
   );
-  const toggleDarkMode = (checked) => {
+  const toggleDarkMode = (checked: boolean) => {
     setTheme(colorTheme);
     setDarkMode(checked);
   };
@@ -553,7 +563,10 @@ export default function Table({ data, columns, title }: any) {  // source = ""
                           <th
                             key={header.id}
                             colSpan={header.colSpan}
-                            className="text-grey-500 bg-grey-100 dark:bg-grey-850 font-normal text-left text-sm h-10"
+                            className="text-grey-500 bg-grey-100 dark:bg-grey-850 font-normal text-left text-sm h-10 p-4"
+                            style={{
+                              width: header.getSize(),
+                            }}
                           >
                             {header.isPlaceholder
                               ? null

frontend-components/tables/src/utils/useDarkMode.tsx

@@ -1,14 +1,13 @@
 import { useState, useEffect } from "react";
 
-export default function useDarkMode() {
-  const [theme, setTheme] = useState(localStorage.theme);
+export default function useDarkMode(initialTheme: "dark" | "light") {
+  const [theme, setTheme] = useState(initialTheme);
   const colorTheme = theme === "dark" ? "light" : "dark";
 
   useEffect(() => {
     const root = window.document.documentElement;
     root.classList.remove(colorTheme);
     root.classList.add(theme);
-    localStorage.setItem("theme", theme);
   }, [theme, colorTheme]);
 
   return [colorTheme, setTheme];