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

Author: kemuru

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/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,18 +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;

web/src/components/DisputeView/DisputeListView.tsx

@@ -9,16 +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;

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/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/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/favicon.ico

@@ -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/Footer/index.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/layout/Header/Logo.tsx

@@ -28,12 +28,7 @@ const StyledAccordion = styled(CustomAccordion)`
 
   [class*="accordion-button"] {
     padding: 11.5px ${responsiveSize(8, 18)} !important;
-    background-color: ${({ theme }) => theme.whiteBackground} !important;
-    border: 1px solid ${({ theme }) => theme.stroke} !important;
     margin: 4px 0;
-    > svg {
-      fill: ${({ theme }) => theme.primaryText} !important;
-    }
   }
 
   [class*="Body"] {

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useMemo, useEffect } from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import { useParams } from "react-router-dom";
 import { useDebounce } from "react-use";
@@ -10,8 +12,6 @@ import { commify, uncommify } from "utils/commify";
 import { formatPNK, roundNumberDown } from "utils/format";
 import { isUndefined } from "utils/index";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 import { NumberInputField } from "components/NumberInputField";
 
 import StakeWithdrawButton, { ActionType } from "./StakeWithdrawButton";
@@ -29,8 +29,13 @@ const LabelArea = styled.div`
 `;
 
 const StyledLabel = styled.label`
+  ${hoverShortTransitionTiming}
   color: ${({ theme }) => theme.primaryBlue};
   cursor: pointer;
+
+  :hover {
+    color: ${({ theme }) => theme.secondaryBlue};
+  }
 `;
 
 const InputArea = styled.div`

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -32,14 +32,6 @@ import { StyledSkeleton } from "components/StyledSkeleton";
 const StyledAccordion = styled(Accordion)`
   > * > button {
     justify-content: unset;
-    background-color: ${({ theme }) => theme.whiteBackground} !important;
-    border: 1px solid ${({ theme }) => theme.stroke} !important;
-    > svg {
-      fill: ${({ theme }) => theme.primaryText} !important;
-    }
-    > p {
-      color: ${({ theme }) => theme.primaryText};
-    }
   }
   //adds padding to body container
   > * > div > div {

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useToggle } from "react-use";
 
 import { Card, Breadcrumb } from "@kleros/ui-components-library";
@@ -94,24 +94,29 @@ const CourtDetails: React.FC = () => {
   const { data: policy } = useCourtPolicy(id);
   const { data } = useCourtTree();
   const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
+  const navigate = useNavigate();
 
   const courtPath = getCourtsPath(data?.court, id);
 
-  const items = [];
-  items.push(
-    ...(courtPath?.map((node) => ({
+  const breadcrumbItems =
+    courtPath?.map((node) => ({
       text: node.name,
       value: node.id,
-    })) ?? [])
-  );
+    })) ?? [];
 
   return (
     <Container>
       <StyledCard>
         <CourtHeader>
           <CourtInfo>
             {policy ? policy.name : <StyledSkeleton width={200} />}
-            {items.length > 1 && items[0]?.value !== 1 ? <StyledBreadcrumb items={items} /> : null}
+            {breadcrumbItems.length > 1 ? (
+              <StyledBreadcrumb
+                items={breadcrumbItems}
+                clickable
+                callback={(courtId) => navigate(`/courts/${courtId}`)}
+              />
+            ) : null}
           </CourtInfo>
           <ButtonContainer>
             {!isProductionDeployment() && <ClaimPnkButton />}

web/src/pages/Courts/CourtDetails/index.tsx

@@ -0,0 +1,21 @@
+import { css } from "styled-components";
+
+export const hoverShortTransitionTiming = css`
+  :hover {
+    transition: 0.1s;
+  }
+
+  :not(:hover) {
+    transition: 0.1s;
+  }
+`;
+
+export const hoverLongTransitionTiming = css`
+  :hover {
+    transition: 0.2s;
+  }
+
+  :not(:hover) {
+    transition: 0.2s;
+  }
+`;