feat: destroying margins, update ui component library

Author: kemuru

web/package.json

@@ -81,7 +81,7 @@
     "@kleros/kleros-app": "^2.0.1",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^2.16.0",
+    "@kleros/ui-components-library": "^2.17.0",
     "@lifi/wallet-management": "^3.4.6",
     "@lifi/widget": "^3.12.3",
     "@sentry/react": "^7.120.0",

web/src/components/CasesDisplay/Search.tsx

@@ -18,14 +18,12 @@ import { responsiveSize } from "styles/responsiveSize";
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: ${responsiveSize(8, 16)};
 
   ${landscapeStyle(
-    () =>
-      css`
-        flex-direction: row;
-        gap: ${responsiveSize(4, 22)};
-      `
+    () => css`
+      flex-direction: row;
+    `
   )}
 `;
 

web/src/components/CasesDisplay/StatsAndFilters.tsx

@@ -1,15 +1,17 @@
 import React from "react";
 import styled from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import Filters from "./Filters";
 import Stats, { IStats } from "./Stats";
 
 const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 11px;
-  margin-bottom: 48px;
+  margin-top: ${responsiveSize(4, 8)};
+  margin-bottom: ${responsiveSize(16, 32)};
   justify-content: space-between;
 `;
 

web/src/components/CasesDisplay/index.tsx

@@ -17,7 +17,7 @@ const TitleContainer = styled.div`
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
-  margin-bottom: ${responsiveSize(32, 48)};
+  margin-bottom: ${responsiveSize(12, 24)};
 `;
 
 const StyledTitle = styled.h1`

web/src/components/ExtraStatsDisplay.tsx

@@ -9,7 +9,6 @@ const Container = styled.div`
   display: flex;
   gap: 8px;
   align-items: center;
-  margin-top: 24px;
 `;
 
 const SVGContainer = styled.div`

web/src/components/LatestCases.tsx

@@ -13,11 +13,11 @@ import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { Dispute_Filter } from "../graphql/graphql";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(48, 80)};
+  margin-top: ${responsiveSize(28, 48)};
 `;
 
 const Title = styled.h1`
-  margin-bottom: ${responsiveSize(16, 48)};
+  margin-bottom: ${responsiveSize(12, 24)};
 `;
 
 const DisputeContainer = styled.div`

web/src/pages/Cases/CaseDetails/Tabs.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useMemo } from "react";
 import styled from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 import { Tabs as TabsComponent } from "@kleros/ui-components-library";
@@ -20,6 +22,7 @@ import { useAppealCost } from "queries/useAppealCost";
 
 const StyledTabs = styled(TabsComponent)`
   width: 100%;
+  margin-top: ${responsiveSize(12, 24)};
   > * {
     display: flex;
     flex-wrap: wrap;

web/src/pages/Cases/CaseDetails/Timeline.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
+import { landscapeStyle } from "styles/landscapeStyle";
+
 import { Box, Steps } from "@kleros/ui-components-library";
 
 import { Periods } from "consts/periods";
@@ -10,34 +12,26 @@ import { secondsToDayHourMinute } from "utils/date";
 
 import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 const TimeLineContainer = styled(Box)`
-  display: block;
   width: 100%;
-  height: 98px;
+  height: auto;
   border-radius: 0px;
-  padding: ${responsiveSize(16, 48)} 8px 0px ${responsiveSize(12, 22)};
-  margin-top: ${responsiveSize(16, 48)};
-  margin-bottom: ${responsiveSize(12, 22)};
-  background-color: ${({ theme }) => theme.whiteBackground};
-
-  ${landscapeStyle(
-    () => css`
-      display: block;
-      padding: 28px 8px 8px 8px;
-    `
-  )}
+  background-color: transparent;
 `;
 
 const StyledSteps = styled(Steps)`
   display: flex;
   justify-content: space-between;
-  width: 85%;
+  width: 89%;
   margin: auto;
+
+  ${landscapeStyle(
+    () => css`
+      width: 98%;
+    `
+  )}
 `;
 
 const Timeline: React.FC<{

web/src/pages/Cases/CaseDetails/index.tsx

@@ -33,7 +33,8 @@ const HeaderContainer = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  margin-bottom: ${responsiveSize(32, 54)};
+  margin-top: -2px;
+  margin-bottom: ${responsiveSize(16, 24)};
 `;
 
 const Header = styled.h1`
@@ -55,8 +56,8 @@ const CaseDetails: React.FC = () => {
           <Header>Case #{id}</Header>
           <MaintenanceButtons />
         </HeaderContainer>
-        <Tabs />
         <Timeline {...{ currentPeriodIndex, dispute }} />
+        <Tabs />
         <StyledCard>
           <Routes>
             <Route

web/src/pages/Cases/index.tsx

@@ -13,7 +13,7 @@ import CasesFetcher from "./CasesFetcher";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
+  padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)};
   max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;