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,44 @@
+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`
+ display: flex;
+ font-size: 12px !important;
+ &::before {
+ content: "Votes";
+ }
+ color: ${({ theme }) => theme.secondaryText};
+ align-items: center;
+
+ ${landscapeStyle(
+ () =>
+ css`
+ 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}
+ ></WithHelpTooltip>
+ </Container>
+ );
+};
+export default Coherency;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { useToggle } from "react-use";
+import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg";
+import Level from "components/Popup/MiniGuides/Level";
+
+const Container = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &,
+ & * {
+ cursor: pointer;
+ }
+
+ svg {
+ path {
+ fill: ${({ theme }) => theme.primaryBlue};
+ }
+ }
+`;
+
+const StyledLabel = styled.label`
+ color: ${({ theme }) => theme.primaryBlue};
+`;
+
+const HowItWorks: React.FC = () => {
+ const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false);
+ return (
+ <>
+ <Container onClick={() => toggleIsLevelMiniGuidesOpen()}>
+ <BookOpenIcon />
+ <StyledLabel> How it works </StyledLabel>
+ </Container>
+ {isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
+ </>
+ );
+};
+
+export default HowItWorks;

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

@@ -0,0 +1,9 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledLabel = styled.label`
+ width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const JurorTitle: React.FC = () => <StyledLabel>Juror</StyledLabel>;
+export default JurorTitle;

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

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

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

@@ -0,0 +1,40 @@
+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`
+ display: flex;
+ font-size: 12px !important;
+ &::before {
+ content: "Rewards";
+ }
+ color: ${({ theme }) => theme.secondaryText};
+ align-items: center;
+
+ ${landscapeStyle(
+ () =>
+ css`
+ width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+ 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}></WithHelpTooltip>
+ </Container>
+);
+
+export default Rewards;

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

@@ -0,0 +1,69 @@
+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);
+ align-items: center;
+ `
+ )}
+`;
+
+const StyledLabel = styled.label`
+ ${landscapeStyle(
+ () =>
+ css`
+ display: none;
+ `
+ )}
+`;
+
+const Header: React.FC = () => {
+ return (
+ <Container>
+ <StyledLabel>Ranking</StyledLabel>
+ <PlaceAndTitleAndRewardsAndCoherency>
+ <Rank />
+ <JurorTitle />
+ <Rewards />
+ <Coherency />
+ </PlaceAndTitleAndRewardsAndCoherency>
+ <HowItWorks onClick={() => toggleIsLevelMiniGuidesOpen()} />
+ </Container>
+ );
+};
+
+export default Header;