Merge pull request #1809 from kleros/feat/ui-improvements

fix: better mobile margins, more hovers, cosmetic changes, slight bug…

Author: alcercu

web/src/assets/svgs/icons/law-balance.svg

@@ -1,14 +1,14 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import PaperclipIcon from "svgs/icons/paperclip.svg";
 import PolicyIcon from "svgs/icons/policy.svg";
 
 import { getIpfsUrl } from "utils/getIpfsUrl";
 import { isUndefined } from "utils/index";
 
-import { responsiveSize } from "styles/responsiveSize";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { InternalLink } from "components/InternalLink";
 
@@ -17,9 +17,15 @@ const Container = styled.div`
   align-items: center;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 8px 16px;
-  padding: ${responsiveSize(12, 20)} ${responsiveSize(8, 32)};
+  gap: 12px 16px;
+  padding: 12px 16px 20px;
   background-color: ${({ theme }) => theme.mediumBlue};
+
+  ${landscapeStyle(
+    () => css`
+      padding: 20px 32px;
+    `
+  )}
 `;
 
 const StyledP = styled.p`

web/src/components/DisputePreview/Policies.tsx

@@ -30,7 +30,7 @@ const Container = styled.div<{ isList: boolean }>`
   ${({ isList }) =>
     !isList &&
     css`
-      margin-top: 16px;
+      margin-top: 24px;
       width: 100%;
       flex-wrap: wrap;
       flex-direction: row;

web/src/components/DisputeView/CardLabels/index.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { Link } from "react-router-dom";
 
 import { Card } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
 
-import { responsiveSize } from "styles/responsiveSize";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 
@@ -19,26 +19,36 @@ const StyledCard = styled(Card)`
   ${hoverShortTransitionTiming}
   width: 100%;
   height: 100%;
-  max-height: 335px;
   min-height: 290px;
 `;
 
 const CardContainer = styled.div`
   height: calc(100% - 45px);
-  padding: ${responsiveSize(20, 24)} ${responsiveSize(8, 24)};
+  padding: 20px 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 20px 24px;
+    `
+  )}
+`;
+
+const StyledCaseCardTitle = styled.h3`
+  margin-bottom: 20px;
 `;
 
 const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)`
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 `;
 
 const TruncatedTitle = ({ text, maxLength }) => {
   const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…";
-  return <h3>{truncatedText}</h3>;
+  return <StyledCaseCardTitle>{truncatedText}</StyledCaseCardTitle>;
 };
+
 interface IDisputeCardView {
   title: string;
   disputeID?: string;

web/src/components/DisputeView/DisputeCardView.tsx

@@ -12,7 +12,6 @@ import { FieldItem, IDisputeInfo } from "./index";
 const Container = styled.div`
   display: flex;
   width: 100%;
-  gap: 8px;
   flex-direction: column;
   justify-content: flex-end;
 `;

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -4,6 +4,7 @@ import styled, { Theme, css, useTheme } from "styled-components";
 import { Periods } from "consts/periods";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 interface IContainer {
   isCard: boolean;
@@ -20,14 +21,20 @@ const Container = styled.div<IContainer>`
   align-items: center;
   gap: 8px;
   justify-content: space-between;
-  padding: 0 ${({ isCard }) => (isCard ? responsiveSize(8, 24) : responsiveSize(8, 24, 900))};
+  padding: 0 ${({ isCard }) => (isCard ? "16px" : "24px")};
   flex-shrink: 0;
   ${({ frontColor, backgroundColor, isCard }) => {
     return `
       ${isCard ? `border-top: 5px solid ${frontColor}` : `border-left: 5px solid ${frontColor}`};
       ${isCard && `background-color: ${backgroundColor};`};
     `;
   }};
+
+  ${landscapeStyle(
+    () => css`
+      padding: 0 24px;
+    `
+  )}
 `;
 
 const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard?: boolean }>`

web/src/components/DisputeView/PeriodBanner.tsx

@@ -30,7 +30,7 @@ const StyledCard = styled(Card)`
 const TopContent = styled.div`
   display: flex;
   flex-direction: column;
-  padding: ${responsiveSize(8, 20)} ${responsiveSize(8, 24)};
+  padding: 16px;
   gap: 4px;
   overflow-wrap: break-word;
 
@@ -45,6 +45,12 @@ const TopContent = styled.div`
     display: inline-block;
     margin: 0;
   }
+
+  ${landscapeStyle(
+    () => css`
+      padding: 20px 24px;
+    `
+  )}
 `;
 
 const IndexAndName = styled.div`
@@ -72,16 +78,23 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
 
 const BottomShade = styled.div`
   background-color: ${({ theme }) => theme.lightBlue};
+  border-top: 1px solid ${({ theme }) => theme.stroke};
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: 12px ${responsiveSize(8, 24)};
+  padding: 16px;
   > * {
     flex-basis: 1;
     flex-shrink: 0;
     margin: 0;
   }
+
+  ${landscapeStyle(
+    () => css`
+      padding: 16px 24px;
+    `
+  )}
 `;
 
 const BottomLeftContent = styled.div`

web/src/components/EvidenceCard.tsx

@@ -9,6 +9,7 @@ import { isUndefined } from "utils/index";
 import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
 
 import { responsiveSize } from "styles/responsiveSize";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
 
 import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
@@ -18,7 +19,7 @@ const Container = styled.div`
 `;
 
 const Title = styled.h1`
