feat(web): show-coherency-percencentage-instead-of-ratio

Author: tractorss

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

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;