From 04e799d287acc78c1f948d9466de4aa2bf7b2ee1 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Thu, 7 Nov 2024 16:07:33 +0530
Subject: [PATCH 1/2] feat(web): show-coherency-percencentage-instead-of-ratio

---
 web/src/pages/Home/TopJurors/Header/Coherency.tsx    | 8 +++-----
 web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx | 9 ++++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx
index ee08bb904..f79e2860f 100644
--- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx
+++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx
@@ -11,7 +11,7 @@ const Container = styled.div`
   display: flex;
   font-size: 12px !important;
   &::before {
-    content: "Votes";
+    content: "Coherency";
   }
   color: ${({ theme }) => theme.secondaryText};
   align-items: center;
@@ -21,15 +21,13 @@ const Container = styled.div`
       css`
         font-size: 14px !important;
         justify-content: center;
-        &::before {
-          content: "Coherent Votes";
-        }
       `
   )}
 `;
 
 const coherentVotesTooltipMsg =
-  "This is the ratio of coherent votes made by a juror: " +
+  "This is the percentage of coherent votes made by a juror." +
+  " Hover to see the ratio of coherent votes : " +
   "the number in the left is the number of times where the juror " +
   "voted coherently and the number in the right is the total number of times " +
   "the juror voted";
diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx
index 3a57c46a8..78bc50018 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx
@@ -1,3 +1,4 @@
+import { Tooltip } from "@kleros/ui-components-library";
 import React from "react";
 import styled from "styled-components";
 
@@ -18,7 +19,13 @@ interface ICoherency {
 const Coherency: React.FC<ICoherency> = ({ totalCoherentVotes, totalResolvedVotes }) => {
   const coherenceRatio = `${totalCoherentVotes}/${totalResolvedVotes}`;
 
-  return <Container>{coherenceRatio}</Container>;
+  return (
+    <Container>
+      <Tooltip text={coherenceRatio}>{getPercent(totalCoherentVotes, totalResolvedVotes)}</Tooltip>
+    </Container>
+  );
 };
 
+const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`;
+
 export default Coherency;

From a709812582d6dd2cc3ab97c4fd365a7e8d11209f Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:13:26 +0100
Subject: [PATCH 2/2] chore: remove space nitpick

---
 web/src/pages/Home/TopJurors/Header/Coherency.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx
index f79e2860f..ac628edbc 100644
--- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx
+++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx
@@ -27,7 +27,7 @@ const Container = styled.div`
 
 const coherentVotesTooltipMsg =
   "This is the percentage of coherent votes made by a juror." +
-  " Hover to see the ratio of coherent votes : " +
+  " Hover to see the ratio of coherent votes: " +
   "the number in the left is the number of times where the juror " +
   "voted coherently and the number in the right is the total number of times " +
   "the juror voted";