diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index ee08bb904..ac628edbc 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 = ({ totalCoherentVotes, totalResolvedVotes }) => { const coherenceRatio = `${totalCoherentVotes}/${totalResolvedVotes}`; - return {coherenceRatio}; + return ( + + {getPercent(totalCoherentVotes, totalResolvedVotes)} + + ); }; +const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`; + export default Coherency;