-  margin-bottom: 4px;
+  margin: 0;
   font-size: ${responsiveSize(20, 24)};
 `;
 
@@ -30,11 +31,20 @@ const DisputeContainer = styled.div`
   gap: var(--gap);
 `;
 
+const TitleAndClearLabel = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: ${responsiveSize(12, 24)};
+`;
+
 const StyledLabel = styled.label`
-  display: block;
+  ${hoverShortTransitionTiming}
   color: ${({ theme }) => theme.primaryBlue};
   cursor: pointer;
-  margin-bottom: ${responsiveSize(12, 16)};
+  margin-top: 6px;
+
   :hover {
     color: ${({ theme }) => theme.secondaryBlue};
   }
@@ -61,8 +71,10 @@ const FavoriteCases: React.FC = () => {
 
   return starredCaseIds.length > 0 && (isUndefined(disputes) || disputes.length > 0) ? (
     <Container>
-      <Title>Favorite Cases</Title>
-      <StyledLabel onClick={clearAll}>Clear all</StyledLabel>
+      <TitleAndClearLabel>
+        <Title>Favorite Cases</Title>
+        <StyledLabel onClick={clearAll}>Clear all</StyledLabel>
+      </TitleAndClearLabel>
       <DisputeContainer>
         {isUndefined(disputes)
           ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)

web/src/components/FavoriteCases.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import Skeleton from "react-loading-skeleton";
 import { useParams } from "react-router-dom";
@@ -19,7 +19,7 @@ import { isUndefined } from "utils/index";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import { responsiveSize } from "styles/responsiveSize";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
 import AnswerDisplay from "./Answer";
@@ -35,7 +35,7 @@ const JuryContainer = styled.div`
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
-  gap: 4px 7px;
+  gap: 5px 7px;
 
   h3 {
     line-height: 21px;
@@ -48,7 +48,7 @@ const VerdictContainer = styled.div`
   flex-direction: row;
   align-items: center;
   flex-wrap: wrap;
-  gap: ${responsiveSize(6, 8)};
+  gap: 8px;
 `;
 
 const JuryDecisionTag = styled.small`
@@ -57,7 +57,13 @@ const JuryDecisionTag = styled.small`
 `;
 
 const StyledDivider = styled(Divider)`
-  margin: ${responsiveSize(16, 24)} 0px;
+  margin: 16px 0px;
+
+  ${landscapeStyle(
+    () => css`
+      margin: 24px 0px;
+    `
+  )}
 `;
 
 const ReStyledArrowLink = styled(StyledArrowLink)`

web/src/components/Verdict/FinalDecision.tsx

@@ -12,22 +12,22 @@ import LightButton from "components/LightButton";
 import { ExternalLink } from "components/ExternalLink";
 
 const Container = styled.div`
-  height: 122px;
+  height: 114px;
   width: 100%;
   background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0 32px 8px 32px;
-  gap: 24px;
+  padding: 8px;
+  gap: 16px;
 
   ${landscapeStyle(
     () => css`
       height: 64px;
       flex-direction: row;
       justify-content: space-between;
-      padding-bottom: 0;
+      padding: 0 32px;
     `
   )}
 `;

web/src/layout/Footer/index.tsx

@@ -34,7 +34,7 @@ const StyledPaperClip = styled(PaperClip)`
   width: ${responsiveSize(16, 24)};
   height: ${responsiveSize(16, 24)};
   path {
-    fill: ${({ theme }) => theme.primaryPurple};
+    fill: ${({ theme }) => theme.secondaryPurple}B0;
   }
 `;
 

web/src/pages/Cases/AttachmentDisplay/Header.tsx

@@ -1,26 +1,32 @@
 import React, { useMemo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
-import { responsiveSize } from "styles/responsiveSize";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { landscapeStyle } from "styles/landscapeStyle";
+
+import { Card, Radio, LinearProgress } from "@kleros/ui-components-library";
 
 import { useMeasure } from "react-use";
 import { formatEther } from "viem";
 
-import { Card, Radio, LinearProgress } from "@kleros/ui-components-library";
+import { isUndefined } from "utils/index";
 
 import Gavel from "svgs/icons/gavel.svg";
 
-import { isUndefined } from "utils/index";
-
-const StyledCard = styled(Card)`
+const StyledCard = styled(Card)<{ canBeSelected: boolean }>`
   ${hoverShortTransitionTiming}
   width: 100%;
-  padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)};
+  padding: 16px;
 
-  &:hover {
-    cursor: pointer;
+  :hover {
+    cursor: ${({ canBeSelected }) => (canBeSelected ? "pointer" : "auto")};
   }
+
+  ${landscapeStyle(
+    () => css`
+      padding: 24px;
+    `
+  )}
 `;
 
 const WinnerLabel = styled.label<{ winner: boolean }>`
@@ -97,8 +103,9 @@ const OptionCard: React.FC<IOptionCard> = ({
     else if (funding > 0n) return [`Funded with ${formatEther(funding)} ETH.`, 30];
     else return ["0 ETH contributed to this option", 0];
   }, [funding, required]);
+
   return (
-    <StyledCard ref={ref} hover {...props}>
+    <StyledCard hover {...props} {...{ canBeSelected, ref }}>
       <TopContainer>
         <TextContainer>
           <BlockLabel>{text}</BlockLabel>

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

@@ -13,7 +13,13 @@ import AppealHistory from "./AppealHistory";
 import Classic from "./Classic";
 
 const Container = styled.div`
-  padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)};
+  padding: 16px;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 32px;
+    `
+  )}
 `;
 
 export const AppealHeader = styled.div`