feat: new court page design, indicators refactor, court tabs bug fix, statdisplay refactor, appeal tab refactor, add new kleros logo

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

@@ -17,7 +17,7 @@ const LabelContainer = styled.div<{ backgroundColor: string }>`
   width: max-content;
   padding: 4px 8px;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   border-radius: 300px;
   background-color: ${({ backgroundColor }) => backgroundColor};
 `;

web/src/components/Verdict/FinalDecision.tsx

@@ -15,13 +15,14 @@ import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useVotingHistory } from "hooks/queries/useVotingHistory";
 import { useVotingContext } from "hooks/useVotingContext";
 import { getLocalRounds } from "utils/getLocalRounds";
+import { isUndefined } from "utils/index";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import { responsiveSize } from "styles/responsiveSize";
 
+import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
 import AnswerDisplay from "./Answer";
-import VerdictBanner from "./VerdictBanner";
 import { Divider } from "../Divider";
 import { StyledArrowLink } from "../StyledArrowLink";
 
@@ -90,6 +91,8 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   });
   const currentRuling = Number(currentRulingArray?.[0]);
   const answer = populatedDisputeData?.answers?.[currentRuling! - 1];
+  const rounds = votingHistory?.dispute?.rounds;
+  const jurorRewardsDispersed = useMemo(() => Boolean(rounds?.every((round) => round.jurorRewardsDispersed)), [rounds]);
   const buttonText = useMemo(() => {
     if (!wasDrawn || isDisconnected) return "Check how the jury voted";
     if (isCommitPeriod && !commited) return "Commit your vote";
@@ -101,7 +104,12 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
   return (
     <Container>
       <VerdictContainer>
-        <VerdictBanner ruled={ruled} />
+        {!isUndefined(Boolean(disputeDetails?.dispute?.ruled)) || jurorRewardsDispersed ? (
+          <RulingAndRewardsIndicators
+            ruled={Boolean(disputeDetails?.dispute?.ruled)}
+            jurorRewardsDispersed={jurorRewardsDispersed}
+          />
+        ) : null}
         {ruled && (
           <JuryContainer>
             <JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>

web/src/pages/Cases/CaseDetails/Voting/RulingAndRewardsIndicators.tsx → web/src/components/Verdict/RulingAndRewardsIndicators.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import CheckCircle from "svgs/icons/check-circle-outline.svg";
+import Hourglass from "svgs/icons/hourglass.svg";
 import Coins from "svgs/icons/pile-coins.svg";
 
 import Label from "components/DisputeView/CardLabels/Label";
@@ -19,7 +20,11 @@ interface IRulingAndRewardsIndicators {
 
 const RulingAndRewardsIndicators: React.FC<IRulingAndRewardsIndicators> = ({ jurorRewardsDispersed, ruled }) => (
   <Container>
-    {ruled ? <Label icon={CheckCircle} text="Ruling executed" color="green" /> : null}
+    {ruled ? (
+      <Label icon={CheckCircle} text="Case closed" color="green" />
+    ) : (
+      <Label icon={Hourglass} text="Case in progress" color="blue" />
+    )}
     {jurorRewardsDispersed ? <Label icon={Coins} text="Juror rewards distributed" color="green" /> : null}
   </Container>
 );

web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

@@ -22,7 +22,6 @@ import HowItWorks from "components/HowItWorks";
 import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting";
 
 import PendingVotesBox from "./PendingVotesBox";
-import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
 import VotesAccordion from "./VotesDetails";
 
 const Container = styled.div`
@@ -80,16 +79,8 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
     [votingHistory, currentTab]
   );
 
-  const jurorRewardsDispersed = useMemo(() => Boolean(rounds?.every((round) => round.jurorRewardsDispersed)), [rounds]);
-
   return (
     <Container>
-      {Boolean(disputeData?.dispute?.ruled) || jurorRewardsDispersed ? (
-        <RulingAndRewardsIndicators
-          ruled={Boolean(disputeData?.dispute?.ruled)}
-          jurorRewardsDispersed={jurorRewardsDispersed}
-        />
-      ) : null}
       <Header>
         <StyledTitle>Voting History</StyledTitle>
         <HowItWorks