Merge pull request #95 from kleros/chore/improve-component-library-integration

chore: properly integrate Kleros UI Component Library

Author: kyrers

web/src/components/ActionButton/ExecuteButton.tsx

@@ -28,7 +28,7 @@ const ExecuteButton: React.FC<IExecuteButton> = ({ registryAddress, itemId, refe
         text="Execute"
         isDisabled={isLoading || isError || isExecuting || isPreparingConfig || disabled}
         isLoading={isLoading || isExecuting}
-        onClick={() => {
+        onPress={() => {
           if (!executeRequest || !config || !publicClient) return;
           setIsExecuting(true);
           wrapWithToast(async () => await executeRequest(config.request), publicClient)

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

@@ -24,13 +24,13 @@ const Buttons: React.FC<IButtons> = ({
 }) => {
   return (
     <div className="flex flex-wrap gap-4 justify-between w-full">
-      <Button variant="secondary" text="Return" onClick={toggleModal} />
+      <Button variant="secondary" text="Return" onPress={toggleModal} />
       <EnsureChain>
         <EnsureAuth>
           <div className="flex flex-col items-center">
             <Button
               text={buttonText}
-              onClick={() => {
+              onPress={() => {
                 callback();
               }}
               isLoading={isLoading}

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

@@ -6,11 +6,7 @@ interface IInfo {
 }
 
 const Info: React.FC<IInfo> = ({ alertMessage }) => {
-  return (
-    <div className="flex w-full">
-      <AlertMessage variant="info" title="Important" msg={alertMessage} />
-    </div>
-  );
+  return <AlertMessage className="w-full" variant="info" title="Important" msg={alertMessage} />;
 };
 
 export default Info;

web/src/components/ActionButton/index.tsx

@@ -64,7 +64,7 @@ const ActionButton: React.FC<IActionButton> = ({ status, registryAddress, itemId
         variant="secondary"
         isDisabled={disabled}
         text={getModalButtonText(status ?? 0, isItem)}
-        onClick={toggleModal}
+        onPress={toggleModal}
       />
     );
   }, [isExecutable, registryAddress, status, itemId, isLoading, disputeId, isItem, toggleModal, refetch]);

web/src/components/ConnectWallet/index.tsx

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

web/src/components/EnsureAuth.tsx

@@ -29,7 +29,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
   ) : (
     <Button
       text="Sign In"
-      onClick={handleClick}
+      onPress={handleClick}
       isDisabled={isSigningIn || !address}
       isLoading={isSigningIn}
       {...{ className }}

web/src/components/HistoryDisplay/Party/JustificationModal.tsx

@@ -48,7 +48,7 @@ const JustificationModal: React.FC<IJustificationModal> = ({ request, toggleModa
         <label className="w-full">No Justification provided</label>
       )}
       <div className="flex flex-wrap justify-between w-full mt-9 gap-y-2">
-        <Button variant="secondary" text="Return" onClick={toggleModal} />
+        <Button variant="secondary" text="Return" onPress={toggleModal} />
         {!request.resolved && (
           <ActionButton
             isItem

web/src/components/LightButton.tsx

@@ -5,13 +5,13 @@ import { cn } from "src/utils";
 interface ILightButton {
   text: string;
   Icon?: React.FC<React.SVGAttributes<SVGElement>>;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  onPress?: () => void;
   disabled?: boolean;
   className?: string;
   isMobileNavbar?: boolean;
 }
 
-const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
+const LightButton: React.FC<ILightButton> = ({ text, Icon, onPress, disabled, className, isMobileNavbar }) => (
   <Button
     variant="primary"
     small
@@ -25,7 +25,7 @@ const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, cl
         : "[&_.button-svg]:fill-white/75 hover:[&_.button-svg]:fill-white",
       className
     )}
-    {...{ text, Icon, onClick, disabled }}
+    {...{ text, Icon, disabled, onPress }}
   />
 );
 

web/src/components/Search.tsx

@@ -14,7 +14,7 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
   const keywords = searchParams.get("keywords");
 
   const decodedFilter = decodeListURIFilter(filter ?? "all");
-  const [search, setSearch] = useState(keywords ?? undefined);
+  const [search, setSearch] = useState(keywords ?? "");
   const navigate = useNavigate();
 
   useDebounce(
@@ -41,6 +41,7 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
           className="flex-1 basis-[310px] [&_input]:py-0"
           type="text"
           placeholder="Search by keywords"
+          aria-label="Search by keywords"
           value={search}
           onChange={(value) => setSearch(value)}
         />
@@ -83,9 +84,9 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
         callback={(item) => handleStatusChange(item.itemValue)}
       />
       {isList ? (
-        <Button text="Create New List" Icon={PaperIcon} onClick={() => navigate("/submit-list")} />
+        <Button text="Create New List" Icon={PaperIcon} onPress={() => navigate("/submit-list")} />
       ) : (
-        <Button Icon={PlusIcon} text="Submit Item" onClick={() => navigate(`/submit-item/${id}`)} />
+        <Button Icon={PlusIcon} text="Submit Item" onPress={() => navigate(`/submit-item/${id}`)} />
       )}
     </div>
   );

web/src/layout/Header/DesktopHeader.tsx

@@ -35,13 +35,7 @@ const DesktopHeader: React.FC = () => {
       <div className="hidden h-16 lg:flex lg:items-center lg:justify-between lg:w-full lg:relative">
         <div className="flex gap-2">
           <div className="flex items-center">
-            <LightButton
-              text=""
-              onClick={() => {
-                toggleIsDappListOpen();
-              }}
-              Icon={KlerosSolutionsIcon}
-            />
+            <LightButton text="" onPress={toggleIsDappListOpen} Icon={KlerosSolutionsIcon} />
           </div>
           <Logo />
         </div>