chore: adjust icons, gap in court details component

Author: kemuru

web/src/assets/svgs/icons/ethereum-vote.svg

@@ -28,22 +28,22 @@ const Container = styled.div`
 const StakingArea = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 28px;
 `;
 
 const TagArea = styled.div`
   display: flex;
   gap: 10px;
 `;
 
-const InputArea = styled(TagArea)`
-  flex-direction: column;
-`;
-
 const TextArea = styled.div`
   color: ${({ theme }) => theme.primaryText};
 `;
 
+const InputArea = styled(TagArea)`
+  flex-direction: column;
+`;
+
 const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Court" }) => {
   const [amount, setAmount] = useState("");
   const [isActive, setIsActive] = useState<boolean>(true);

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

@@ -7,7 +7,10 @@ import { useParams } from "react-router-dom";
 import { Accordion } from "@kleros/ui-components-library";
 
 import EthereumIcon from "svgs/icons/ethereum.svg";
+import EthereumVoteIcon from "svgs/icons/ethereum-vote.svg";
 import BalanceIcon from "svgs/icons/law-balance.svg";
+import BalanceWithHourglassIcon from "svgs/icons/law-balance-hourglass.svg";
+import JurorIcon from "svgs/icons/user.svg";
 import MinStake from "svgs/icons/min-stake.svg";
 import PNKIcon from "svgs/icons/pnk.svg";
 import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg";
@@ -70,7 +73,6 @@ const StyledAllTimeText = styled.p`
   color: ${({ theme }) => theme.primaryText};
   margin: 0;
   font-size: 14px;
-  font-weight: 600;
 `;
 
 const StyledChartIcon = styled(ChartIcon)`
@@ -79,6 +81,18 @@ const StyledChartIcon = styled(ChartIcon)`
   }
 `;
 
+const StyledEthereumVoteIcon = styled(EthereumVoteIcon)`
+  height: 32px !important;
+`;
+
+const StyledJurorIcon = styled(JurorIcon)`
+  height: 15px !important;
+`;
+
+const StyledBalanceWithHourglassIcon = styled(BalanceWithHourglassIcon)`
+  height: 32px !important;
+`;
+
 const AccordionContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -132,7 +146,7 @@ const stats: IStat[] = [
     },
     getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.feeForJuror)) * (coinPrice ?? 0)),
     color: "blue",
-    icon: EthereumIcon,
+    icon: StyledEthereumVoteIcon,
   },
   {
     title: "PNK Staked",
@@ -146,7 +160,7 @@ const stats: IStat[] = [
     title: "Active Jurors",
     getText: (data) => data?.numberStakedJurors,
     color: "green",
-    icon: PNKRedistributedIcon,
+    icon: StyledJurorIcon,
   },
   {
     title: "Cases",
@@ -158,10 +172,10 @@ const stats: IStat[] = [
     title: "In Progress",
     getText: (data) => data?.numberDisputes - data?.numberClosedDisputes,
     color: "green",
-    icon: BalanceIcon,
+    icon: StyledBalanceWithHourglassIcon,
   },
   {
-    title: "Total ETH paid",
+    title: "ETH paid",
     coinId: 1,
     getText: (data) => `${formatETH(data?.paidETH)} ETH`,
     getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)),