refactor: abstract max width landscape

Author: kemuru

web/src/components/ErrorFallback.tsx

@@ -1,23 +1,23 @@
 import React from "react";
 import styled, { css } from "styled-components";
 
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { FallbackProps } from "react-error-boundary";
 
 import { Button } from "@kleros/ui-components-library";
 
 import ErrorIcon from "svgs/icons/warning-outline.svg";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-import { responsiveSize } from "styles/responsiveSize";
-
 import HeroImage from "./HeroImage";
 
 const Container = styled.div`
   width: 100%;
   height: 100vh;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/Cases/index.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "styled-components";
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 
 import { Routes, Route } from "react-router-dom";
 
@@ -13,7 +14,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/Courts/index.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 
-import { Routes, Route, Navigate } from "react-router-dom";
-
 import { responsiveSize } from "styles/responsiveSize";
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+
+import { Routes, Route, Navigate } from "react-router-dom";
 
 import CourtDetails from "./CourtDetails";
 import TopSearch from "./TopSearch";
@@ -12,7 +13,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/Dashboard/index.tsx

@@ -1,6 +1,9 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { useNavigate, useParams } from "react-router-dom";
 import { useAccount } from "wagmi";
 
@@ -12,8 +15,6 @@ import { useUserQuery } from "queries/useUser";
 
 import { OrderDirection } from "src/graphql/graphql";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import CasesDisplay from "components/CasesDisplay";
 import ConnectWallet from "components/ConnectWallet";
 import ScrollTop from "components/ScrollTop";
@@ -25,7 +26,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/GetPnk/index.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import styled from "styled-components";
 
-import { isProductionDeployment } from "consts/index";
-
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { isProductionDeployment } from "consts/index";
+
 import ClaimPnkButton from "components/ClaimPnkButton";
 import HeroImage from "components/HeroImage";
 import ScrollTop from "components/ScrollTop";
@@ -19,7 +20,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
   display: flex;
   flex-direction: column;

web/src/pages/Home/index.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
 
-import { responsiveSize } from "styles/responsiveSize";
-
 import HeroImage from "components/HeroImage";
 import LatestCases from "components/LatestCases";
 import ScrollTop from "components/ScrollTop";
@@ -22,7 +23,7 @@ const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/Resolver/index.tsx

@@ -5,7 +5,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
-import { landscapeStyle } from "styles/landscapeStyle";
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
 import ConnectWallet from "components/ConnectWallet";
@@ -38,7 +38,7 @@ const Container = styled.div`
   padding: ${responsiveSize(24, 32)};
   padding-top: ${responsiveSize(24, 28)};
   padding-bottom: ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/pages/Settings/index.tsx

@@ -1,17 +1,18 @@
 import React from "react";
 import styled from "styled-components";
 
-import { Route, Routes } from "react-router-dom";
-
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
 import { responsiveSize } from "styles/responsiveSize";
 
+import { Route, Routes } from "react-router-dom";
+
 import EmailConfirmation from "./EmailConfirmation";
 
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
   padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)};
-  max-width: 1400px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 

web/src/styles/landscapeStyle.ts

@@ -1,5 +1,7 @@
 import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
 
+export const MAX_WIDTH_LANDSCAPE = "1400px";
+
 export const BREAKPOINT_LANDSCAPE = 900;
 
 export const landscapeStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`