Merge pull request #1801 from kleros/dev

Release v2-testnet-4.0.2

Author: jaybuidl

web/package.json

@@ -81,7 +81,7 @@
     "@kleros/kleros-app": "^2.0.1",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^2.16.0",
+    "@kleros/ui-components-library": "^2.18.0",
     "@lifi/wallet-management": "^3.4.6",
     "@lifi/widget": "^3.12.3",
     "@sentry/react": "^7.120.0",

web/src/assets/svgs/icons/star.svg

@@ -0,0 +1,58 @@
+import React, { useMemo } from "react";
+import styled, { css } from "styled-components";
+
+import { Button, Tooltip } from "@kleros/ui-components-library";
+
+import Star from "svgs/icons/star.svg";
+
+import useIsDesktop from "hooks/useIsDesktop";
+import useStarredCases from "hooks/useStarredCases";
+
+const StyledButton = styled(Button)<{ starred: boolean }>`
+  background: none;
+  padding: 0 0 2px 0;
+
+  .button-svg {
+    width: 24px;
+    height: 24px;
+    margin: 0;
+    fill: none;
+
+    path {
+      stroke: ${({ theme }) => theme.secondaryPurple};
+    }
+    ${({ starred }) =>
+      starred &&
+      css`
+        fill: ${({ theme }) => theme.secondaryPurple};
+      `};
+  }
+
+  :hover {
+    background: none;
+  }
+`;
+
+const CaseStarButton: React.FC<{ id: string }> = ({ id }) => {
+  const { starredCases, starCase } = useStarredCases();
+  const isDesktop = useIsDesktop();
+  const starred = useMemo(() => Boolean(starredCases.has(id)), [id, starredCases]);
+  const text = starred ? "Remove from favorite" : "Add to favorite";
+  return (
+    <Tooltip {...{ text }} place={isDesktop ? "right" : "bottom"}>
+      <StyledButton
+        Icon={Star}
+        text=""
+        starred={starred}
+        aria-label={text}
+        aria-checked={starred}
+        onClick={(e) => {
+          e.stopPropagation();
+          starCase(id);
+        }}
+      />
+    </Tooltip>
+  );
+};
+
+export default CaseStarButton;

web/src/components/CaseStarButton.tsx

@@ -1,5 +1,7 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import styled, { css, useTheme } from "styled-components";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -19,29 +21,32 @@ const Container = styled.div`
   width: fit-content;
 `;
 
-const StyledGridIcon = styled(GridIcon)`
-  cursor: pointer;
-  transition: filter 0.2s ease;
-  fill: ${({ theme }) => theme.primaryBlue};
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-`;
-
 const IconsContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 4px;
 `;
 
-const StyledListIcon = styled(ListIcon)`
+const BaseIconStyles = css`
+  ${hoverShortTransitionTiming}
   cursor: pointer;
-  transition: filter 0.2s ease;
   fill: ${({ theme }) => theme.primaryBlue};
   width: 16px;
   height: 16px;
   overflow: hidden;
+
+  :hover {
+    fill: ${({ theme }) => theme.secondaryBlue};
+  }
+`;
+
+const StyledGridIcon = styled(GridIcon)`
+  ${BaseIconStyles}
+`;
+
+const StyledListIcon = styled(ListIcon)`
+  ${BaseIconStyles}
 `;
 
 const Filters: React.FC = () => {

web/src/components/CasesDisplay/Filters.tsx

@@ -18,14 +18,12 @@ import { responsiveSize } from "styles/responsiveSize";
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: ${responsiveSize(8, 16)};
 
   ${landscapeStyle(
-    () =>
-      css`
-        flex-direction: row;
-        gap: ${responsiveSize(4, 22)};
-      `
+    () => css`
+      flex-direction: row;
+    `
   )}
 `;
 

web/src/components/CasesDisplay/Search.tsx

@@ -1,15 +1,17 @@
 import React from "react";
 import styled from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import Filters from "./Filters";
 import Stats, { IStats } from "./Stats";
 
 const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 11px;
-  margin-bottom: 48px;
+  margin-top: ${responsiveSize(4, 8)};
+  margin-bottom: ${responsiveSize(16, 32)};
   justify-content: space-between;
 `;
 

web/src/components/CasesDisplay/StatsAndFilters.tsx

@@ -17,7 +17,7 @@ const TitleContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: ${responsiveSize(32, 48)};
+  margin-bottom: ${responsiveSize(12, 24)};
 `;
 
 const StyledTitle = styled.h1`

web/src/components/CasesDisplay/index.tsx

@@ -8,6 +8,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { InternalLink } from "components/InternalLink";
 
@@ -38,12 +39,12 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
 `;
 
 const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
   display: flex;
   gap: 4px;
 
   &:hover {
     svg {
-      transition: fill 0.1s;
       fill: ${({ theme }) => theme.secondaryBlue};
     }
   }

web/src/components/DisputePreview/Policies.tsx

@@ -8,22 +8,19 @@ import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
 
 const StyledCard = styled(Card)`
+  ${hoverShortTransitionTiming}
   width: 100%;
   height: 100%;
   max-height: 335px;
   min-height: 290px;
-  transition: background-color 0.1s;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.lightGrey}BB;
-  }
 `;
 
 const CardContainer = styled.div`
