ui: Fix vertical alignments

zkemail · Oct 11, 2024 · 9ff0f61 · 9ff0f61
1 parent b554ea8
commit 9ff0f61
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,