refactor: begin "new-transaction" route migration (WIP)

Author: kyrers

web/src/global.css

@@ -30,6 +30,7 @@
   * Default max screen width is 1250px
   * Default min screen width is 375px
   */
+  --spacing-fluid-0-132: clamp(0px, calc(0px + (132 - 0) * (100vw - 375px) / (1250 - 375)), 132px);
   --spacing-fluid-4-8: clamp(4px, calc(4px + (8 - 4) * (100vw - 375px) / (1250 - 375)), 8px);
   --spacing-fluid-6-8-300: clamp(6px, calc(6px + (8 - 6) * (100vw - 300px) / (1250 - 300)), 8px);
   --spacing-fluid-8-24: clamp(8px, calc(8px + (24 - 8) * (100vw - 375px) / (1250 - 375)), 24px);

web/src/pages/NewTransaction/HeroImage.tsx

@@ -1,17 +1,17 @@
 import React from "react";
-import { useTheme } from "styled-components";
+import { useTheme } from "src/hooks/useToggleThemeContext";
 import { useWindowSize } from "react-use";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import HeroLightMobile from "svgs/hero/hero-lightmode-mobile.svg";
 import HeroDarkMobile from "svgs/hero/hero-darkmode-mobile.svg";
 import HeroLightDesktop from "svgs/hero/hero-lightmode-desktop.svg";
 import HeroDarkDesktop from "svgs/hero/hero-darkmode-desktop.svg";
+import { LG_BREAKPOINT } from "src/styles/breakpoints";
 
 const HeroImage = () => {
   const { width } = useWindowSize();
-  const theme = useTheme();
-  const themeIsLight = theme.name === "light";
-  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
+  const [theme] = useTheme();
+  const themeIsLight = theme === "light";
+  const screenIsBig = width > LG_BREAKPOINT;
   return <div>{screenIsBig ? <HeroDesktop {...{ themeIsLight }} /> : <HeroMobile {...{ themeIsLight }} />}</div>;
 };
 

web/src/pages/NewTransaction/Timeline.tsx

@@ -1,22 +1,7 @@
 import React from "react";
-import styled, { css } from "styled-components";
 import { Steps } from "@kleros/ui-components-library";
-import { landscapeStyle } from "styles/landscapeStyle";
 import { useLocation } from "react-router-dom";
 
-const StyledSteps = styled(Steps)`
-  display: none;
-
-  ${landscapeStyle(
-    () => css`
-      display: flex;
-      position: absolute;
-      left: 4%;
-      height: 200px;
-    `
-  )}
-`;
-
 const items = [
   { title: "Escrow Details", subitems: ["Type of Escrow", "Title"] },
   { title: "Terms", subitems: ["Deliverable", "Payment", "Deadline"] },
@@ -41,7 +26,7 @@ const Timeline: React.FC = () => {
     0
   );
 
-  return <StyledSteps {...{ items, currentItemIndex }} />;
+  return <Steps className="hidden lg:absolute lg:flex lg:left-[4%] lg:h-[200px]" {...{ items, currentItemIndex }} />;
 };
 
 export default Timeline;

web/src/pages/NewTransaction/index.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
-import styled, { css } from "styled-components";
 import { useWindowSize } from "react-use";
-import { BREAKPOINT_LANDSCAPE, MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
 import Title from "./EscrowDetails/Title";
 import TypeOfEscrow from "./EscrowDetails/TypeOfEscrow";
 import HeroImage from "./HeroImage";
@@ -12,48 +10,34 @@ import Deliverable from "./Terms/Deliverable";
 import Notifications from "./Terms/Notifications";
 import Payment from "./Terms/Payment";
 import Timeline from "./Timeline";
-import { responsiveSize } from "styles/responsiveSize";
 import { useAccount } from "wagmi";
 import ConnectWallet from "components/ConnectWallet";
-import { ConnectWalletContainer } from "../MyTransactions";
 import { DEFAULT_CHAIN } from "consts/chains";
 import { EnsureAuth } from "components/EnsureAuth";
-
-const Container = styled.div`
-  width: 100%;
-  background-color: ${({ theme }) => theme.lightBackground};
-  padding: 24px 16px 40px;
-  max-width: ${MAX_WIDTH_LANDSCAPE};
-  margin: 0 auto;
-
-  ${landscapeStyle(
-    () => css`
-      padding: 32px ${responsiveSize(0, 132)} 60px;
-    `
-  )}
-`;
-
-const MiddleContentContainer = styled.div`
-  display: flex;
-  justify-content: center;
-`;
+import clsx from "clsx";
+import { LG_BREAKPOINT } from "src/styles/breakpoints";
 
 const NewTransaction: React.FC = () => {
   const location = useLocation();
   const { width } = useWindowSize();
   const { isConnected, chain } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
-  const isMobileView = width <= BREAKPOINT_LANDSCAPE;
+  const isMobileView = width <= LG_BREAKPOINT;
   const isOnSupportedChain = chain?.id === DEFAULT_CHAIN;
 
   return (
     <>
       {!isPreviewPage || isMobileView ? <HeroImage /> : null}
-      <Container>
+      <div
+        className={clsx(
+          "w-full max-w-landscape mx-auto bg-klerosUIComponentsLightBackground",
+          "px-4 pt-6 pb-10 lg:px-fluid-0-132 lg:pt-8 lg:pb-[60px]"
+        )}
+      >
         {isConnected && isOnSupportedChain && !isPreviewPage ? <Timeline /> : null}
         {isConnected && isOnSupportedChain ? (
           <EnsureAuth message={"Sign a message to verify yourself."} buttonText="Verify">
-            <MiddleContentContainer>
+            <div className="flex justify-center">
               <Routes>
                 <Route index element={<Navigate to="escrow-type" replace />} />
                 <Route path="/escrow-type/*" element={<TypeOfEscrow />} />
@@ -64,16 +48,16 @@ const NewTransaction: React.FC = () => {
                 <Route path="/notifications/*" element={<Notifications />} />
                 <Route path="/preview/*" element={<Preview />} />
               </Routes>
-            </MiddleContentContainer>
+            </div>
           </EnsureAuth>
         ) : (
-          <ConnectWalletContainer>
+          <div className="flex flex-col items-center text-center text-klerosUIComponentsPrimaryText">
             To create a new escrow transaction, connect first and switch to the supported chain
-            <hr />
+            <hr className="my-2" />
             <ConnectWallet />
-          </ConnectWalletContainer>
+          </div>
         )}
-      </Container>
+      </div>
     </>
   );
 };

web/src/styles/breakpoints.ts

@@ -0,0 +1 @@
+export const LG_BREAKPOINT = 900;