feat: mobile view restyled

Author: kemuru

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

@@ -35,7 +35,7 @@ const Coherence: React.FC = () => {
 
   return (
     <Container>
-      <WithHelpTooltip place={isDesktop ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}></WithHelpTooltip>
+      <WithHelpTooltip place={isDesktop ? "top" : "right"} tooltipMsg={coherentVotesTooltipMsg}></WithHelpTooltip>
     </Container>
   );
 };

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

@@ -33,7 +33,7 @@ const Score: React.FC = () => {
 
   return (
     <Container>
-      <WithHelpTooltip place={isDesktop ? "top" : "left"} tooltipMsg={scoreTooltipMsg}></WithHelpTooltip>
+      <WithHelpTooltip place={isDesktop ? "top" : "right"} tooltipMsg={scoreTooltipMsg}></WithHelpTooltip>
     </Container>
   );
 };

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

@@ -12,6 +12,7 @@ const Container = styled.div`
   color: ${({ theme }) => theme.primaryText};
   flex-wrap: wrap;
   justify-content: center;
+  margin-top: 2px;
 `;
 
 interface ICoherence {

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

@@ -4,6 +4,7 @@ import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 import { hoverShortTransitionTiming } from "styles/commonStyles";
 
+import HeaderScore from "../Header/Score";
 import HeaderCoherence from "../Header/Coherence";
 import HeaderRewards from "../Header/Rewards";
 
@@ -12,6 +13,7 @@ import JurorLevel from "./JurorLevel";
 import JurorTitle from "./JurorTitle";
 import Rank from "./Rank";
 import Rewards from "./Rewards";
+import Score from "./Score";
 
 const Container = styled.div`
   ${hoverShortTransitionTiming}
@@ -49,32 +51,40 @@ const TopSide = styled.div`
 const RankAndTitle = styled.div`
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: 8px;
 `;
 
-const HeaderRewardsAndRewards = styled.div`
+const BottomSide = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  justify-content: space-between;
   gap: 8px;
 `;
 
-const BottomSide = styled.div`
-  width: 100%;
+const HeaderScoreAndScore = styled.div`
   display: flex;
+  width: 100%;
   flex-direction: row;
-  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
 `;
 
 const HeaderCoherenceAndCoherence = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
   gap: 8px;
+`;
 
-  svg {
-    margin-right: 0;
-  }
+const HeaderRewardsAndRewards = styled.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
 `;
 
 interface IMobileCard {
@@ -96,20 +106,24 @@ const MobileCard: React.FC<IMobileCard> = ({
     <Container>
       <TopSide>
         <RankAndTitle>
-          {rank ? <Rank rank={rank} /> : null}
-          <JurorTitle address={address} />
+          {rank ? <Rank {...{ rank }} /> : null}
+          <JurorTitle {...{ address }} />
         </RankAndTitle>
         <JurorLevel coherenceScore={Number(coherenceScore)} />
       </TopSide>
       <BottomSide>
-        <HeaderRewardsAndRewards>
-          <HeaderRewards />
-          <Rewards address={address} />
-        </HeaderRewardsAndRewards>
+        <HeaderScoreAndScore>
+          <HeaderScore />
+          <Score {...{ coherenceScore }} />
+        </HeaderScoreAndScore>
         <HeaderCoherenceAndCoherence>
           <HeaderCoherence />
           <Coherence {...{ totalCoherentVotes, totalResolvedVotes }} />
         </HeaderCoherenceAndCoherence>
+        <HeaderRewardsAndRewards>
+          <HeaderRewards />
+          <Rewards {...{ address }} />
+        </HeaderRewardsAndRewards>
       </BottomSide>
     </Container>
   );

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

@@ -17,6 +17,7 @@ const Container = styled.div`
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
+  margin-top: 2px;
 
   ${landscapeStyle(
     () => css`

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

@@ -1,15 +1,17 @@
-import { Tooltip } from "@kleros/ui-components-library";
 import React from "react";
 
 import styled from "styled-components";
 
+import { Tooltip } from "@kleros/ui-components-library";
+
 const Container = styled.div`
   display: flex;
   align-items: center;
   font-weight: 600;
   color: ${({ theme }) => theme.primaryText};
   flex-wrap: wrap;
   justify-content: center;
+  margin-top: 2px;
 `;
 
 interface IScore {