feat: feedback and styling/functionalities sync

Author: kemuru

web/src/app.tsx

@@ -9,6 +9,7 @@ import "react-toastify/dist/ReactToastify.css";
 import "ethereum-identity-kit/css";
 import "@kleros/ui-components-library/style.css";
 import "@kleros/ui-components-library/theme.css";
+import "./styles/base-elements.css";
 import "./i18n";
 
 import AtlasProvider from "context/AtlasProvider";

web/src/components/CaseStarButton.tsx

@@ -49,8 +49,7 @@ const CaseStarButton: React.FC<{ id: string }> = ({ id }) => {
         starred={starred}
         aria-label={text}
         aria-checked={starred}
-        onClick={(e) => {
-          e.stopPropagation();
+        onPress={() => {
           starCase(id);
         }}
       />

web/src/components/CasesDisplay/Filters.tsx

@@ -105,7 +105,7 @@ const Filters: React.FC = () => {
             dot: theme.primaryPurple,
           },
         ]}
-        defaultValue={JSON.stringify({ ruled, period })}
+        defaultSelectedKey={JSON.stringify({ ruled, period })}
         callback={handleStatusChange}
       />
       <DropdownSelect
@@ -115,7 +115,7 @@ const Filters: React.FC = () => {
           { id: "desc", itemValue: "desc", text: t("filters.newest") },
           { id: "asc", itemValue: "asc", text: t("filters.oldest") },
         ]}
-        defaultValue={order}
+        defaultSelectedKey={order}
         callback={handleOrderChange}
       />
       {isDesktop ? (

web/src/components/ClaimPnkButton.tsx

@@ -71,7 +71,7 @@ const ClaimPnkButton: React.FC = () => {
         <Button
           variant="primary"
           text={faucetCheck ? t("buttons.claim_pnk") : t("buttons.empty_faucet")}
-          onClick={handleRequest}
+          onPress={handleRequest}
           isLoading={isSending}
           isDisabled={isSending || claimed || !faucetCheck || isUndefined(address)}
           Icon={faucetCheck ? FaucetIcon : undefined}

web/src/components/ConnectWallet/index.tsx

@@ -31,7 +31,7 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
       isLoading={isLoading}
       isDisabled={isLoading}
       text={t("buttons.switch_to_chain", { chainName: DEFAULT_CHAIN.name })}
-      onClick={handleSwitch}
+      onPress={handleSwitch}
     />
   );
 };
@@ -46,7 +46,7 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
       isDisabled={isOpen}
       small
       text={t("buttons.connect")}
-      onClick={async () => open({ view: "Connect" })}
+      onPress={async () => open({ view: "Connect" })}
     />
   );
 };

web/src/components/DisputeFeatures/GroupsUI.tsx

@@ -59,7 +59,7 @@ const VotingGroup: React.FC<{ children: JSX.Element; clearAll: () => void }> = (
     <Container key={Group.Voting}>
       <HeaderContainer>
         <Header>
-          {t("misc.shielded_voting")} <StyledLightButton text={t("buttons.clear")} onClick={clearAll} />
+          {t("misc.shielded_voting")} <StyledLightButton text={t("buttons.clear")} onPress={clearAll} />
         </Header>
         <SubTitle>{t("tooltips.shielded_voting_description")}</SubTitle>
       </HeaderContainer>
@@ -74,7 +74,7 @@ const EligibilityGroup: React.FC<{ children: JSX.Element; clearAll: () => void }
     <Container key={Group.Eligibility}>
       <HeaderContainer>
         <Header>
-          {t("misc.jurors_eligibility")} <StyledLightButton text={t("buttons.clear")} onClick={clearAll} />
+          {t("misc.jurors_eligibility")} <StyledLightButton text={t("buttons.clear")} onPress={clearAll} />
         </Header>
         <SubTitle>{t("tooltips.jurors_eligibility_description")}</SubTitle>
       </HeaderContainer>

web/src/components/EnsureAuth.tsx

@@ -51,7 +51,7 @@ const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonText, clas
       {message ? <StyledInfo>{message}</StyledInfo> : null}
       <Button
         text={buttonText ?? t("wallet.sign_in")}
-        onClick={handleClick}
+        onPress={handleClick}
         isDisabled={isSigningIn || !address}
         isLoading={isSigningIn}
         {...{ className }}

web/src/components/ErrorFallback.tsx

@@ -113,7 +113,7 @@ const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) =
             <Header>{t("errors.something_went_wrong")}</Header>
             <Subtitle>{t("errors.reload_or_contact")}</Subtitle>
             <ButtonsContainer>
-              <Button text={t("buttons.reload")} onClick={resetErrorBoundary} />
+              <Button text={t("buttons.reload")} onPress={resetErrorBoundary} />
               <a href={"https://t.me/kleros"} target="_blank" rel="noreferrer">
                 <Button text={t("buttons.contact_us")} />
               </a>

web/src/components/ExternalLinkWarning.tsx

@@ -160,8 +160,8 @@ const ExternalLinkWarning: React.FC<IExternalLinkWarning> = ({ isOpen, url, onCo
       </Message>
 
       <ButtonContainer>
-        <CancelButton text={t("buttons.cancel")} onClick={onCancel} />
-        <ConfirmButton text={t("buttons.continue_to_external_site")} onClick={onConfirm} />
+        <CancelButton text={t("buttons.cancel")} onPress={onCancel} />
+        <ConfirmButton text={t("buttons.continue_to_external_site")} onPress={onConfirm} />
       </ButtonContainer>
     </StyledModal>
   );

web/src/components/Field.tsx

@@ -65,6 +65,7 @@ const LinkContainer = styled.div`
 `;
 
 const StyledInternalLink = styled(InternalLink)`
+  display: flex;
   text-wrap: auto;
   justify-content: end;
   line-height: 1.25;