@@ -61,7 +58,7 @@ interface IDisputeCardView {
 const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => {
   return (
     <Link to={`/cases/${props?.disputeID?.toString()}`}>
-      <StyledCard>
+      <StyledCard hover>
         <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
         <CardContainer>
           {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}

web/src/components/DisputeView/DisputeCardView.tsx

@@ -9,20 +9,17 @@ import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
 
 const StyledListItem = styled(Card)`
+  ${hoverShortTransitionTiming}
   display: flex;
   flex-grow: 1;
   width: 100%;
   height: 82px;
-  transition: background-color 0.1s;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.lightGrey}BB;
-  }
 `;
 
 const ListContainer = styled.div`
@@ -64,7 +61,7 @@ const DisputeListView: React.FC<IDisputeListView> = (props) => {
   const { isDisconnected } = useAccount();
   return (
     <Link to={`/cases/${props?.disputeID?.toString()}`}>
-      <StyledListItem>
+      <StyledListItem hover>
         <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
         <ListContainer>
           <TitleContainer isLabel={!isDisconnected}>

web/src/components/DisputeView/DisputeListView.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import styled, { css, keyframes } from "styled-components";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import DottedMenu from "svgs/icons/dotted-menu.svg";
 
 const ripple = keyframes`
@@ -57,13 +59,16 @@ const Container = styled.div<{ displayRipple: boolean }>`
 `;
 
 const ButtonContainer = styled.div`
+  ${hoverShortTransitionTiming}
   border-radius: 50%;
   z-index: 1;
   background-color: ${({ theme }) => theme.lightBackground};
 
-  transition: background-color 0.1s;
   :hover {
     background-color: ${({ theme }) => theme.lightGrey};
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
   }
 `;
 

web/src/components/DottedMenuButton.tsx

@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
 
 import { landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import Identicon from "react-identicons";
 import ReactMarkdown from "react-markdown";
@@ -165,6 +166,7 @@ const MobileText = styled.span`
 `;
 
 const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
   display: flex;
   gap: ${responsiveSize(5, 6)};
   > svg {
@@ -173,7 +175,6 @@ const StyledInternalLink = styled(InternalLink)`
   }
 
   :hover svg {
-    transition: fill 0.1s;
     fill: ${({ theme }) => theme.secondaryBlue};
   }
 `;

web/src/components/EvidenceCard.tsx

@@ -9,7 +9,6 @@ const Container = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
-  margin-top: 24px;
 `;
 
 const SVGContainer = styled.div`