From 9921bc0499ff6a85d022febce94baf6aeb793850 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Fri, 13 Dec 2024 01:28:01 +0100
Subject: [PATCH] fix: appeal icon not showing, gap adjustments

---
 web/src/components/StyledIcons/ClosedCircleIcon.tsx    | 3 ++-
 web/src/components/Verdict/DisputeTimeline.tsx         | 7 ++++---
 web/src/pages/Courts/CourtDetails/StakePanel/index.tsx | 2 +-
 web/src/pages/Courts/CourtDetails/index.tsx            | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/components/StyledIcons/ClosedCircleIcon.tsx b/web/src/components/StyledIcons/ClosedCircleIcon.tsx
index 29b7e47a3..14bf877fe 100644
--- a/web/src/components/StyledIcons/ClosedCircleIcon.tsx
+++ b/web/src/components/StyledIcons/ClosedCircleIcon.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import ClosedCircle from "svgs/icons/close-circle.svg";
 
-const StyledClosedCircle = styled(ClosedCircle)`
+export const StyledClosedCircle = styled(ClosedCircle)`
   path {
     fill: ${({ theme }) => theme.error};
   }
@@ -11,4 +11,5 @@ const StyledClosedCircle = styled(ClosedCircle)`
 const ClosedCircleIcon: React.FC = () => {
   return <StyledClosedCircle />;
 };
+
 export default ClosedCircleIcon;
diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx
index 0947ab043..a120bf9fa 100644
--- a/web/src/components/Verdict/DisputeTimeline.tsx
+++ b/web/src/components/Verdict/DisputeTimeline.tsx
@@ -1,13 +1,14 @@
 import React, { useMemo } from "react";
 import styled, { useTheme } from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { useParams } from "react-router-dom";
 
 import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library";
 
 import CalendarIcon from "svgs/icons/calendar.svg";
 import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg";
-import AppealedCaseIcon from "svgs/icons/close-circle.svg";
 
 import { Periods } from "consts/periods";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
@@ -19,7 +20,7 @@ import { useVotingHistory } from "queries/useVotingHistory";
 
 import { ClassicRound } from "src/graphql/graphql";
 
-import { responsiveSize } from "styles/responsiveSize";
+import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon";
 
 const Container = styled.div`
   display: flex;
@@ -101,7 +102,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
               party: "",
               subtitle: formatDate(roundTimeline?.[Periods.appeal]),
               rightSided: true,
-              Icon: AppealedCaseIcon,
+              Icon: StyledClosedCircle,
             });
           } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) {
             acc.push({
diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
index 74c2f0a6b..4d676c362 100644
--- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx
@@ -28,7 +28,7 @@ const Container = styled.div`
 const StakingArea = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 28px;
+  gap: 24px;
 `;
 
 const TagArea = styled.div`
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
index 397954a4d..e255cb103 100644
--- a/web/src/pages/Courts/CourtDetails/index.tsx
+++ b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -32,7 +32,7 @@ const CourtHeader = styled.h1`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  gap: 24px;
+  gap: 8px;
   flex-wrap: wrap;
   margin-bottom: 16px;
 `;