fix: appeal icon not showing, gap adjustments

Author: kemuru

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;

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({

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`

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;
 `;