feat(web): mobile view top jurors and some refactors

web/src/pages/Dashboard/WithHelpTooltip.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import { Tooltip } from "@kleros/ui-components-library";
 import _HelpIcon from "svgs/menu-icons/help.svg";
 
@@ -9,8 +10,17 @@ const Container = styled.div`
 `;
 
 const HelpIcon = styled(_HelpIcon)`
+ height: 12px;
+ width: 12px;
  fill: ${({ theme }) => theme.secondaryText};
- margin: 4px;
+ margin: 4px 4px 6px 8px;
+
+ ${landscapeStyle(
+ () => css`
+ height: 14px;
+ width: 14px;
+ `
+ )}
 `;
 
 interface IWithHelpTooltip {

web/src/pages/Home/TopJurors/Header/Coherency.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { useWindowSize } from "react-use";
+import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
+
+const Container = styled.div`
+ label {
+ font-size: 12px !important;
+ &::before {
+ content: "Votes";
+ }
+ }
+
+ ${landscapeStyle(
+ () =>
+ css`
+ display: flex;
+
+ label {
+ font-size: 14px !important;
+ &::before {
+ content: "Coherent Votes";
+ }
+ }
+ `
+ )}
+`;
+
+const coherentVotesTooltipMsg =
+ "This is the ratio of coherent votes made by a juror: " +
+ "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";
+
+const Coherency: React.FC = () => {
+ const { width } = useWindowSize();
+ return (
+ <Container>
+ <WithHelpTooltip place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}>
+ <label></label>
+ </WithHelpTooltip>
+ </Container>
+ );
+};
+export default Coherency;

web/src/pages/Home/TopJurors/Header/HowItWorks.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
+
+const Container = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ label {
+ color: ${({ theme }) => theme.primaryBlue};
+ }
+
+ svg {
+ path {
+ fill: ${({ theme }) => theme.primaryBlue};
+ }
+ }
+`;
+
+const Rewards: React.FC = () => (
+ <Container>
+ <BookOpenIcon />
+ <label> How it works </label>
+ </Container>
+);
+export default Rewards;

web/src/pages/Home/TopJurors/Header/JurorTitle.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ display: flex;
+ align-items: center;
+ width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+ gap: 36px;
+
+ label {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: ${({ theme }) => theme.secondaryText} !important;
+ }
+`;
+
+const JurorTitle: React.FC = () => (
+ <Container>
+ <label>Juror</label>
+ </Container>
+);
+export default JurorTitle;

web/src/pages/Home/TopJurors/Header/Rank.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+ label {
+ &::before {
+ content: "#";
+ }
+ }
+`;
+
+const Rank: React.FC = () => (
+ <Container>
+ <label></label>
+ </Container>
+);
+export default Rank;

web/src/pages/Home/TopJurors/Header/Rewards.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
+
+const Container = styled.div`
+ label {
+ font-size: 12px !important;
+ &::before {
+ content: "Rewards";
+ }
+ }
+
+ ${landscapeStyle(
+ () =>
+ css`
+ display: flex;
+ width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+ label {
+ font-size: 14px !important;
+ &::before {
+ content: "Total Rewards";
+ }
+ }
+ `
+ )}
+`;
+
+const totalRewardsTooltipMsg =
+ "Users have an economic interest in serving as jurors in Kleros: " +
+ "collecting the Juror Rewards in exchange for their work. Each juror who " +
+ "is coherent with the final ruling receive the Juror Rewards composed of " +
+ "arbitration fees (ETH) + PNK redistribution between jurors.";
+
+const Rewards: React.FC = () => (
+ <Container>
+ <WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
+ <label></label>
+ </WithHelpTooltip>
+ </Container>
+);
+export default Rewards;

web/src/pages/Home/TopJurors/Header/index.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import Rank from "./Rank";
+import JurorTitle from "./JurorTitle";
+import Rewards from "./Rewards";
+import Coherency from "./Coherency";
+import HowItWorks from "./HowItWorks";
+
+const Container = styled.div`
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ background-color: ${({ theme }) => theme.lightBlue};
+ padding: 24px;
+ border 1px solid ${({ theme }) => theme.stroke};
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+ border-bottom: none;
+ flex-wrap: wrap;
+
+ ${landscapeStyle(
+ () =>
+ css`
+ border-bottom: 1px solid ${({ theme }) => theme.stroke};
+ padding: 18.6px 32px;
+ `
+ )}
+`;
+
+const PlaceAndTitleAndRewardsAndCoherency = styled.div`
+ display: none;
+
+ ${landscapeStyle(
+ () =>
+ css`
+ display: flex;
+ flex-direction: row;
+ gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+ `
+ )}
+`;
+
+const StyledLabel = styled.label`
+ ${landscapeStyle(
+ () =>
+ css`
+ display: none;
+ `
+ )}
+`;
+
+const Header: React.FC = () => {
+ return (
+ <Container>
+ <StyledLabel>Ranking</StyledLabel>
+ <PlaceAndTitleAndRewardsAndCoherency>
+ <Rank />
+ <JurorTitle />
+ <Rewards />
+ <Coherency />
+ </PlaceAndTitleAndRewardsAndCoherency>
+ <HowItWorks />
+ </Container>
+ );
+};
+
+export default Header;