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;