style: validator success page

src/pages/ValidatorSuccess.tsx

@@ -1,26 +1,21 @@
-import React from 'react';
+import React from "react";
-import { useLocation } from 'react-router-dom';
+import { useLocation } from "react-router-dom";
 
-import { Box, Link, Typography } from '@mui/material';
+import { Link, Typography } from "@mui/material";
+import { Layout } from "../layout/Layout";
+import { CodeBlock } from "../components/CodeBlock";
 
 const ValidatorSuccess = () => {
   const location = useLocation();
   const { validatorAddress } = location.state as {
-    validatorAddress?: string
+    validatorAddress?: string;
   };
 
   return (
-    <Box
+    <Layout title="Validator created successfully">
-      sx={{
+      <Typography sx={{ marginTop: 3 }}>
-        display: "flex",
+        You can view your validator details using the following command
-        flexDirection: "column",
+        (Refer&nbsp;
-        marginTop: 6,
-        gap: 1,
-      }}
-    >
-      <Typography variant="h5">Validator created successfully</Typography>
-      <Typography sx={{ marginTop: 3}}>
-        You can view your validator details using the following command (Refer&nbsp;
         <Link
           href="https://git.vdb.to/cerc-io/testnet-laconicd-stack/src/branch/main/testnet-onboarding-validator.md#join-as-testnet-validator"
           target="_blank"
@@ -30,12 +25,10 @@ const ValidatorSuccess = () => {
         </Link>
         )
       </Typography>
-      <Box sx={{ backgroundColor: "lightgray", padding: 2, wordWrap: "break-word", marginTop: 2, fontSize: 14}}>
+      <CodeBlock>
-        <pre style={{ whiteSpace: "pre-wrap", margin: 0 }}>
         {`laconic-so deployment --dir testnet-laconicd-deployment exec laconicd "laconicd query staking validators --output json" | jq '.validators[] | select(.operator_address == "${validatorAddress}")'`}
-        </pre>
+      </CodeBlock>
-      </Box>
+    </Layout>
-    </Box>
   );
 };