Merge pull request #89 from kleros/chore/migrate-from-styled-components-to-tailwind

chore: migrate from styled components to tailwind

Author: kyrers

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,12 @@ 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 "overlayscrollbars/styles/overlayscrollbars.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 +24,7 @@ import Settings from "./pages/Settings";
 
 const App: React.FC = () => {
   return (
-    <StyledComponentsProvider>
+    <ThemeProvider>
       <Web3Provider>
         <GraphqlBatcherProvider>
           <QueryClientProvider>
@@ -55,7 +57,7 @@ const App: React.FC = () => {
           </QueryClientProvider>
         </GraphqlBatcherProvider>
       </Web3Provider>
-    </StyledComponentsProvider>
+    </ThemeProvider>
   );
 };
 

web/src/components/ActionButton/ExecuteButton.tsx

@@ -26,7 +26,7 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
     <EnsureChain>
       <Button
         text="Execute"
-        disabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
+        isDisabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
         isLoading={isLoading || isExecuting}
         onClick={() => {
           if (!executeRequest || !config || !publicClient) return;

web/src/components/ActionButton/Modal/Buttons/ErrorButtonMessage.tsx

@@ -1,11 +1,7 @@
-import styled from "styled-components";
+import React from "react";
 
-export const ErrorButtonMessage = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  justify-content: center;
-  margin: 12px;
-  color: ${({ theme }) => theme.error};
-  font-size: 14px;
-`;
+export const ErrorButtonMessage: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="flex gap-1 items-center justify-center m-3 text-klerosUIComponentsError text-sm">{children}</div>
+  );
+};

web/src/components/ActionButton/Modal/Buttons/index.tsx

@@ -1,25 +1,10 @@
 import React from "react";
-import styled from "styled-components";
 import { Button } from "@kleros/ui-components-library";
 import { EnsureChain } from "components/EnsureChain";
 import EnsureAuth from "components/EnsureAuth";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 import { ErrorButtonMessage } from "./ErrorButtonMessage";
 
-const Container = styled.div`
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 16px;
-`;
-
-const ButtonsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
 interface IButtons {
   toggleModal: () => void;
   callback: () => void;
@@ -38,28 +23,28 @@ const Buttons: React.FC<IButtons> = ({
   insufficientBalance,
 }) => {
   return (
-    <Container>
+    <div className="flex flex-wrap gap-4 justify-between w-full">
       <Button variant="secondary" text="Return" onClick={toggleModal} />
       <EnsureChain>
         <EnsureAuth>
-          <ButtonsContainer>
+          <div className="flex flex-col items-center">
             <Button
               text={buttonText}
               onClick={() => {
                 callback();
               }}
               isLoading={isLoading}
-              disabled={isDisabled}
+              isDisabled={isDisabled}
             />
             {insufficientBalance ? (
               <ErrorButtonMessage>
                 <ClosedCircleIcon /> Insufficient balance
               </ErrorButtonMessage>
             ) : null}
-          </ButtonsContainer>
+          </div>
         </EnsureAuth>
       </EnsureChain>
-    </Container>
+    </div>
   );
 };
 export default Buttons;

web/src/components/ActionButton/Modal/ChallengeItemModal.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo, useState } from "react";
-import styled from "styled-components";
 import Header from "./Header";
 import Buttons from "./Buttons";
 import DepositRequired from "./DepositRequired";
@@ -19,10 +18,6 @@ import {
 } from "hooks/useContract";
 import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
 
-const ReStyledModal = styled(Modal)`
-  gap: 32px;
-`;
-
 export enum ChallengeType {
   Submission,
   Removal,
@@ -129,7 +124,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
   );
 
   return (
-    <ReStyledModal {...{ toggleModal }}>
+    <Modal className="gap-8" {...{ toggleModal }}>
       <Header text={`Challenge ${isItem ? "Item" : "List"}`} />
       <DepositRequired value={depositRequired} />
       <EvidenceUpload {...{ setEvidence, setIsEvidenceUploading }} />
@@ -153,7 +148,7 @@ const ChallengeItemModal: React.FC<IChallengeItemModal> = ({
           {...{ insufficientBalance, toggleModal }}
         />
       </div>
-    </ReStyledModal>
+    </Modal>
   );
 };
 

web/src/components/ActionButton/Modal/DepositRequired.tsx

@@ -1,40 +1,20 @@
 import React from "react";
 import { Card } from "@kleros/ui-components-library";
-import styled from "styled-components";
 import { formatETH } from "utils/format";
-
-const StyledCard = styled(Card)`
-  display: flex;
-  flex-direction: column;
-  background-color: ${({ theme }) => theme.mediumBlue};
-  height: 87px;
-  width: 100%;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  padding: 15px;
-  gap: 5px;
-`;
-
-const StyledHeader = styled.p`
-  font-size: 14px;
-  margin: 0;
-  color: ${({ theme }) => theme.primaryBlue};
-`;
-
-const StyledQuantity = styled.p`
-  font-size: 24px;
-  margin: 0;
-  color: ${({ theme }) => theme.primaryBlue};
-  font-weight: 600;
-`;
+import clsx from "clsx";
 
 const FeeRequired: React.FC<{ value: bigint }> = ({ value }) => {
   return (
-    <StyledCard>
-      <StyledHeader>Deposit required</StyledHeader>
-      <StyledQuantity>{formatETH(value ?? 1, 5)} ETH</StyledQuantity>
-    </StyledCard>
+    <Card
+      className={clsx(
+        "flex flex-col gap-1.5",
+        "w-full h-22 p-4 justify-center items-center",
+        "bg-klerosUIComponentsMediumBlue border-none"
+      )}
+    >
+      <p className="text-sm text-klerosUIComponentsPrimaryBlue">Deposit required</p>
+      <p className="text-2xl font-semibold text-klerosUIComponentsPrimaryBlue">{formatETH(value ?? 1, 5)} ETH</p>
+    </Card>
   );
 };
 

web/src/components/ActionButton/Modal/EvidenceUpload.tsx

@@ -1,52 +1,10 @@
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import styled from "styled-components";
-import { FileUploader, Textarea } from "@kleros/ui-components-library";
-import LabeledInput from "components/LabeledInput";
-import { responsiveSize } from "styles/responsiveSize";
+import { FileUploader, TextArea, TextField } from "@kleros/ui-components-library";
 import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
 import { Roles, useAtlasProvider } from "@kleros/kleros-app";
 import { getFileUploaderMsg } from "src/utils";
 import useIsDesktop from "hooks/useIsDesktop";
 
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 38px;
-  margin: 6px 0px;
-`;
-
-const TitleField = styled(LabeledInput)`
-  width: 100%;
-`;
-
-const DescriptionContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-
-const DescriptionField = styled(Textarea)`
-  width: 100%;
-  height: 180px;
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryText};
-`;
-
-const StyledFileUploader = styled(FileUploader)`
-  width: 100%;
-  margin-bottom: ${responsiveSize(150, 72)};
-  path {
-    fill: ${({ theme }) => theme.primaryBlue};
-  }
-  small {
-    white-space: pre-line;
-    text-align: start;
-  }
-`;
-
 export type Evidence = {
   name: string;
   description: string;
@@ -92,29 +50,31 @@ const EvidenceUpload: React.FC<IEvidenceUpload> = ({ setEvidence, setIsEvidenceU
   };
 
   return (
-    <Container>
-      <TitleField
-        topLeftLabel={{ text: "Title" }}
+    <div className="flex flex-col gap-9 w-full py-1.5">
+      <TextField
+        className="w-full"
+        label="Title"
         placeholder="eg. The item is not legit."
         value={title}
-        onChange={(event) => setTitle(event.target.value)}
+        onChange={(value) => setTitle(value)}
+      />
+      <TextArea
+        label="Description"
+        id="evidence-description"
+        className="w-full [&_textarea]:w-full [&_textarea]:h-[180px]"
+        placeholder="Explain what motivates you to challenge it. Why do you think the item is not compliant with the Policy?"
+        value={description}
+        onChange={(value) => setDescription(value)}
       />
-      <DescriptionContainer>
-        <StyledLabel>Description</StyledLabel>
-        <DescriptionField
-          placeholder="Explain what motivates you to challenge it. Why do you think the item is not compliant with the Policy?"
-          value={description}
-          onChange={(event) => setDescription(event.target.value)}
-        />
-      </DescriptionContainer>
-      <StyledFileUploader
+      <FileUploader
+        className="w-full [&_small]:whitespace-pre-line [&_small]:text-start"
         callback={handleFileUpload}
         variant={isDesktop ? "info" : undefined}
         msg={
           "Additionally, you can add an external file.\n" + (getFileUploaderMsg(Roles.Evidence, roleRestrictions) ?? "")
         }
       />
-    </Container>
+    </div>
   );
 };
 

web/src/components/ActionButton/Modal/Header.tsx

@@ -1,16 +1,11 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledHeader = styled.h1`
-  margin: 0;
-`;
 
 interface IHeader {
   text: string;
 }
 
 const Header: React.FC<IHeader> = ({ text }) => {
-  return <StyledHeader>{text}</StyledHeader>;
+  return <h1>{text}</h1>;
 };
 
 export default Header;