chore: adjust hover effect in card

Author: kemuru

web/src/components/DisputeView/DisputeCardView.tsx

@@ -21,10 +21,6 @@ const StyledCard = styled(Card)`
   height: 100%;
   max-height: 335px;
   min-height: 290px;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.lightGrey}BB;
-  }
 `;
 
 const CardContainer = styled.div`
@@ -62,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

@@ -20,10 +20,6 @@ const StyledListItem = styled(Card)`
   flex-grow: 1;
   width: 100%;
   height: 82px;
-
-  &:hover {
-    background-color: ${({ theme }) => theme.lightGrey}BB;
-  }
 `;
 
 const ListContainer = styled.div`
@@ -65,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/pages/Cases/CaseDetails/Appeal/OptionCard.tsx

@@ -18,9 +18,7 @@ const StyledCard = styled(Card)`
   padding: 24px;
 
   &:hover {
-    background-color: ${({ theme }) => theme.lightGrey}BB;
     cursor: pointer;
-    box-shadow: none;
   }
 `;