refactor: migrate NewTransaction Title component

Author: kyrers

web/src/global.css

@@ -40,6 +40,7 @@
   --spacing-fluid-100-130: clamp(100px, calc(100px + (130 - 100) * (100vw - 375px) / (1250 - 375)), 130px);
   --spacing-fluid-300-424-300: clamp(300px, calc(300px + (424 - 300) * (100vw - 300px) / (1250 - 300)), 424px);
   --spacing-fluid-300-480: clamp(300px, calc(300px + (480 - 300) * (100vw - 375px) / (1250 - 375)), 480px);
+  --spacing-fluid-342-500: clamp(342px, calc(342px + (500 - 342) * (100vw - 375px) / (1250 - 375)), 500px);
   --spacing-fluid-342-618: clamp(342px, calc(342px + (618 - 342) * (100vw - 375px) / (1250 - 375)), 618px);
 }
 

web/src/pages/NewTransaction/EscrowDetails/Title/TextField.tsx

@@ -1,22 +1,27 @@
 import React from "react";
 import Header from "pages/NewTransaction/Header";
-import styled from "styled-components";
-import TextField from "./TextField";
 import NavigationButtons from "pages/NewTransaction/NavigationButtons";
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
+import { useNewTransactionContext } from "~src/context/NewTransactionContext";
+import { TextField } from "@kleros/ui-components-library";
 
 const Title: React.FC = () => {
+  const { escrowTitle, setEscrowTitle } = useNewTransactionContext();
+
+  const handleWrite = (value: string) => {
+    setEscrowTitle(value);
+  };
+
   return (
-    <Container>
+    <div className="flex flex-col items-center">
       <Header text="Title" />
-      <TextField />
+      <TextField
+        className="w-[84vw] lg:w-fluid-342-500"
+        value={escrowTitle}
+        onChange={handleWrite}
+        placeholder="e.g. Escrow with John"
+      />
       <NavigationButtons prevRoute="/new-transaction/escrow-type" nextRoute="/new-transaction/deliverable" />
-    </Container>
+    </div>
   );
 };
 export default Title;