chore: tailwind and ui-component-library migration

web/global.d.ts

@@ -1,6 +1,3 @@
-import {} from "styled-components";
-import { lightTheme } from "./src/styles/themes";
-
 declare global {
   module "*.svg" {
     const content: React.FC<React.SVGAttributes<SVGElement>>;
@@ -12,8 +9,4 @@ declare global {
   }
 }
 
-declare module "styled-components" {
-  type Theme = typeof lightTheme;
-  //eslint-disable-next-line @typescript-eslint/no-empty-interface
-  export interface DefaultTheme extends Theme {}
-}
+export {};

web/package.json

@@ -51,7 +51,6 @@
     "@types/react": "^18.2.59",
     "@types/react-dom": "^18.2.18",
     "@types/react-modal": "^3.16.3",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@typescript-eslint/utils": "^5.62.0",
@@ -70,12 +69,13 @@
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.16.3",
     "@kleros/kleros-app": "^2.1.0",
-    "@kleros/ui-components-library": "^2.19.0",
+    "@kleros/ui-components-library": "^3.6.0",
     "@mdxeditor/editor": "^3.45.0",
     "@reown/appkit": "^1.6.6",
     "@reown/appkit-adapter-wagmi": "^1.6.6",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
+    "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.66.0",
     "@yornaath/batshit": "^0.9.0",
     "alchemy-sdk": "^3.3.1",
@@ -103,8 +103,8 @@
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "remark-gfm": "^3.0.1",
-    "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.4",
+    "tailwindcss": "^4.1.17",
     "viem": "^2.27.2",
     "wagmi": "^2.14.16"
   }

web/src/app.tsx

@@ -3,10 +3,12 @@ import { Navigate, Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
+import "overlayscrollbars/styles/overlayscrollbars.css";
+import "global.css";
 import Web3Provider from "context/Web3Provider";
 import IsListProvider from "context/IsListProvider";
 import QueryClientProvider from "context/QueryClientProvider";
-import StyledComponentsProvider from "context/StyledComponentsProvider";
+import ThemeProvider from "context/ThemeProvider";
 import GraphqlBatcherProvider from "context/GraphqlBatcher";
 import Layout from "layout/index";
 import NewTransaction from "./pages/NewTransaction";
@@ -18,7 +20,7 @@ import Settings from "./pages/Settings";
 
 const App: React.FC = () => {
   return (
-    <StyledComponentsProvider>
+    <ThemeProvider>
       <Web3Provider>
         <QueryClientProvider>
           <AtlasProvider>
@@ -41,7 +43,7 @@ const App: React.FC = () => {
           </AtlasProvider>
         </QueryClientProvider>
       </Web3Provider>
-    </StyledComponentsProvider>
+    </ThemeProvider>
   );
 };
 

web/src/context/ThemeProvider.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
+
+type Theme = "light" | "dark";
+
+const ThemeProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage<Theme>("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/Web3Provider.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 
 import { fallback, http, WagmiProvider, webSocket } from "wagmi";
-import { mainnet, arbitrumSepolia, gnosisChiado, type AppKitNetwork, arbitrum, sepolia, gnosis } from "@reown/appkit/networks";
+import {
+  mainnet,
+  arbitrumSepolia,
+  gnosisChiado,
+  type AppKitNetwork,
+  arbitrum,
+  sepolia,
+  gnosis,
+} from "@reown/appkit/networks";
 import { createAppKit } from "@reown/appkit/react";
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
-import { lightTheme } from "styles/themes";
 import { isProductionDeployment } from "consts/index";
 import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
 
@@ -82,7 +89,7 @@ createAppKit({
   projectId,
   allowUnsupportedChain: true,
   themeVariables: {
-    "--w3m-color-mix": lightTheme.primaryPurple,
+    "--w3m-color-mix": "#4D00B4",
     "--w3m-color-mix-strength": 20,
     // overlay portal is at 9999
     "--w3m-z-index": 10000,

web/src/global.css

@@ -0,0 +1,132 @@
+@import "../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
+@tailwind utilities;
+@source "../../node_modules/@kleros/ui-components-library";
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-white: #ffffff;
+  --color-white-73: #ffffffba;
+  --color-black: #000000;
+  --color-light-blue-65: #2a1260a6;
+  --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-primary-text-73: color-mix(in srgb, var(--klerosUIComponentsPrimaryText) 73%, transparent);
+  --color-skeleton-bg: #ebebeb;
+  --color-skeleton-highlight: #f5f5f5;
+  --max-width-landscape: 87.5rem;
+  --shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
+  --leading-18px: 18px;
+}
+
+.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;
+}
+
+h1 {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  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);
+}
+
+.os-theme-dark {
+  --os-handle-bg: var(--color-violet-purple);
+  --os-handle-bg-hover: var(--klerosUIComponentsSecondaryPurple);
+  --os-handle-bg-active: var(--color-lavender-purple);
+}
+
+.Toastify__toast-container.Toastify__toast-container {
+  top: unset;
+  padding-top: 20px;
+}
+
+/* @cyntler/react-doc-viewer injects a canvas to load pdf, this is alters the height of body tag, so set to hidden */
+.hiddenCanvasElement {
+  display: none;
+}
+
+/* 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;
+}

web/src/hooks/useToggleThemeContext.tsx

@@ -12,11 +12,9 @@ export const ToggleThemeProvider: React.FC<{
   theme: string;
   toggleTheme: () => void;
 }> = ({ theme, toggleTheme, children }) => {
-  return (
-    <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>
-  );
+  return <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>;
 };
 
-export const useToggleTheme: () => [string, () => void] = () => {
+export const useTheme: () => [string, () => void] = () => {
   return useContext(Context);
 };

web/src/layout/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import styled from "styled-components";
-import "overlayscrollbars/styles/overlayscrollbars.css";
 import { Outlet } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";