style: sign with nitro

src/App.tsx

@@ -16,7 +16,7 @@ import Email from "./pages/Email";
 import Thanks from "./pages/Thanks";
 import Validator from "./pages/Validator";
 import ValidatorSuccess from "./pages/ValidatorSuccess";
-import { createTheme, Box, ThemeProvider } from "@mui/material";
+import { createTheme, Box, ThemeProvider, CssBaseline } from "@mui/material";
 
 const darkTheme = createTheme({
   components: {
@@ -94,6 +94,7 @@ function App() {
           }}
         >
           <Header />
+          <CssBaseline />
           <WalletConnectProvider>
             <Routes>
               <Route path="/" element={<LandingPage />} />

src/components/Container.tsx

@@ -9,7 +9,7 @@ export const Container: React.FC<
     sx={{
       width: "100%",
       maxWidth: "752px",
-      marginX: "auto",
+      mx: "auto",
       backgroundColor: "background.paper",
       padding: 3,
       borderRadius: 2,

src/components/Header.tsx

@@ -1,36 +1,38 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
 
-import {
-  AppBar,
-  Toolbar,
-  SvgIcon,
-  Stack,
-  Divider,
-  Typography,
-} from "@mui/material";
+import { AppBar, SvgIcon, Stack, Divider, Typography } from "@mui/material";
 
 const Header: React.FC = () => {
   const location = useLocation();
 
   return (
-    <AppBar position="static" color="inherit" sx={{ boxShadow: "none", mb: 4 }}>
-      <Toolbar>
+    <AppBar
+      position="static"
+      color="inherit"
+      sx={{ boxShadow: "none", mb: 4, height: 48 }}
+    >
       <Stack
         direction="row"
         sx={{
           backgroundColor: "background.paper",
-            pl: 4,
+          pl: 2,
           alignItems: "center",
-            py: 2,
+          py: 1,
         }}
-          spacing={2}
+        spacing={1}
       >
         <Link
           to={location.pathname === "/" ? "/" : "/connect-wallet"}
-            style={{ color: "inherit", textDecoration: "none" }}
+          style={{
+            color: "inherit",
+            textDecoration: "none",
+            display: "flex",
+            alignItems: "center",
+            marginRight: 4,
+          }}
         >
-            <SvgIcon sx={{ height: 20, width: 115 }}>
+          <SvgIcon sx={{ height: 20, width: 100 }}>
             <svg
               width="115"
               height="20"
@@ -81,9 +83,8 @@ const Header: React.FC = () => {
           color="#FBFBFB"
           sx={{ height: "1.2rem", alignSelf: "center", width: "1px" }}
         />
-          <Typography variant="h5">Testnet Onboarding</Typography>
+        <Typography fontSize="1.25rem">Testnet Onboarding</Typography>
       </Stack>
-      </Toolbar>
     </AppBar>
   );
 };

src/components/Layout.tsx

@@ -1,28 +0,0 @@
-import { Button, Typography } from "@mui/material";
-import React, { PropsWithChildren } from "react";
-import { Container } from "./Container";
-import { ArrowBack } from "@mui/icons-material";
-import { useNavigate } from "react-router-dom";
-
-export const Layout: React.FC<
-  PropsWithChildren<{ title: string; backLinkTitle?: string }>
-> = ({ children, title, backLinkTitle = "Home" }) => {
-  const navigate = useNavigate();
-
-  return (
-    <Container boxProps={{ sx: { backgroundColor: "inherit" } }}>
-      <Button
-        startIcon={<ArrowBack />}
-        color="info"
-        sx={{ mb: 4 }}
-        onClick={() => navigate("/")}
-      >
-        {backLinkTitle}
-      </Button>
-      <Typography variant="h4" sx={{ mb: 4 }}>
-        {title}
-      </Typography>
-      <Container>{children}</Container>
-    </Container>
-  );
-};

src/layout/Layout.tsx

@@ -0,0 +1,34 @@
+import { Button, Typography } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+import { Container } from "../components/Container";
+import { ArrowBack } from "@mui/icons-material";
+import { useNavigate } from "react-router-dom";
+
+export const Layout: React.FC<
+  PropsWithChildren<{
+    title: string;
+    backLinkTitle?: string;
+    noBackButton?: boolean;
+  }>
+> = ({ children, title, backLinkTitle = "Home", noBackButton = false }) => {
+  const navigate = useNavigate();
+
+  return (
+    <Container boxProps={{ sx: { backgroundColor: "inherit", padding: 0 } }}>
+      {noBackButton ? null : (
+        <Button
+          startIcon={<ArrowBack />}
+          color="info"
+          sx={{ mb: 4 }}
+          onClick={() => navigate("/")}
+        >
+          {backLinkTitle}
+        </Button>
+      )}
+      <Typography variant="h4" sx={{ mb: 4 }}>
+        {title}
+      </Typography>
+      <Container>{children}</Container>
+    </Container>
+  );
+};

src/layout/SignPageLayout.tsx

@@ -1,15 +1,10 @@
 import React from "react";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
-import {
-  Toolbar,
-  Avatar,
-  Button,
-  Typography,
-  Container
-} from "@mui/material";
+import { Avatar, Button, Stack, Typography } from "@mui/material";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
+import { Container } from "../components/Container";
 
 const SignPageLayout = () => {
   const { disconnect, session } = useWalletConnectContext();
@@ -25,24 +20,19 @@ const SignPageLayout = () => {
   };
 
   return (
-    <>
-      <Toolbar variant="dense">
-
-        <Button
-          variant="outlined"
-          style={{
-            marginLeft: "auto",
+    <Stack justifyContent="center" alignItems="center">
+      <Container
+        boxProps={{
+          sx: {
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            mb: 4,
+          },
         }}
-          color="error"
-          onClick={disconnectHandler}
       >
-          Disconnect
-        </Button>
-      </Toolbar>
-
-      <Container maxWidth="md">
         {session && (
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <Stack spacing={0.5}>
             <div
               style={{
                 display: "flex",
@@ -51,7 +41,7 @@ const SignPageLayout = () => {
               }}
             >
               <Typography variant="body2">
-                Connected to: <b> {session.peer.metadata.name}</b>{" "}
+                <b>Connected to:</b> {session.peer.metadata.name}
               </Typography>
               <Avatar
                 variant="square"
@@ -66,13 +56,21 @@ const SignPageLayout = () => {
               />
             </div>
             <Typography variant="body2">
-              Session ID: <b>{session.topic} </b>
+              <b>Session ID:</b> {session.topic}
             </Typography>
-          </div>
+          </Stack>
         )}
-        <Outlet />
+        <Button
+          variant="outlined"
+          color="error"
+          onClick={disconnectHandler}
+          sx={{ color: "text.primary" }}
+        >
+          Disconnect
+        </Button>
       </Container>
-    </>
+      <Outlet />
+    </Stack>
   );
 };
 

src/pages/SignWithNitroKey.tsx

@@ -3,12 +3,13 @@ import { useLocation, useNavigate } from "react-router-dom";
 import { enqueueSnackbar } from "notistack";
 import canonicalStringify from "canonical-json";
 
-import { Select, MenuItem, Box, Typography } from "@mui/material";
+import { Select, MenuItem, Box, Typography, Stack } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { utf8ToHex } from "@walletconnect/encoding";
 
 import { useWalletConnectContext } from "../context/WalletConnectContext";
 import { ENABLE_KYC, HASHED_SUBSCRIBER_ID_KEY } from "../constants";
+import { Layout } from "../layout/Layout";
 
 const SignWithNitroKey = () => {
   const { session, signClient, isSessionLoading } = useWalletConnectContext();
@@ -104,17 +105,9 @@ const SignWithNitroKey = () => {
   };
 
   return (
-    <div>
+    <Layout title="New Session" noBackButton>
       {session ? (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            marginTop: 6,
-            gap: 1,
-          }}
-        >
-          <Typography variant="h5">Sign with Nitro key</Typography>
+        <Stack spacing={2}>
           <Typography variant="body1">Select Laconic account:</Typography>
           <Select
             labelId="demo-simple-select-label"
@@ -151,12 +144,21 @@ const SignWithNitroKey = () => {
           {Boolean(ethAddress) && Boolean(cosmosAddress) && (
             <Box
               sx={{
-                backgroundColor: "lightgray",
+                backgroundColor: "#48474F",
                 padding: 3,
                 wordWrap: "break-word",
+                mt: 1,
+                borderRadius: 1,
+              }}
+            >
+              <pre
+                style={{
+                  whiteSpace: "pre-wrap",
+                  margin: 0,
+                  backgroundColor: "#48474F",
+                  color: "#FBFBFB",
                 }}
               >
-              <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
                 {canonicalStringify(message, null, 2)}{" "}
               </pre>
             </Box>
@@ -172,11 +174,11 @@ const SignWithNitroKey = () => {
               Sign using Nitro key
             </LoadingButton>
           </Box>
-        </Box>
+        </Stack>
       ) : (
         <>Loading...</>
       )}
-    </div>
+    </Layout>
   );
 };