feat: hover effects in case cards, anchors, bug fix in court page

Author: kemuru

web/src/components/CasesDisplay/index.tsx

@@ -7,11 +7,10 @@ import ArrowIcon from "svgs/icons/arrow.svg";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import LightButton from "../LightButton";
-
 import CasesGrid, { ICasesGrid } from "./CasesGrid";
 import Search from "./Search";
 import StatsAndFilters from "./StatsAndFilters";
+import { StyledArrowLink } from "../StyledArrowLink";
 
 const TitleContainer = styled.div`
   display: flex;
@@ -25,16 +24,6 @@ const StyledTitle = styled.h1`
   margin: 0px;
 `;
 
-const StyledButton = styled(LightButton)`
-  display: flex;
-  flex-direction: row-reverse;
-  gap: 8px;
-  > .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-  padding: 0px;
-`;
-
 interface ICasesDisplay extends ICasesGrid {
   numberDisputes?: number;
   numberClosedDisputes?: number;
@@ -59,9 +48,9 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
         {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <Link to={"/resolver"}>
-            <StyledButton text="Create a case" Icon={ArrowIcon} />
-          </Link>
+          <StyledArrowLink to={"/resolver"}>
+            Create a case <ArrowIcon />
+          </StyledArrowLink>
         ) : null}
       </TitleContainer>
       <Search />

web/src/components/DisputeView/DisputeCardView.tsx

@@ -19,6 +19,11 @@ const StyledCard = styled(Card)`
   height: 100%;
   max-height: 335px;
   min-height: 290px;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.lightGrey};
+  }
 `;
 
 const CardContainer = styled.div`
