chore: ui-library-migration

web/package.json

@@ -66,8 +66,9 @@
   },
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.16.3",
+    "@internationalized/date": "^3.7.0",
     "@kleros/kleros-app": "^2.0.2",
-    "@kleros/ui-components-library": "^2.19.0",
+    "@kleros/ui-components-library": "3.0.1-rc1",
     "@reown/appkit": "^1.6.6",
     "@reown/appkit-adapter-wagmi": "^1.6.6",
     "@sentry/react": "^7.93.0",

web/src/app.tsx

@@ -3,6 +3,7 @@ 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 "@kleros/ui-components-library/dist/esm/ui-components-library.css";
 import Web3Provider from "context/Web3Provider";
 import IsListProvider from "context/IsListProvider";
 import QueryClientProvider from "context/QueryClientProvider";
@@ -15,6 +16,7 @@ import { NewTransactionProvider } from "./context/NewTransactionContext";
 import AttachmentDisplay from "./pages/AttachmentDisplay";
 import AtlasProvider from "./context/AtlasProvider";
 import Settings from "./pages/Settings";
+import { StyledH1 } from "./components/StyledTags";
 
 const App: React.FC = () => {
   return (
@@ -32,7 +34,7 @@ const App: React.FC = () => {
                       <Route path="transactions/*" element={<MyTransactions />} />
                       <Route path="attachment/*" element={<AttachmentDisplay />} />
                       <Route path="settings/*" element={<Settings />} />
-                      <Route path="*" element={<h1>404 not found</h1>} />
+                      <Route path="*" element={<StyledH1>404 not found</StyledH1>} />
                     </Route>
                   </SentryRoutes>
                 </NewTransactionProvider>

web/src/components/ConnectWallet/AccountDisplay.tsx

@@ -10,6 +10,7 @@ import { getChain } from "consts/chains";
 import { shortenAddress } from "utils/shortenAddress";
 
 import { landscapeStyle } from "styles/landscapeStyle";
+import { StyledLabel } from "../StyledTags";
 
 const Container = styled.div`
   display: flex;
@@ -153,13 +154,13 @@ export const AddressOrName: React.FC<IAddressOrName> = ({ address: propAddress }
     chainId: 1,
   });
 
-  return <label>{data ?? (isAddress(address!) ? shortenAddress(address) : address)}</label>;
+  return <StyledLabel>{data ?? (isAddress(address!) ? shortenAddress(address) : address)}</StyledLabel>;
 };
 
 export const ChainDisplay: React.FC = () => {
   const chainId = useChainId();
   const chain = getChain(chainId);
-  return <label>{chain?.name}</label>;
+  return <StyledLabel>{chain?.name}</StyledLabel>;
 };
 
 const AccountDisplay: React.FC = () => {

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

@@ -7,6 +7,7 @@ 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";
+import { StyledP } from "./StyledTags";
 
 const Container = styled.div`
   display: flex;
@@ -16,7 +17,7 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const StyledInfo = styled.p`
+const StyledInfo = styled(StyledP)`
   margin: 0;
   padding: 0;
 `;
@@ -49,8 +50,8 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
       {message ? <StyledInfo>{message}</StyledInfo> : null}
       <Button
         text={buttonText ?? "Sign In"}
-        onClick={handleClick}
-        disabled={isSigningIn || !address}
+        onPress={handleClick}
+        isDisabled={isSigningIn || !address}
         isLoading={isSigningIn}
         {...{ className }}
       />

web/src/components/LightButton.tsx

@@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { Button } from "@kleros/ui-components-library";
+import { type ButtonProps } from "@kleros/ui-components-library/dist/lib/button";
 
 const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
   ${hoverShortTransitionTiming}
@@ -38,14 +39,14 @@ const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
 interface ILightButton {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onClick?: ButtonProps["onPress"];
   disabled?: boolean;
   className?: string;
   isMobileNavbar?: boolean;
 }
 
 const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
-  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
+  <StyledButton variant="primary" small {...{ text, Icon, onPress: onClick, disabled, className, isMobileNavbar }} />
 );
 
 export default LightButton;

web/src/components/OpenModalRaiseDisputeButton.tsx

@@ -12,7 +12,7 @@ const OpenModalRaiseDisputeButton: React.FC<IOpenModalRaiseDisputeButton> = ({ a
 
   return (
     <>
-      <Button variant="secondary" text={"Raise a dispute"} onClick={toggleModal} />
+      <Button variant="secondary" text={"Raise a dispute"} onPress={toggleModal} />
       {isModalOpen ? <RaiseDisputeModal {...{ toggleModal, arbitrationCost }} /> : null}
     </>
   );

web/src/components/PreviewCard/Header.tsx

@@ -8,6 +8,7 @@ import { mapStatusToEnum } from "utils/mapStatusToEnum";
 import { StyledSkeleton } from "../StyledSkeleton";
 import StatusBanner from "../TransactionCard/StatusBanner";
 import EtherscanIcon from "svgs/icons/etherscan.svg";
+import { StyledH1, StyledLabel as Label, StyledA } from "../StyledTags";
 
 const Container = styled.div`
   display: flex;
@@ -17,11 +18,11 @@ const Container = styled.div`
   gap: 12px;
 `;
 
-const StyledLabel = styled.label`
+const StyledLabel = styled(Label)`
   color: ${({ theme }) => theme.secondaryPurple};
 `;
 
-const StyledHeader = styled.h1`
+const StyledHeader = styled(StyledH1)`
   margin: 0;
   flex-wrap: wrap;
   word-break: break-word;
@@ -75,9 +76,9 @@ const Header: React.FC<IHeader> = ({ escrowType, escrowTitle, id, status, transa
       </LeftContent>
       <RightContent>
         {transactionHash ? (
-          <a href={etherscanUrl} target="_blank" rel="noreferrer">
+          <StyledA href={etherscanUrl} target="_blank" rel="noreferrer">
             <StyledEtherscanIcon />
-          </a>
+          </StyledA>
         ) : null}
         <StatusBanner status={currentStatusEnum} isPreview={true} />
       </RightContent>

web/src/components/PreviewCard/Terms/Header.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import styled from "styled-components";
+import { StyledH3 } from "components/StyledTags";
 
-const StyledHeader = styled.h3`
+const StyledHeader = styled(StyledH3)`
   margin-bottom: 0;
 `;
 

web/src/components/StyledTags/index.tsx

@@ -0,0 +1,58 @@
+import styled from "styled-components";
+
+export const StyledH1 = styled.h1`
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+export const StyledH2 = styled.h2`
+  margin: 0 0 16px 0;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+export const StyledH3 = styled.h3`
+  margin: 0 0 16px 0;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+export const StyledP = styled.p`
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+export const StyledSmall = styled.small`
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+export const StyledLabel = styled.label`
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: ${({ theme }) => theme.secondaryText};
+`;
+
+export const StyledA = styled.a`
+  font-weight: 400;
+  font-size: 14px;
+  text-decoration: none;
+  color: ${({ theme }) => theme.primaryBlue};
+`;
+
+export const StyledHr = styled.hr`
+  opacity: 1;
+  border: 1px solid ${({ theme }) => theme.stroke};
+`;

web/src/components/TransactionCard/StatusBanner.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import styled, { Theme, useTheme, css } from "styled-components";
 import { Statuses } from "consts/statuses";
 import { isUndefined } from "utils/index";
+import { StyledLabel as Label } from "../StyledTags";
 
 interface IContainer {
   isCard: boolean;
@@ -34,7 +35,7 @@ const Container = styled.div<IContainer>`
   }};
 `;
 
-const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard?: boolean }>`
+const StyledLabel = styled(Label)<{ frontColor: string; withDot?: boolean; isCard?: boolean }>`
   display: flex;
   align-items: center;
   color: ${({ frontColor }) => frontColor};
@@ -61,7 +62,7 @@ const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard
       : null}
 `;
 
-const StyledNumberLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard?: boolean }>`
+const StyledNumberLabel = styled(Label)<{ frontColor: string; withDot?: boolean; isCard?: boolean }>`
   display: flex;
   align-items: center;
   color: ${({ frontColor }) => frontColor};

