Merge branch 'feat(web)/mobile-view-top-jurors-and-some-refactors' of github.com:kleros/kleros-v2 into feat(web)/mobile-view-top-jurors-and-some-refactors

Author: jaybuidl

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

@@ -5,23 +5,20 @@ import { useWindowSize } from "react-use";
 import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
 
 const Container = styled.div`
-  label {
-    font-size: 12px !important;
-    &::before {
-      content: "Votes";
-    }
+  display: flex;
+  font-size: 12px !important;
+  &::before {
+    content: "Votes";
   }
+  color: ${({ theme }) => theme.secondaryText};
+  align-items: center;
 
   ${landscapeStyle(
     () =>
       css`
-        display: flex;
-
-        label {
-          font-size: 14px !important;
-          &::before {
-            content: "Coherent Votes";
-          }
+        font-size: 14px !important;
+        &::before {
+          content: "Coherent Votes";
         }
       `
   )}
@@ -37,9 +34,10 @@ const Coherency: React.FC = () => {
   const { width } = useWindowSize();
   return (
     <Container>
-      <WithHelpTooltip place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}>
-        <label></label>
-      </WithHelpTooltip>
+      <WithHelpTooltip
+        place={width > BREAKPOINT_LANDSCAPE ? "top" : "left"}
+        tooltipMsg={coherentVotesTooltipMsg}
+      ></WithHelpTooltip>
     </Container>
   );
 };

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

@@ -14,24 +14,24 @@ const Container = styled.div`
     cursor: pointer;
   }
 
-  label {
-    color: ${({ theme }) => theme.primaryBlue};
-  }
-
   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 />
-        <label> How it works </label>
+        <StyledLabel> How it works </StyledLabel>
       </Container>
       {isLevelMiniGuidesOpen && <Level {...{ toggleIsLevelMiniGuidesOpen }} />}
     </>

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

@@ -1,23 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-const Container = styled.div`
-  display: flex;
-  align-items: center;
+const StyledLabel = styled.label`
   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>
-);
+const JurorTitle: React.FC = () => <StyledLabel>Juror</StyledLabel>;
 export default JurorTitle;

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

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

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

@@ -4,24 +4,22 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip";
 
 const Container = styled.div`
-  label {
-    font-size: 12px !important;
-    &::before {
-      content: "Rewards";
-    }
+  display: flex;
+  font-size: 12px !important;
+  &::before {
+    content: "Rewards";
   }
+  color: ${({ theme }) => theme.secondaryText};
+  align-items: center;
 
   ${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";
-          }
+        font-size: 14px !important;
+        &::before {
+          content: "Total Rewards";
         }
       `
   )}
@@ -35,9 +33,8 @@ const totalRewardsTooltipMsg =
 
 const Rewards: React.FC = () => (
   <Container>
-    <WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}>
-      <label></label>
-    </WithHelpTooltip>
+    <WithHelpTooltip place="top" tooltipMsg={totalRewardsTooltipMsg}></WithHelpTooltip>
   </Container>
 );
+
 export default Rewards;

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

@@ -37,6 +37,7 @@ const PlaceAndTitleAndRewardsAndCoherency = styled.div`
         display: flex;
         flex-direction: row;
         gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        align-items: center;
       `
   )}
 `;

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

@@ -4,10 +4,8 @@ import styled from "styled-components";
 const Container = styled.div`
   display: flex;
   align-items: center;
-  label {
-    font-weight: 600;
-    color: ${({ theme }) => theme.primaryText};
-  }
+  font-weight: 600;
+  color: ${({ theme }) => theme.primaryText};
   flex-wrap: wrap;
 `;
 
@@ -19,10 +17,7 @@ interface ICoherency {
 const Coherency: React.FC<ICoherency> = ({ totalCoherent, totalResolvedDisputes }) => {
   const coherenceRatio = `${totalCoherent}/${totalResolvedDisputes}`;
 
-  return (
-    <Container>
-      <label>{coherenceRatio}</label>
-    </Container>
-  );
+  return <Container>{coherenceRatio}</Container>;
 };
+
 export default Coherency;

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

@@ -9,23 +9,26 @@ const Container = styled.div`
   align-items: center;
   gap: 8px;
 
-  label {
-    font-size: 12px !important;
+  ${landscapeStyle(
+    () => css`
+      gap: 16px;
+    `
+  )}
+`;
 
-    &::before {
-      content: "Lv. ";
-    }
+const StyledLabel = styled.label`
+  font-size: 12px !important;
+
+  &::before {
+    content: "Lv. ";
   }
 
   ${landscapeStyle(
     () => css`
-      gap: 16px;
-      label {
-        font-size: 16px !important;
+      font-size: 16px !important;
 
-        &::before {
-          content: "Level ";
-        }
+      &::before {
+        content: "Level ";
       }
     `
   )}
@@ -41,7 +44,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ coherenceScore }) => {
 
   return (
     <Container>
-      <label>{level}</label>
+      <StyledLabel>{level}</StyledLabel>
       <PixelArt width="32px" height="32px" level={level} />
     </Container>
   );

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

@@ -8,6 +8,10 @@ const Container = styled.div`
   gap: 8px;
   align-items: center;
 
+  label {
+    font-size: 16px;
+  }
+
   canvas {
     width: 20px;
     height: 20px;

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

@@ -21,10 +21,6 @@ const Container = styled.div`
   align-items: center;
   gap: 20px;
 
-  label {
-    font-size: 16px;
-  }
-
   ${landscapeStyle(
     () => css`
       display: none;