refactor(web): center-top-juror-column-content

Author: tractorss

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

@@ -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

@@ -22,9 +22,9 @@ const Container = styled.div`
       css`
         display: grid;
         grid-template-columns:
-          min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875))
-          max-content auto;
-        column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+          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;
       `
   )}

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

@@ -17,6 +17,7 @@ const Container = styled.div`
     () =>
       css`
         font-size: 14px !important;
+        justify-content: center;
         &::before {
           content: "Total Rewards";
         }

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

@@ -20,9 +20,9 @@ const Container = styled.div`
     () => css`
       display: grid;
       grid-template-columns:
-        min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875))
-        min-content auto;
-      column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        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);
     `
   )}
 `;

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

@@ -1,15 +1,22 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { getFormattedRewards } from "utils/jurorRewardConfig";
 import EthIcon from "assets/svgs/icons/eth.svg";
 import PnkIcon from "assets/svgs/icons/kleros.svg";
 import { useUserQuery } from "hooks/queries/useUser";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 const Container = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
+
+  ${landscapeStyle(
+    () => css`
+      justify-content: center;
+    `
+  )}
 `;
 
 const StyledIcon = styled.div`