web/src/components/TransactionCard/index.tsx

@@ -20,6 +20,7 @@ import { TransactionDetailsFragment } from "src/graphql/graphql";
 import { StyledSkeleton, StyledSkeletonTitle } from "../StyledSkeleton";
 import TransactionInfo from "../TransactionInfo";
 import StatusBanner from "./StatusBanner";
+import { StyledH3 } from "../StyledTags";
 
 const StyledCard = styled(Card)`
   width: 100%;
@@ -55,7 +56,7 @@ const ListContainer = styled.div`
 
 const ListTitle = styled.div``;
 
-const StyledTitle = styled.h3`
+const StyledTitle = styled(StyledH3)`
   margin: 0;
 `;
 

web/src/components/TransactionInfo/Field.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { Link } from "react-router-dom";
+import { StyledLabel } from "../StyledTags";
 
 type FieldContainerProps = {
   width?: string;
@@ -43,7 +44,7 @@ const FieldContainer = styled.div<FieldContainerProps>`
     `};
 `;
 
-const StyledValue = styled.label<{ isPreview?: boolean }>`
+const StyledValue = styled(StyledLabel)<{ isPreview?: boolean }>`
   flex-grow: 1;
   text-align: end;
   color: ${({ theme }) => theme.primaryText};
@@ -64,7 +65,7 @@ const StyledLink = styled(Link)`
   }
 `;
 
