refactor: migrate global styling and theme management to tailwind

Author: kyrers

web/src/app.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
+import "./global.css";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
+import ThemeProvider from "context/ThemeProvider";
 import Web3Provider from "context/Web3Provider";
 import IsListViewProvider from "context/IsListViewProvider";
 import QueryClientProvider from "context/QueryClientProvider";
-import StyledComponentsProvider from "context/StyledComponentsProvider";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import AllLists from "./pages/AllLists";
@@ -22,7 +23,7 @@ import Settings from "./pages/Settings";
 
 const App: React.FC = () => {
   return (
-    <StyledComponentsProvider>
+    <ThemeProvider>
       <Web3Provider>
         <GraphqlBatcherProvider>
           <QueryClientProvider>
@@ -55,7 +56,7 @@ const App: React.FC = () => {
           </QueryClientProvider>
         </GraphqlBatcherProvider>
       </Web3Provider>
-    </StyledComponentsProvider>
+    </ThemeProvider>
   );
 };
 

web/src/context/StyledComponentsProvider.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
+
+const ThemeProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage<string>("theme", "dark");
+
+  const toggleTheme = () => {
+    if (theme === "light") setTheme("dark");
+    else setTheme("light");
+  };
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+  }, [theme]);
+
+  return <ToggleThemeProvider {...{ theme, toggleTheme }}>{children}</ToggleThemeProvider>;
+};
+
+export default ThemeProvider;

web/src/context/ThemeProvider.tsx

@@ -0,0 +1,181 @@
+@import "@kleros/ui-components-library/theme.css";
+@import "tailwindcss";
+
+@theme {
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-light-grey: #f0f0f0;
+  --color-dark-purple: #220050;
+  --color-violet-purple: #6a1dcd;
+  --color-lavender-purple: #bb72ff;
+  --color-pale-cyan: #acffff;
+  --color-lime-green: #f3ffd9;
+  --color-white-low-opacity-subtle: #ffffff0d;
+  --color-white-low-opacity-strong: #ffffff26;
+  --color-black-low-opacity: #00000080;
+  --color-skeleton-bg: #ebebeb;
+  --color-skeleton-highlight: #f5f5f5;
+  --breakpoint-landscape: 900px;
+  --max-width-landscape: 1400px;
+}
+
+.dark {
+  --color-skeleton-bg: #3a2270;
+  --color-skeleton-highlight: #3e307c;
+}
+
+:root {
+  --toastify-color-info: var(--klerosUIComponentsPrimaryBlue);
+  --toastify-color-success: var(--klerosUIComponentsSuccess);
+  --toastify-color-warning: var(--klerosUIComponentsWarning);
+  --toastify-color-error: var(--klerosUIComponentsError);
+}
+
+.react-loading-skeleton {
+  z-index: 0;
+  --base-color: var(--color-skeleton-bg);
+  --highlight-color: var(--color-skeleton-highlight);
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  margin: 0;
+  background-color: var(--klerosUIComponentsLightBlue);
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+*:focus {
+  outline: none;
+}
+
+.ReactModal__Overlay {
+  background-color: #1b003fcc !important;
+}
+
+h1 {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+h2 {
+  margin: 0 0 16px 0;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+h3 {
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+p {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+textarea {
+  font-family: "Open Sans";
+  font-size: 14px;
+}
+
+small {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--klerosUIComponentsPrimaryText);
+}
+
+label {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: var(--klerosUIComponentsSecondaryText);
+}
+
+a {
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  color: var(--klerosUIComponentsPrimaryBlue);
+}
+
+hr {
+  opacity: 1;
+  border: 1px solid var(--klerosUIComponentsStroke);
+}
+
+svg,
+img {
+  display: inline-block;
+  vertical-align: middle;
+  visibility: visible;
+}
+
+ul {
+  li {
+    color: var(--klerosUIComponentsPrimaryText);
+  }
+}
+
+.os-theme-dark {
+  --os-handle-bg: var(--color-violet-purple);
+  --os-handle-bg-hover: var(--klerosUIComponentsSecondaryPurple);
+  --os-handle-bg-active: var(--color-lavender-purple);
+}
+
+[class*="Toastify__toast-container"] {
+  top: unset;
+  padding-top: 20px !important;
+}
+
+/* Custom Scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-violet-purple);
+  border-radius: 10px;
+  transition:
+    opacity 0.15s,
+    background-color 0.15s,
+    border-color 0.15s,
+    width 0.15s;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--klerosUIComponentsSecondaryPurple);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: var(--color-lavender-purple);
+}
+
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-violet-purple) transparent;
+}