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;
 `;

web/src/pages/Courts/index.tsx

@@ -12,7 +12,7 @@ import TopSearch from "./TopSearch";
 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;
 `;

web/src/pages/Dashboard/Courts/Header.tsx

@@ -16,10 +16,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 12px;
+  gap: 4px;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: ${responsiveSize(32, 48)};
+  margin-bottom: ${responsiveSize(16, 24)};
 
   ${landscapeStyle(
     () => css`

web/src/pages/Dashboard/Courts/index.tsx

@@ -9,18 +9,19 @@ import { useReadSortitionModuleGetJurorBalance } from "hooks/contracts/generated
 import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery";
 
 import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
 
 import CourtCard from "./CourtCard";
 import Header from "./Header";
 
 const Container = styled.div`
-  margin-top: 64px;
+  margin-top: ${responsiveSize(24, 48)};
 `;
 
 const CourtCardsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 4px;
   z-index: 0;
 
   ${landscapeStyle(

web/src/pages/Dashboard/JurorInfo/Header.tsx

@@ -16,7 +16,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  margin-bottom: ${responsiveSize(32, 48)};
+  margin-bottom: ${responsiveSize(16, 24)};
   gap: 12px;
 
   ${landscapeStyle(

web/src/pages/Dashboard/index.tsx

@@ -25,16 +25,16 @@ import JurorInfo from "./JurorInfo";
 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;
 `;
 
 const StyledCasesDisplay = styled(CasesDisplay)`
-  margin-top: 64px;
+  margin-top: ${responsiveSize(32, 48)};
 
   .title {
-    margin-bottom: ${responsiveSize(16, 48)};
+    margin-bottom: ${responsiveSize(12, 24)};
   }
 `;
 

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

@@ -11,10 +11,10 @@ import { responsiveSize } from "styles/responsiveSize";
 import { Element } from "./Element";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(44, 64)};
+  margin-top: ${responsiveSize(24, 48)};
 
   h1 {
-    margin-bottom: ${responsiveSize(16, 48)};
+    margin-bottom: ${responsiveSize(12, 24)};
   }
 `;
 

web/src/pages/Home/CourtOverview/Chart.tsx

@@ -1,30 +1,30 @@
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { Tooltip } from "chart.js";
 import { formatUnits } from "viem";
 
 import { DropdownSelect } from "@kleros/ui-components-library";
 
 import { useHomePageContext } from "hooks/useHomePageContext";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 import CasesByCourtsChart, { CasesByCourtsChartData } from "./CasesByCourtsChart";
 import StakedPNKByCourtsChart, { StakedPNKByCourtsChartData } from "./StakedPNKByCourtsChart";
 import TimeSeriesChart from "./TimeSeriesChart";
 
 const Container = styled.div`
-  margin-bottom: ${responsiveSize(32, 48)};
+  margin-bottom: ${responsiveSize(16, 32)};
   display: flex;
   flex-direction: column;
 `;
 
 const StyledDropdown = styled(DropdownSelect)`
   width: fit-content;
-  align-self: end;
+  align-self: start;
 `;
 
 const CHART_OPTIONS = [
@@ -40,7 +40,6 @@ const ChartOptionsDropdown: React.FC<{
   <StyledDropdown
     smallButton
     simpleButton
-    alignRight
     defaultValue={"stakedPNK"}
     items={CHART_OPTIONS}
     callback={(newValue: string | number) => {

web/src/pages/Home/CourtOverview/ExtraStats.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { DropdownSelect } from "@kleros/ui-components-library";
 
 import LawBalance from "svgs/icons/law-balance.svg";
@@ -13,8 +15,9 @@ import ExtraStatsDisplay from "components/ExtraStatsDisplay";
 const StyledCard = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 0 24px;
+  gap: 12px 24px;
   justify-content: center;
+  margin-top: ${responsiveSize(12, 16)};
 `;
 
 const StyledLabel = styled.label`

web/src/pages/Home/CourtOverview/Header.tsx

@@ -3,31 +3,36 @@ import styled from "styled-components";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { Link } from "react-router-dom";
-
 import { Button } from "@kleros/ui-components-library";
 
 import Bookmark from "svgs/icons/bookmark.svg";
 
+import { InternalLink } from "components/InternalLink";
+
 const StyledHeader = styled.div`
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  gap: 0 12px;
-  margin-bottom: ${responsiveSize(16, 0)};
+  gap: 8px 12px;
+  margin-bottom: 12px;
 `;
 
 const StyledH1 = styled.h1`
   font-size: ${responsiveSize(21, 24)};
+  margin: 0;
+`;
+
+const StyledInternalLink = styled(InternalLink)`
+  height: 34px;
 `;
 
 const Header: React.FC = () => {
   return (
     <StyledHeader>
       <StyledH1>Court Overview</StyledH1>
-      <Link to={"/resolver"}>
+      <StyledInternalLink to={"/resolver"}>
         <Button small Icon={Bookmark} text="Create a Case" />
-      </Link>
+      </StyledInternalLink>
     </StyledHeader>
   );
 };

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

@@ -14,11 +14,11 @@ import Header from "./Header";
 import JurorCard from "./JurorCard";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(64, 80)};
+  margin-top: ${responsiveSize(24, 48)};
 `;
 
 const Title = styled.h1`
-  margin-bottom: ${responsiveSize(16, 48)};
+  margin-bottom: ${responsiveSize(12, 24)};
 `;
 
 const ListContainer = styled.div`

web/src/pages/Home/index.tsx

@@ -22,7 +22,7 @@ const Wrapper = styled.div`
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
+  padding: 16px ${responsiveSize(24, 132)} ${responsiveSize(40, 60)};
   max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;