-const NameLabel = styled.label<{ isList?: boolean; name: string; isPreview?: boolean }>`
+const NameLabel = styled(StyledLabel)<{ isList?: boolean; name: string; isPreview?: boolean }>`
   ${({ isList, name }) =>
     isList &&
     css`

web/src/components/TransactionInfo/index.tsx

@@ -12,6 +12,7 @@ import CalendarIcon from "svgs/icons/calendar.svg";
 import PileCoinsIcon from "svgs/icons/pile-coins.svg";
 import UserIcon from "svgs/icons/user.svg";
 import Field from "./Field";
+import { StyledA as A } from "../StyledTags";
 
 const Container = styled.div<{ isList: boolean; isPreview?: boolean }>`
   display: flex;
@@ -49,7 +50,7 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isPreview?: boolean
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: flex-start;
-   `};
+    `};
 
   ${({ isList, isPreview }) =>
     isList &&
@@ -71,10 +72,9 @@ const RestOfFieldsContainer = styled.div<{ isList?: boolean; isPreview?: boolean
         `
       )}
     `};
-
 `;
 
-const StyledA = styled.a`
+const StyledA = styled(A)`
   color: ${({ theme }) => theme.primaryText};
   font-weight: 600;
 
@@ -107,13 +107,13 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
   const { isList } = useIsList();
   const displayAsList = isList && !overrideIsList;
 
-  const { data: buyerEns } = useEnsName({ 
-    address: buyerAddress as `0x${string}`, 
-    chainId: 1 
+  const { data: buyerEns } = useEnsName({
+    address: buyerAddress as `0x${string}`,
+    chainId: 1,
   });
-  const { data: sellerEns } = useEnsName({ 
-    address: sellerAddress as `0x${string}`, 
-    chainId: 1 
+  const { data: sellerEns } = useEnsName({
+    address: sellerAddress as `0x${string}`,
+    chainId: 1,
   });
 
   const displayBuyerAddress = buyerEns || shortenAddress(buyerAddress);
@@ -195,4 +195,4 @@ const TransactionInfo: React.FC<ITransactionInfo> = ({
   );
 };
 
-export default TransactionInfo;
+export default TransactionInfo;