feat(web): slighly different style for mobile

Author: kemuru

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

@@ -45,10 +45,10 @@ const LogoAndAddress = styled.div`
   }
 `;
 
-const TitleAndRewardsAndCoherency = styled.div`
+const PlaceAndTitleAndRewardsAndCoherency = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
 
   ${landscapeStyle(
     () =>
@@ -59,6 +59,24 @@ const TitleAndRewardsAndCoherency = styled.div`
   )}
 `;
 
+const JurorPlace = styled.div`
+  width: 100%;
+
+  label::before {
+    content: "#";
+    display: inline;
+  }
+
+  ${landscapeStyle(
+    () => css`
+      width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      label::before {
+        display: none;
+      }
+    `
+  )}
+`;
+
 const JurorTitle = styled.div`
   display: flex;
   gap: 16px;
@@ -67,7 +85,7 @@ const JurorTitle = styled.div`
 
   ${landscapeStyle(
     () => css`
-      width: calc(140px + (260 - 140) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+      width: calc(40px + (232 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       gap: 36px;
     `
   )}
@@ -86,7 +104,7 @@ const Rewards = styled.div`
   ${landscapeStyle(
     () =>
       css`
-        width: calc(80px + (180 - 80) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        width: calc(60px + (180 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       `
   )}
 `;
@@ -137,9 +155,11 @@ const JurorCard: React.FC<IJurorCard> = ({ id, address }) => {
 
   return (
     <Container id={id}>
-      <TitleAndRewardsAndCoherency>
-        <JurorTitle>
+      <PlaceAndTitleAndRewardsAndCoherency>
+        <JurorPlace>
           <label>{id}</label>
+        </JurorPlace>
+        <JurorTitle>
           <LogoAndAddress>
             <StyledIdenticonOrAvatar address={address} />
             <AddressOrName address={address} />
@@ -155,7 +175,7 @@ const JurorCard: React.FC<IJurorCard> = ({ id, address }) => {
         <Coherency>
           <label>{coherentVotes}</label>
         </Coherency>
-      </TitleAndRewardsAndCoherency>
+      </PlaceAndTitleAndRewardsAndCoherency>
       <HowItWorks>
         <label> Level {userLevelData.level}</label>
         <PixelArt width="32" height="32" level={userLevelData.level} />

web/src/pages/Home/TopJurors/TopJurorsHeader.tsx

@@ -27,10 +27,10 @@ const Container = styled.div`
   )}
 `;
 
-const TitleAndRewardsAndCoherency = styled.div`
+const PlaceAndTitleAndRewardsAndCoherency = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 
   ${landscapeStyle(
     () =>
@@ -41,6 +41,30 @@ const TitleAndRewardsAndCoherency = styled.div`
   )}
 `;
 
+const JurorPlace = styled.div`
+  width: 100%;
+
+  label {
+    &::before {
+      content: "# Rank";
+      visibility: visible;
+    }
+  }
+
+  ${landscapeStyle(
+    () =>
+      css`
+        width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+        label {
+          &::before {
+            content: "#";
+          }
+        }
+      `
+  )}
+`;
+
 const JurorTitle = styled.div`
   display: flex;
   gap: 16px;
@@ -56,7 +80,7 @@ const JurorTitle = styled.div`
   ${landscapeStyle(
     () =>
       css`
-        width: calc(160px + (260 - 160) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        width: calc(40px + (232 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
         gap: 36px;
       `
   )}
@@ -66,7 +90,7 @@ const Rewards = styled.div`
   ${landscapeStyle(
     () =>
       css`
-        width: calc(80px + (180 - 80) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+        width: calc(60px + (180 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
       `
   )}
 `;
@@ -104,9 +128,11 @@ const coherentVotesTooltipMsg =
 const TopJurorsHeader: React.FC = () => {
   return (
     <Container>
-      <TitleAndRewardsAndCoherency>
+      <PlaceAndTitleAndRewardsAndCoherency>
+        <JurorPlace>
+          <label></label>
+        </JurorPlace>
         <JurorTitle>
-          <label>#</label>
           <label>Juror</label>
         </JurorTitle>
         <Rewards>
@@ -119,7 +145,7 @@ const TopJurorsHeader: React.FC = () => {
             <label> Coherent Votes </label>
           </WithHelpTooltip>
         </Coherency>
-      </TitleAndRewardsAndCoherency>
+      </PlaceAndTitleAndRewardsAndCoherency>
       <HowItWorks>
         <BookOpenIcon />
         <label> How it works </label>