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,17 +69,19 @@
   "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",
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
+    "clsx": "^2.1.1",
     "core-js": "^3.35.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
@@ -103,8 +104,9 @@
     "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",
+    "tailwind-merge": "^3.4.0",
+    "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/components/ConnectWallet/AccountDisplay.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import styled, { css } from "styled-components";
 
 import Identicon from "react-identicons";
 import { isAddress } from "viem";
@@ -9,111 +8,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
 import { getChain } from "consts/chains";
 import { shortenAddress } from "utils/shortenAddress";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: auto;
-  align-items: flex-start;
-  gap: 8px;
-  align-items: center;
-  background-color: ${({ theme }) => theme.whiteBackground};
-  padding: 0px;
-  cursor: pointer;
-
-  &:hover {
-    label {
-      color: ${({ theme }) => theme.white} !important;
-      transition: color 0.2s;
-    }
-  }
-
-  ${landscapeStyle(
-    () => css`
-      background-color: ${({ theme }) => theme.whiteLowOpacitySubtle};
-      &:hover {
-        transition: background-color 0.1s;
-        background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
-      }
-      flex-direction: row;
-      align-content: center;
-      border-radius: 300px;
-      gap: 0px;
-      padding: 0 12px;
-    `
-  )}
-`;
-
-const AccountContainer = styled.div`
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-  gap: 8px;
-
-  > label {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  ${landscapeStyle(
-    () => css`
-      gap: 12px;
-      > label {
-        color: ${({ theme }) => theme.white}CC !important;
-        font-weight: 400;
-        font-size: 14px;
-      }
-    `
-  )}
-`;
-
-const ChainConnectionContainer = styled.div`
-  display: flex;
-  width: fit-content;
-  min-height: 32px;
-  align-items: center;
-  padding-left: 0px;
-  > label {
-    color: ${({ theme }) => theme.success};
-    font-size: 16px;
-
-    font-weight: 500;
-  }
-
-  :before {
-    content: "";
-    width: 8px;
-    height: 8px;
-    margin: 0px 13px 0px 3px;
-    border-radius: 50%;
-    background-color: ${({ theme }) => theme.success};
-  }
-
-  ${landscapeStyle(
-    () => css`
-      display: none;
-    `
-  )}
-`;
-
-const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>`
-  align-items: center;
-  svg {
-    width: ${({ size }) => size + "px"};
-    height: ${({ size }) => size + "px"};
-  }
-`;
-
-const StyledAvatar = styled.img<{ size: `${number}` }>`
-  align-items: center;
-  object-fit: cover;
-  border-radius: 50%;
-  width: ${({ size }) => size + "px"};
-  height: ${({ size }) => size + "px"};
-`;
+import clsx from "clsx";
 
 interface IIdenticonOrAvatar {
   size?: `${number}`;
@@ -134,9 +29,9 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
   });
 
   return avatar ? (
-    <StyledAvatar src={avatar} alt="avatar" size={size} />
+    <img className="object-cover rounded-[50%]" src={avatar} alt="avatar" width={size} height={size} />
   ) : (
-    <StyledIdenticon size={size} string={address} />
+    <Identicon size={size} string={address} />
   );
 };
 
@@ -164,15 +59,34 @@ export const ChainDisplay: React.FC = () => {
 
 const AccountDisplay: React.FC = () => {
   return (
-    <Container>
-      <AccountContainer>
+    <div
+      className={clsx(
+        "flex flex-col justify-between items-center gap-2 h-auto p-0",
+        "lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3",
+        "cursor-pointer bg-klerosUIComponentsWhiteBackground lg:bg-white-low-opacity-subtle",
+        "lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s]",
+        "hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200"
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center w-fit min-h-8 gap-2 lg:gap-3",
+          "[&>label]:text-base [&>label]:font-semibold lg:[&>label]:text-sm lg:[&>label]:font-normal"
+        )}
+      >
         <IdenticonOrAvatar size="32" />
         <AddressOrName />
-      </AccountContainer>
-      <ChainConnectionContainer>
+      </div>
+      <div
+        className={clsx(
+          "flex w-fit min-h-8 items-center pl-0 lg:hidden",
+          "[&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium",
+          "before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]"
+        )}
+      >
         <ChainDisplay />
-      </ChainConnectionContainer>
-    </Container>
+      </div>
+    </div>
   );
 };
 

web/src/components/ConnectWallet/index.tsx

@@ -22,9 +22,9 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
     <Button
       {...{ className }}
       isLoading={isPending}
-      disabled={isPending}
+      isDisabled={isPending}
       text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
-      onClick={handleSwitch}
+      onPress={handleSwitch}
     />
   );
 };
@@ -35,10 +35,10 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
   return (
     <Button
       {...{ className }}
-      disabled={isOpen}
+      isDisabled={isOpen}
       small
       text={"Connect"}
-      onClick={async () => open({ view: "Connect" })}
+      onPress={async () => open({ view: "Connect" })}
     />
   );
 };

web/src/components/EnsureAuth.tsx

@@ -4,23 +4,9 @@ import { useAccount } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
-import styled from "styled-components";
 import { useAtlasProvider } from "@kleros/kleros-app";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  justify-content: center;
-  align-items: center;
-`;
-
-const StyledInfo = styled.p`
-  margin: 0;
-  padding: 0;
-`;
-
 interface IEnsureAuth {
   children: React.ReactElement;
   message?: string;
@@ -45,15 +31,15 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
   return isVerified ? (
     children
   ) : (
-    <Container>
-      {message ? <StyledInfo>{message}</StyledInfo> : null}
+    <div className="flex flex-col gap-4 justify-center items-center">
+      {message ? <p className="m-0 p-0">{message}</p> : null}
       <Button
         text={buttonText ?? "Sign In"}
-        onClick={handleClick}
-        disabled={isSigningIn || !address}
+        onPress={handleClick}
+        isDisabled={isSigningIn || !address}
         isLoading={isSigningIn}
         {...{ className }}
       />
-    </Container>
+    </div>
   );
 };

web/src/components/InfoCard.tsx

@@ -1,29 +1,24 @@
+import clsx from "clsx";
 import React from "react";
-import styled from "styled-components";
-import { responsiveSize } from "styles/responsiveSize";
 import InfoCircle from "svgs/icons/info-circle.svg";
 
-const InfoContainer = styled.div`
-  display: grid;
-  grid-template-columns: 16px auto;
-  gap: ${responsiveSize(6, 8, 300)};
-  align-items: center;
-  justify-items: start;
-  text-align: start;
-  color: ${({ theme }) => theme.secondaryText};
-`;
-
 interface IInfoCard {
   msg: string;
   className?: string;
 }
 
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
-    <InfoContainer {...{ className }}>
+    <div
+      className={clsx(
+        "grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
+        "text-start text-klerosUIComponentsSecondaryText",
+        className
+      )}
+    >
       <InfoCircle />
       {msg}
-    </InfoContainer>
+    </div>
   );
 };