@@ -56,7 +61,7 @@ interface IDisputeCardView {
 const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) => {
   return (
     <Link to={`/cases/${props?.disputeID?.toString()}`}>
-      <StyledCard hover>
+      <StyledCard>
         <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
         <CardContainer>
           {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}

web/src/components/DisputeView/DisputeListView.tsx

@@ -18,7 +18,13 @@ const StyledListItem = styled(Card)`
   flex-grow: 1;
   width: 100%;
   height: 82px;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.lightGrey};
+  }
 `;
+
 const ListContainer = styled.div`
   display: flex;
   justify-content: space-between;
@@ -58,7 +64,7 @@ const DisputeListView: React.FC<IDisputeListView> = (props) => {
   const { isDisconnected } = useAccount();
   return (
     <Link to={`/cases/${props?.disputeID?.toString()}`}>
-      <StyledListItem hover>
+      <StyledListItem>
         <PeriodBanner isCard={false} id={parseInt(props?.disputeID ?? "0")} period={props.period} />
         <ListContainer>
           <TitleContainer isLabel={!isDisconnected}>

web/src/components/Field.tsx

@@ -62,6 +62,10 @@ const StyledLink = styled(Link)`
   color: ${({ theme }) => theme.primaryBlue};
   text-wrap: auto;
   justify-content: end;
+
+  &:hover {
+    text-decoration: underline ${({ theme }) => theme.secondaryBlue};
+  }
 `;
 
 type FieldContainerProps = {

web/src/components/StyledArrowLink.tsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+import { Link } from "react-router-dom";
+
+export const StyledArrowLink = styled(Link)`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 16px;
+
+  > svg {
+    height: 16px;
+    width: 16px;
+
+    path {
+      fill: ${({ theme }) => theme.primaryBlue};
+    }
+  }
+
+  &:hover svg path {
+    fill: ${({ theme }) => theme.secondaryBlue};
+  }
+`;

web/src/components/Verdict/FinalDecision.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import Skeleton from "react-loading-skeleton";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
@@ -19,11 +19,10 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import LightButton from "../LightButton";
-
 import AnswerDisplay from "./Answer";
 import VerdictBanner from "./VerdictBanner";
 import { Divider } from "../Divider";
+import { StyledArrowLink } from "../StyledArrowLink";
 
 const Container = styled.div`
   width: 100%;
@@ -45,16 +44,6 @@ const JuryDecisionTag = styled.small`
   color: ${({ theme }) => theme.secondaryText};
 `;
 
-const StyledButton = styled(LightButton)`
-  display: flex;
-  flex-direction: row-reverse;
-  gap: 8px;
-  > .button-text {
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-  padding-top: 0px;
-`;
-
 const StyledDivider = styled(Divider)`
   margin: ${responsiveSize(16, 32)} 0px;
 `;
@@ -73,7 +62,6 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   const ruled = disputeDetails?.dispute?.ruled ?? false;
   const periodIndex = Periods[disputeDetails?.dispute?.period ?? "evidence"];
-  const navigate = useNavigate();
   const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({
     query: { refetchInterval: REFETCH_INTERVAL },
     args: [BigInt(id ?? 0)],
@@ -108,12 +96,9 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
       {isLoading && !isDisconnected ? (
         <Skeleton width={250} height={20} />
       ) : (
-        <StyledButton
-          onClick={() => navigate(`/cases/${id?.toString()}/voting`)}
-          text={buttonText}
-          Icon={ArrowIcon}
-          className="reverse-button"
-        />
+        <StyledArrowLink to={`/cases/${id?.toString()}/voting`}>
+          {buttonText} <ArrowIcon />
+        </StyledArrowLink>
       )}
     </Container>
   );

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

@@ -95,7 +95,7 @@ const Description: React.FC = () => {
           <Route path="purpose" element={formatMarkdown(policy?.description)} />
           <Route path="skills" element={<p>{policy?.requiredSkills}</p>} />
           <Route path="policy" element={formatMarkdown(policy?.summary)} />
-          <Route path="*" element={<Navigate to="purpose" replace />} />
+          <Route path="*" element={<Navigate to={filteredTabs.length > 0 ? filteredTabs[0].path : ""} replace />} />
         </Routes>
       </TextContainer>
     </Container>

web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx

@@ -4,7 +4,8 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
-import { Link } from "react-router-dom";
+
+import { StyledArrowLink } from "components/StyledArrowLink";
 
 const Container = styled.div`
   display: flex;
@@ -20,24 +21,19 @@ const Container = styled.div`
   }
 
   ${landscapeStyle(
-    () =>
-      css`
-        justify-content: flex-start;
-        width: auto;
-      `
+    () => css`
+      justify-content: flex-start;
+      width: auto;
+    `
   )}
 `;
 
-const StyledLink = styled(Link)`
-  display: flex;
-  gap: 8px;
-  align-items: center;
+const ReStyledArrowLink = styled(StyledArrowLink)`
+  font-size: 14px;
+
   > svg {
     height: 15px;
     width: 15px;
-    path {
-      fill: ${({ theme }) => theme.primaryBlue};
-    }
   }
 `;
 
@@ -50,9 +46,9 @@ const CourtName: React.FC<ICourtName> = ({ name, id }) => {
   return (
     <Container>
       <small>{name}</small>
-      <StyledLink to={`/courts/${id?.toString()}`}>
+      <ReStyledArrowLink to={`/courts/${id?.toString()}`}>
         Open Court <ArrowIcon />
-      </StyledLink>
+      </ReStyledArrowLink>
     </Container>
   );
 };

web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

@@ -25,7 +25,7 @@ const StyledA = styled.a`
     text-decoration: underline;
     label {
       cursor: pointer;
-      color: ${({ theme }) => theme.primaryBlue};
+      color: ${({ theme }) => theme.secondaryBlue};
     }
   }
 `;

web/src/styles/global-style.ts

@@ -90,8 +90,13 @@ export const GlobalStyle = createGlobalStyle`
     font-size: 14px;
     text-decoration: none;
     color: ${({ theme }) => theme.primaryBlue};
+    transition: color 0.1s;
   }
-
+  
+  a:hover {
+    color: ${({ theme }) => theme.secondaryBlue} !important;
+  }
+  
   hr {
     opacity: 1;
     border: 1px solid ${({ theme }) => theme.stroke};