Refactor(web)/top juror component refactor

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/JurorInfo/Coherency.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/JurorRewards.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/StakingRewards.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/Home/TopJurors/Header/Coherency.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/DesktopHeader.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/MobileHeader.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>
+  );
+};

web/src/pages/Home/TopJurors/Header/Rewards.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;
@@ -16,9 +16,8 @@ const Container = styled.div`
   ${landscapeStyle(
     () =>
       css`
-        width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-
         font-size: 14px !important;
+        justify-content: center;
         &::before {
           content: "Total Rewards";
         }

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

@@ -1,76 +1,13 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { landscapeStyle } from "styles/landscapeStyle";
-import { useToggle } from "react-use";
-import Rank from "./Rank";
-import JurorTitle from "./JurorTitle";
-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: 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;
-      `
-  )}
-`;
+import { MobileHeader } from "./MobileHeader";
+import { DesktopHeader } from "./DesktopHeader";
 
 const Header: React.FC = () => {
-  const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
-
   return (
-    <Container>
-      <StyledLabel>Ranking</StyledLabel>
-      <PlaceAndTitleAndRewardsAndCoherency>
-        <Rank />
-        <JurorTitle />
-        <Rewards />
-        <Coherency />
-      </PlaceAndTitleAndRewardsAndCoherency>
-      <HowItWorks
-        isMiniGuideOpen={isJurorLevelsMiniGuideOpen}
-        toggleMiniGuide={toggleJurorLevelsMiniGuide}
-        MiniGuideComponent={JurorLevels}
-      />
-    </Container>
+    <>
+      <MobileHeader />
+      <DesktopHeader />
+    </>
   );
 };
 

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

@@ -7,6 +7,7 @@ const Container = styled.div`
   font-weight: 600;
   color: ${({ theme }) => theme.primaryText};
   flex-wrap: wrap;
+  justify-content: center;
 `;
 
 interface ICoherency {

web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx

@@ -5,37 +5,28 @@ import Rank from "./Rank";
 import JurorTitle from "./JurorTitle";
 import Rewards from "./Rewards";
 import Coherency from "./Coherency";
-import HowItWorks from "./HowItWorks";
+import JurorLevel from "./JurorLevel";
 
 const Container = styled.div`
   display: none;
-
-  justify-content: space-between;
-  flex-wrap: wrap;
   width: 100%;
   background-color: ${({ theme }) => theme.whiteBackground};
   border: 1px solid ${({ theme }) => theme.stroke};
   border-top: none;
   align-items: center;
   padding: 15.55px 32px;
 
-  label {
-    font-size: 16px;
-  }
-
   ${landscapeStyle(
     () => css`
-      display: flex;
+      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);
     `
   )}
 `;
 
-const PlaceAndTitleAndRewardsAndCoherency = styled.div`
-  display: flex;
-  flex-direction: row;
-  gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-`;
-
 interface IDesktopCard {
   rank: number;
   address: string;
@@ -53,13 +44,11 @@ const DesktopCard: React.FC<IDesktopCard> = ({
 }) => {
   return (
     <Container>
-      <PlaceAndTitleAndRewardsAndCoherency>
-        <Rank rank={rank} />
-        <JurorTitle address={address} />
-        <Rewards address={address} />
-        <Coherency totalCoherent={totalCoherent} totalResolvedDisputes={totalResolvedDisputes} />
-      </PlaceAndTitleAndRewardsAndCoherency>
-      <HowItWorks coherenceScore={coherenceScore} />
+      <Rank rank={rank} />
+      <JurorTitle address={address} />
+      <Rewards address={address} />
+      <Coherency totalCoherent={totalCoherent} totalResolvedDisputes={totalResolvedDisputes} />
+      <JurorLevel coherenceScore={coherenceScore} />
     </Container>
   );
 };

web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx → web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx

@@ -12,6 +12,7 @@ const Container = styled.div`
   ${landscapeStyle(
     () => css`
       gap: 16px;
+      justify-content: end;
     `
   )}
 `;
@@ -34,11 +35,11 @@ const StyledLabel = styled.label`
   )}
 `;
 
-interface IHowItWorks {
+interface IJurorLevel {
   coherenceScore: number;
 }
 
-const HowItWorks: React.FC<IHowItWorks> = ({ coherenceScore }) => {
+const JurorLevel: React.FC<IJurorLevel> = ({ coherenceScore }) => {
   const userLevelData = getUserLevelData(coherenceScore);
   const level = userLevelData.level;
 
@@ -49,4 +50,4 @@ const HowItWorks: React.FC<IHowItWorks> = ({ coherenceScore }) => {
     </Container>
   );
 };
-export default HowItWorks;
+export default JurorLevel;