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

@@ -48,10 +48,9 @@
     "@graphql-codegen/client-preset": "^4.2.0",
     "@kleros/curate-v2-tsconfig": "workspace:^",
     "@kleros/kleros-v2-contracts": "^0.10.0",
+    "@tailwindcss/vite": "^4.1.16",
     "@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",
@@ -61,6 +60,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "lru-cache": "^7.18.3",
+    "tailwindcss": "^4.1.16",
     "typescript": "^5.3.3",
     "vite": "^5.4.2",
     "vite-plugin-node-polyfills": "^0.22.0",
@@ -71,7 +71,7 @@
     "@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",
@@ -82,6 +82,7 @@
     "@yornaath/batshit": "^0.9.0",
     "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",
@@ -98,13 +99,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",
+    "tailwind-merge": "^3.3.1",
     "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";
@@ -10,110 +7,7 @@ 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"};
-`;
+import clsx from "clsx";
 
 interface IIdenticonOrAvatar {
   size?: `${number}`;
@@ -134,9 +28,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 +58,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/InfoCard.tsx

@@ -1,17 +1,7 @@
 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};
-`;
+import { cn } from "~src/utils";
 
 interface IInfoCard {
   msg: string;
@@ -20,10 +10,16 @@ interface IInfoCard {
 
 const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
   return (
-    <InfoContainer {...{ className }}>
+    <div
+      className={cn(
+        "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,39 +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;
-      }
-    `
-  )}
-`;
+import { cn } from "~src/utils";
 
 interface ILightButton {
   text: string;
@@ -45,7 +12,21 @@ 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={cn(
+      "p-2 rounded-[7px]",
+      "bg-transparent hover:bg-white-low-opacity-strong transition duration-100",
+      "[&_.button-text]:text-klerosUIComponentsPrimaryText [&_.button-text]:font-normal",
+      "lg:[&_.button-svg]:mr-0",
+      isMobileNavbar
+        ? "[&_.button-svg]:fill-klerosUIComponentsSecondaryText hover:[&_.button-svg]:fill-klerosUIComponentsPrimaryText"
+        : "[&_.button-svg]:fill-white/75 hover:[&_.button-svg]:fill-white",
+      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>
+);