fix(web): pages horizontal paddings adjustments, vertical paddings between home components

Author: kemuru

web/src/components/DisputeCard/index.tsx

@@ -17,7 +17,7 @@ import { isUndefined } from "utils/index";
 
 const StyledCard = styled(Card)`
   width: 100%;
-  height: calc(272px + (296 - 270) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  height: calc(280px + (296 - 280) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 
   ${landscapeStyle(
     () =>

web/src/components/LatestCases.tsx

@@ -7,7 +7,7 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
-  margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  margin-top: calc(48px + (80 - 48) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
 
 const Title = styled.h1`

web/src/pages/Cases/index.tsx

@@ -7,9 +7,9 @@ import CasesFetcher from "./CasesFetcher";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(84px + (120 - 84) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Courts/index.tsx

@@ -7,9 +7,9 @@ import CourtDetails from "./CourtDetails";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(84px + (120 - 84) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Dashboard/index.tsx

@@ -14,9 +14,9 @@ import Courts from "./Courts";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: calc(32px + (136 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(84px + (120 - 84) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;

web/src/pages/Home/Community/index.tsx

@@ -6,7 +6,7 @@ import { Element } from "./Element";
 import { section } from "consts/community-elements";
 
 const Container = styled.div`
-  margin-top: 64px;
+  margin-top: calc(44px + (64 - 44) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 
   h1 {
     margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);

web/src/pages/Home/index.tsx

@@ -10,9 +10,9 @@ import { getOneYearAgoTimestamp } from "utils/date";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: calc(32px + (132 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding: calc(24px + (132 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (72 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-bottom: calc(64px + (120 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  padding-bottom: calc(84px + (120 - 84) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   max-width: 1780px;
   margin: 0 auto;
 `;