Merge pull request #1343 from kleros/refactor(web)/top-juror-component-refactor

Refactor(web)/top juror component refactor

Author: alcercu

web/src/components/CasesDisplay/CasesListHeader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
-import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
 const Container = styled.div`
   display: flex;

web/src/pages/Dashboard/WithHelpTooltip.tsx renamed to web/src/components/WithHelpTooltip.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { CircularProgress } from "@kleros/ui-components-library";
-import WithHelpTooltip from "../WithHelpTooltip";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
 const Container = styled.div`
   display: flex;

web/src/pages/Dashboard/JurorInfo/Coherency.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { useAccount } from "wagmi";
 import TokenRewards from "./TokenRewards";
-import WithHelpTooltip from "../WithHelpTooltip";
+import WithHelpTooltip from "components/WithHelpTooltip";
 import { getFormattedRewards } from "utils/jurorRewardConfig";
 import { CoinIds } from "consts/coingecko";
 import { useUserQuery } from "queries/useUser";

web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { Box as _Box, Button } from "@kleros/ui-components-library";
 import TokenRewards from "./TokenRewards";
-import WithHelpTooltip from "../WithHelpTooltip";
+import WithHelpTooltip from "components/WithHelpTooltip";
 import { EnsureChain } from "components/EnsureChain";
 
 const Container = styled.div`

web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx

@@ -2,7 +2,7 @@ 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";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
 const Container = styled.div`
   display: flex;
@@ -17,6 +17,7 @@ const Container = styled.div`
     () =>
       css`
         font-size: 14px !important;
+        justify-content: center;
         &::before {
           content: "Coherent Votes";
         }

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

@@ -0,0 +1,60 @@
+import React from "react";
+import { useToggle } from "react-use";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import Rewards from "./Rewards";
+import Coherency from "./Coherency";
+import HowItWorks from "components/HowItWorks";
+import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
+
+const Container = styled.div`
+  display: none;
+  width: 100%;
+  background-color: ${({ theme }) => theme.lightBlue};
+  border 1px solid ${({ theme }) => theme.stroke};
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border-bottom: 1px solid ${({ theme }) => theme.stroke};
+  padding: 18.6px 32px;
+
+  ${landscapeStyle(
+    () =>
+      css`
+        display: grid;
+        grid-template-columns:
+          min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350))
+          auto;
+        column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350);
+        align-items: center;
+      `
+  )}
+`;
+
+const StyledLabel = styled.label`
+  font-size: 16px;
+`;
+
+const HowItWorksContainer = styled.div`
+  display: flex;
+  justify-content: end;
+`;
+
+export const DesktopHeader: React.FC = () => {
+  const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
+
+  return (
+    <Container>
+      <StyledLabel>#</StyledLabel>
+      <StyledLabel>Juror</StyledLabel>
+      <Rewards />
+      <Coherency />
+      <HowItWorksContainer>
+        <HowItWorks
+          isMiniGuideOpen={isJurorLevelsMiniGuideOpen}
+          toggleMiniGuide={toggleJurorLevelsMiniGuide}
+          MiniGuideComponent={JurorLevels}
+        />
+      </HowItWorksContainer>
+    </Container>
+  );
+};

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { useToggle } from "react-use";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import HowItWorks from "components/HowItWorks";
+import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
+
+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`
+      display: none;
+    `
+  )}
+`;
+
+const StyledLabel = styled.label`
+  font-size: 16px;
+`;
+
+export const MobileHeader: React.FC = () => {
+  const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
+  return (
+    <Container>
+      <StyledLabel>Ranking</StyledLabel>
+      <HowItWorks
+        isMiniGuideOpen={isJurorLevelsMiniGuideOpen}
+        toggleMiniGuide={toggleJurorLevelsMiniGuide}
+        MiniGuideComponent={JurorLevels}
+      />
+    </Container>
+  );
+};