chore: migrate from styled components to tailwind

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

@@ -50,8 +50,6 @@
     "@kleros/kleros-v2-contracts": "^0.10.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@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",
@@ -71,11 +69,12 @@
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@kleros/curate-v2-templates": "workspace:^",
     "@kleros/kleros-app": "^2.0.2",
-    "@kleros/ui-components-library": "^2.20.0",
+    "@kleros/ui-components-library": "^3.6.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.16",
     "@tanstack/react-query": "^5.66.0",
     "@web3modal/ethereum": "^2.7.1",
     "@web3modal/wagmi": "^5.1.6",
@@ -98,13 +97,12 @@
     "react-is": "^18.2.0",
     "react-loading-skeleton": "^3.3.1",
     "react-markdown": "^8.0.7",
-    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.2",
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.4.3",
-    "styled-components": "^5.3.11",
     "subgraph-status": "^1.2.4",
+    "tailwindcss": "^4.1.16",
     "viem": "^2.27.2",
     "wagmi": "^2.14.10",
     "zod": "^3.24.2"

web/src/app.tsx

@@ -3,10 +3,11 @@ import { Route } from "react-router-dom";
 import { SentryRoutes } from "./utils/sentry";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
+import "./global.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/components/ConnectWallet/AccountDisplay.tsx

@@ -1,7 +1,4 @@
 import React from "react";
-import styled, { css } from "styled-components";
-
-import { landscapeStyle } from "styles/landscapeStyle";
 
 import Identicon from "react-identicons";
 import { isAddress } from "viem";
@@ -11,110 +8,6 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
 import { getChain } from "consts/chains";
 import { shortenAddress } from "utils/shortenAddress";
 
-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"};
-`;
-
 interface IIdenticonOrAvatar {
   size?: `${number}`;
   address?: `0x${string}`;
@@ -134,9 +27,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 +57,32 @@ export const ChainDisplay: React.FC = () => {
 
 const AccountDisplay: React.FC = () => {
   return (
-    <Container>
-      <AccountContainer>
+    <div
+      className={
+        "flex flex-col justify-between h-auto items-center gap-2 bg-klerosUIComponentsWhiteBackground p-0 cursor-pointer " +
+        "hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200 lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s] " +
+        "lg:bg-white-low-opacity-subtle lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3"
+      }
+    >
+      <div
+        className={
+          "flex items-center gap-2 w-fit min-h-8 [&>label]:text-base [&>label]:font-semibold " +
+          "lg:gap-3 lg:[&>label]:text-sm lg:[&>label]:font-normal"
+        }
+      >
         <IdenticonOrAvatar size="32" />
         <AddressOrName />
-      </AccountContainer>
-      <ChainConnectionContainer>
+      </div>
+      <div
+        className={
+          "flex w-fit min-h-8 items-center pl-0 [&>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]" +
+          "lg:hidden"
+        }
+      >
         <ChainDisplay />
-      </ChainConnectionContainer>
-    </Container>
+      </div>
+    </div>
   );
 };
 

web/src/components/InfoCard.tsx

@@ -1,29 +1,21 @@
 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={`grid grid-cols-[16px_auto] items-center justify-start text-start text-klerosUIComponentsSecondaryText ${className}`}
+      style={{ gap: responsiveSize(6, 8, 300) }}
+    >
       <InfoCircle />
       {msg}
-    </InfoContainer>
+    </div>
   );
 };
 

web/src/components/LightButton.tsx

@@ -1,40 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { hoverShortTransitionTiming } from "styles/commonStyles";
-
 import { Button } from "@kleros/ui-components-library";
 
-const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
-  ${hoverShortTransitionTiming}
-  background-color: transparent;
-  padding: 8px !important;
-  border-radius: 7px;
-  .button-text {
-    color: ${({ theme }) => theme.primaryText};
-    font-weight: 400;
-  }
-  .button-svg {
-    fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
-  }
-
-  &:hover {
-    .button-svg {
-      fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
-    }
-    background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
-  }
-
-  ${landscapeStyle(
-    () => css`
-      padding: 8px !important;
-      .button-svg {
-        margin-right: 0;
-      }
-    `
-  )}
-`;
-
 interface ILightButton {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
@@ -45,7 +11,20 @@ interface ILightButton {
 }
 
 const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
-  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
+  <Button
+    variant="primary"
+    small
+    className={
+      "transition duration-100 bg-transparent p-2 rounded-[7px] lg:[&_.button-svg]:mr-0 " +
+      "[&_.button-text]:text-klerosUIComponentsPrimaryText [&_.button-text]:font-normal " +
+      `[&_button-svg]:${isMobileNavbar ? "fill-klerosUIComponentsSecondaryText" : "fill-white/75"} ` +
+      `hover:[&_.button-svg]:${
+        isMobileNavbar ? "fill-klerosUIComponentsPrimaryText" : "fill-white"
+      } hover:bg-white-low-opacity-strong ` +
+      `${className}`
+    }
+    {...{ text, Icon, onClick, disabled }}
+  />
 );
 
 export default LightButton;

web/src/components/Overlay.tsx

@@ -1,11 +1,5 @@
-import styled from "styled-components";
+import React from "react";
 
-export const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: ${({ theme }) => theme.blackLowOpacity};
-  z-index: 30;
-`;
+export const Overlay: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div className="fixed top-0 left-0 w-screen h-screen bg-black-low-opacity z-30">{children}</div>
+);

web/src/components/OverlayPortal.tsx

@@ -1,18 +1,11 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import styled from "styled-components";
-
-const PortalContainer = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-  width: 100%;
-  height: 100%;
-`;
 
 const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, document.body);
+  return ReactDOM.createPortal(
+    <div className="fixed top-0 left-0 z-9999 w-full h-full">{children}</div>,
+    document.body
+  );
 };
 
 export default OverlayPortal;