From 9ff0f612c5a98942a1cc841af374515835e68676 Mon Sep 17 00:00:00 2001
From: Shubham Gupta <shubham.gupta2956@gmail.com>
Date: Fri, 11 Oct 2024 14:07:44 +0700
Subject: [PATCH] ui: Fix vertical alignments

---
 src/App.tsx                                     | 10 +++++++---
 src/components/ConfigureGuardians.tsx           |  6 ++----
 src/components/ConnectWallets.tsx               |  2 +-
 src/components/EnableSafeModule.tsx             |  2 +-
 src/components/GuardianSetup.tsx                |  2 +-
 src/components/RequestedRecoveries.tsx          | 17 ++++++++---------
 src/components/WalletActions.tsx                |  2 +-
 .../burnerWallet/ConfigureGuardians.tsx         |  6 ++----
 src/components/burnerWallet/GuardianSetup.tsx   |  2 +-
 .../burnerWallet/RequestedRecoveries.tsx        |  9 +--------
 src/pages/landingPage.tsx                       |  8 +++-----
 11 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4eb1b28..12c65f4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { ThemeProvider } from "@mui/material";
+import { Grid, ThemeProvider } from "@mui/material";
 import { createContext, useState } from "react";
 import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
@@ -30,7 +30,11 @@ function App() {
           <Web3Provider>
             <BrowserRouter>
               <NavBar />
-              <div style={{ padding: 16 }}>
+              <Grid container
+                style={{ padding: 16, height: "calc(100vh - 70px - 32px)" }}
+                justifyContent={"center"}
+                alignItems={"center"}
+              >
                 <Routes>
                   <Route path="/" element={<LandingPage />} />
                   <Route path="/safe-wallet" element={<SafeWalletFlow />} />
@@ -41,7 +45,7 @@ function App() {
                   />
                   <Route path="*" element={<ErrorPage />} />
                 </Routes>
-              </div>
+              </Grid>
             </BrowserRouter>
           </Web3Provider>
         </StepsContext.Provider>
diff --git a/src/components/ConfigureGuardians.tsx b/src/components/ConfigureGuardians.tsx
index 43fb8c9..bb4fcbd 100644
--- a/src/components/ConfigureGuardians.tsx
+++ b/src/components/ConfigureGuardians.tsx
@@ -212,10 +212,8 @@ const ConfigureGuardians = () => {
     <div className="connect-wallets-container">
       <Box
         sx={{
-          marginX: "auto",
-          marginTop: { xs: "2rem", sm: "9.375rem" },
-          marginBottom: "6.25rem",
-          maxWidth: { xs: "100%", md: "80%", lg: "50%" },
+          minHeight: "40rem",
+          minWidth: '50rem'
         }}
       >
         <Grid item xs={12} textAlign={"start"}>
diff --git a/src/components/ConnectWallets.tsx b/src/components/ConnectWallets.tsx
index 074f7c1..2e9e67c 100644
--- a/src/components/ConnectWallets.tsx
+++ b/src/components/ConnectWallets.tsx
@@ -19,7 +19,7 @@ const ConnectWallets = () => {
 
   return (
     <div className="connect-wallets-container">
-      <Box sx={{ marginX: "auto", marginTop: "180px" }}>
+      <Box>
         <Typography variant="h2" sx={{ paddingBottom: "20px" }}>
           Set Up Wallet Recovery
         </Typography>
diff --git a/src/components/EnableSafeModule.tsx b/src/components/EnableSafeModule.tsx
index 2a44f0b..4e9e5be 100644
--- a/src/components/EnableSafeModule.tsx
+++ b/src/components/EnableSafeModule.tsx
@@ -58,7 +58,7 @@ const EnableSafeModule = () => {
   }
 
   return (
-    <Box sx={{ marginX: "auto", marginTop: { xs: "2rem", sm: "9.375rem" } }}>
+    <Box>
       <Typography variant="h2" sx={{ paddingBottom: "10px" }}>
         Set Up Wallet Recovery
       </Typography>
diff --git a/src/components/GuardianSetup.tsx b/src/components/GuardianSetup.tsx
index eee53b7..1804244 100644
--- a/src/components/GuardianSetup.tsx
+++ b/src/components/GuardianSetup.tsx
@@ -246,7 +246,7 @@ const GuardianSetup = () => {
   }
 
   return (
-    <Box sx={{ marginX: "auto", marginTop: "100px", marginBottom: "100px" }}>
+    <Box>
       <Typography variant="h2" sx={{ paddingBottom: "1.5rem" }}>
         Set Up Guardian Details
       </Typography>
diff --git a/src/components/RequestedRecoveries.tsx b/src/components/RequestedRecoveries.tsx
index c09cb2f..3b3be6f 100644
--- a/src/components/RequestedRecoveries.tsx
+++ b/src/components/RequestedRecoveries.tsx
@@ -1,6 +1,6 @@
 import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
 import { Box, Grid, Typography } from "@mui/material";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { useNavigate } from "react-router-dom";
 import { encodeAbiParameters, encodeFunctionData } from "viem";
@@ -21,6 +21,8 @@ import { useAppContext } from "../context/AppContextHook";
 import { config } from "../providers/config";
 import { relayer } from "../services/relayer";
 import { templateIdx } from "../utils/email";
+import { StepsContext } from "../App";
+import { STEPS } from "../constants";
 
 const BUTTON_STATES = {
   TRIGGER_RECOVERY: "Trigger Recovery",
@@ -35,6 +37,7 @@ const RequestedRecoveries = () => {
   const { writeContractAsync } = useWriteContract();
   const { guardianEmail } = useAppContext();
   const navigate = useNavigate();
+  const stepsContext = useContext(StepsContext);
 
   const [newOwner, setNewOwner] = useState<string>();
   const safeWalletAddress = address;
@@ -267,18 +270,14 @@ const RequestedRecoveries = () => {
   }
 
   return (
-    <Box
-      sx={{
-        marginX: "auto",
-        marginTop: { xs: "2rem", sm: "9.375rem" },
-        marginBottom: "6.25rem",
-        maxWidth: { xs: "100%", md: "80%", lg: "50%" },
-      }}
-    >
+    <Box>
       <Grid item xs={12} textAlign={"start"}>
         <Button
           variant="text"
           onClick={() => {
+            if (window.location.pathname === "/safe-wallet") {
+              return stepsContext?.setStep(STEPS.WALLET_ACTIONS);
+            }
             navigate("/");
           }}
           sx={{ textAlign: "left", cursor: "pointer", width: "auto" }}
diff --git a/src/components/WalletActions.tsx b/src/components/WalletActions.tsx
index 5adab9b..6311fd4 100644
--- a/src/components/WalletActions.tsx
+++ b/src/components/WalletActions.tsx
@@ -9,7 +9,7 @@ const WalletActions = () => {
 
   return (
     <div className="connect-wallets-container">
-      <Box sx={{ marginX: "auto", marginTop: "180px" }}>
+      <Box>
         <Typography variant="h2" sx={{ paddingBottom: "20px" }}>
           Wallet Actions
         </Typography>
diff --git a/src/components/burnerWallet/ConfigureGuardians.tsx b/src/components/burnerWallet/ConfigureGuardians.tsx
index 37054fd..f12c524 100644
--- a/src/components/burnerWallet/ConfigureGuardians.tsx
+++ b/src/components/burnerWallet/ConfigureGuardians.tsx
@@ -216,10 +216,8 @@ const ConfigureGuardians = () => {
     <div className="connect-wallets-container">
       <Box
         sx={{
-          marginX: "auto",
-          marginTop: { xs: "2rem", sm: "9.375rem" },
-          marginBottom: "6.25rem",
-          maxWidth: { xs: "100%", md: "80%", lg: "50%" },
+          minHeight: "40rem",
+          minWidth: "50rem",
         }}
       >
         <Grid item xs={12} textAlign={"start"}>
diff --git a/src/components/burnerWallet/GuardianSetup.tsx b/src/components/burnerWallet/GuardianSetup.tsx
index b2ee3ad..d3faf96 100644
--- a/src/components/burnerWallet/GuardianSetup.tsx
+++ b/src/components/burnerWallet/GuardianSetup.tsx
@@ -324,7 +324,7 @@ const GuardianSetup = () => {
   }
 
   return (
-    <Box sx={{ marginX: "auto", marginTop: "100px", marginBottom: "100px" }}>
+    <Box>
       <Typography variant="h2" sx={{ paddingBottom: "1.5rem" }}>
         Set Up Guardian Details
       </Typography>
diff --git a/src/components/burnerWallet/RequestedRecoveries.tsx b/src/components/burnerWallet/RequestedRecoveries.tsx
index 9213ec1..61b1849 100644
--- a/src/components/burnerWallet/RequestedRecoveries.tsx
+++ b/src/components/burnerWallet/RequestedRecoveries.tsx
@@ -275,14 +275,7 @@ const RequestedRecoveries = () => {
   }
 
   return (
-    <Box
-      sx={{
-        marginX: "auto",
-        marginTop: { xs: "2rem", sm: "9.375rem" },
-        marginBottom: "6.25rem",
-        maxWidth: { xs: "100%", md: "80%", lg: "50%" },
-      }}
-    >
+    <Box>
       <Grid item xs={12} textAlign={"start"}>
         <Button
           variant="text"
diff --git a/src/pages/landingPage.tsx b/src/pages/landingPage.tsx
index a2e445b..e67534c 100644
--- a/src/pages/landingPage.tsx
+++ b/src/pages/landingPage.tsx
@@ -45,8 +45,8 @@ const LandingPage = () => {
   };
 
   return (
-    <div className="bg-white">
-      <Grid sx={{ paddingTop: { xs: "5rem", md: "7.5rem" } }}>
+    <div className="bg-white h-full">
+      <Grid sx={{ marginBottom: "auto" }}>
         {/* <Link to="https://prove.email/" target="_blank">
           <Box
             display="flex"
@@ -76,9 +76,7 @@ const LandingPage = () => {
             </Typography>
           </Box>
         </Link> */}
-        <Typography variant="h1">
-          Email Recovery Demo
-        </Typography>
+        <Typography variant="h1">Email Recovery Demo</Typography>
         <Typography
           sx={{
             color: theme.palette.secondary.main,