Merge pull request #1792 from kleros/feat/update-ui-components-librar…

…y-version-and-adjust-things

feat: update ui library, abstract hover transition style, update favicon, add more hovers

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.17.0",
     "@lifi/wallet-management": "^3.4.6",
     "@lifi/widget": "^3.12.3",
     "@sentry/react": "^7.120.0",

web/src/components/CasesDisplay/Filters.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/Search.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/StatsAndFilters.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/index.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/DisputePreview/Policies.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/DisputeView/DisputeCardView.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/DisputeListView.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/DottedMenuButton.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/EvidenceCard.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/ExtraStatsDisplay.tsx

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

web/src/components/HowItWorks.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import styled from "styled-components";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import BookOpenIcon from "svgs/icons/book-open.svg";
 
 const Container = styled.div`
+  ${hoverShortTransitionTiming}
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 400;
   gap: 8px;
   cursor: pointer;
   color: ${({ theme }) => theme.primaryBlue};
-  transition: color 0.1s;
 
   svg path {
     fill: ${({ theme }) => theme.primaryBlue};
@@ -20,7 +22,6 @@ const Container = styled.div`
   &:hover {
     color: ${({ theme }) => theme.secondaryBlue};
     svg path {
-      transition: fill 0.1s;
       fill: ${({ theme }) => theme.secondaryBlue};
     }
   }

web/src/components/LatestCases.tsx

@@ -13,11 +13,11 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { Dispute_Filter } from "../graphql/graphql";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(48, 80)};
+  margin-top: ${responsiveSize(28, 48)};
 `;
 
 const Title = styled.h1`
-  margin-bottom: ${responsiveSize(16, 48)};
+  margin-bottom: ${responsiveSize(12, 24)};
 `;
 
 const DisputeContainer = styled.div`

web/src/components/LightButton.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { Button } from "@kleros/ui-components-library";
 
 const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
+  ${hoverShortTransitionTiming}
   background-color: transparent;
   padding: 8px !important;
   border-radius: 7px;
@@ -20,7 +22,6 @@ const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
     .button-svg {
       fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
     }
-    transition: background-color 0.1s;
     background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
   }
 

web/src/layout/Footer/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
 
@@ -32,6 +33,7 @@ const Container = styled.div`
 `;
 
 const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
+  ${hoverShortTransitionTiming}
   min-height: 24px;
 
   path {
@@ -40,7 +42,6 @@ const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
 
   :hover path {
     fill: ${({ theme }) => theme.white};
-    transition: fill 0.1s;
   }
 `;
 

web/src/layout/Header/Logo.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import styled, { Theme } from "styled-components";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import { Link } from "react-router-dom";
 
 import { ArbitratorTypes, getArbitratorType } from "consts/index";
@@ -29,13 +31,13 @@ const BadgeText = styled.label`
 `;
 
 const StyledKlerosCourtLogo = styled(KlerosCourtLogo)`
+  ${hoverShortTransitionTiming}
   max-height: 40px;
   width: auto;
 
   &:hover {
     path {
       fill: ${({ theme }) => theme.white}BF;
-      transition: fill 0.1s;
     }
   }
 `;

web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import { useMeasure } from "react-use";
 import { formatEther } from "viem";
 
@@ -11,8 +13,10 @@ import Gavel from "svgs/icons/gavel.svg";
 import { isUndefined } from "utils/index";
 
 const StyledCard = styled(Card)`
+  ${hoverShortTransitionTiming}
   width: 100%;
   padding: 24px;
+
   &:hover {
     cursor: pointer;
   }