From 8b53301757aa2eba16b015ce6a167baedaa73b9d Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Mon, 24 Jun 2024 09:53:14 +0300
Subject: [PATCH 1/6] feat: improve consistency in footer styling

---
 apps/roboshield/src/components/Footer/Footer.tsx          | 2 +-
 .../NewsletterSubscription/NewsletterSubscription.tsx     | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/roboshield/src/components/Footer/Footer.tsx b/apps/roboshield/src/components/Footer/Footer.tsx
index f635f704e..1f83dcfc9 100644
--- a/apps/roboshield/src/components/Footer/Footer.tsx
+++ b/apps/roboshield/src/components/Footer/Footer.tsx
@@ -88,7 +88,7 @@ export default function Footer({
                   sx={{ height: "113px", mt: { xs: "52px", md: 0 } }}
                 >
                   <RichTypography
-                    variant="h6"
+                    variant="h5SemiBold"
                     sx={{ color: "text.secondary", mb: "0" }}
                   >
                     In Partnership with:
diff --git a/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx b/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
index fbe6fafec..707ed9f49 100644
--- a/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
+++ b/apps/roboshield/src/components/NewsletterSubscription/NewsletterSubscription.tsx
@@ -18,6 +18,7 @@ const NewsletterSubscriptionRoot = styled(RichTypography)(
         borderRadius: 0,
         display: "flex",
         height: typography.pxToRem(36),
+        marginTop: 0,
         marginBottom: typography.pxToRem(30),
         outline: "none",
         padding: `0 ${typography.pxToRem(12)}`,
@@ -37,14 +38,15 @@ const NewsletterSubscriptionRoot = styled(RichTypography)(
     "& #mc_embed_signup input[type=submit]": {
       ...typography.subtitle1,
       background: "none",
-      border: "none",
+      border: `1px solid ${palette.text.secondary}`,
+      padding: `${typography.pxToRem(6)} ${typography.pxToRem(12)}`,
       color: "inherit",
-      padding: 0,
-      textDecoration: "underline",
       textTransform: "capitalize",
     },
     "& #mc_embed_signup input[type=submit]:hover": {
       cursor: "pointer",
+      background: `${palette.text.secondary}`,
+      color: `${palette.text.primary}`,
     },
   }),
 );

From c5879a73504b375387ed59245e45c2803fafb768 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Mon, 24 Jun 2024 12:06:43 +0300
Subject: [PATCH 2/6] feat: separate reset button from the rest of action
 buttons on final form step

---
 apps/roboshield/src/components/Code/Code.tsx | 139 ++++++++++---------
 1 file changed, 77 insertions(+), 62 deletions(-)

diff --git a/apps/roboshield/src/components/Code/Code.tsx b/apps/roboshield/src/components/Code/Code.tsx
index 2c9fefff5..13f3d6563 100644
--- a/apps/roboshield/src/components/Code/Code.tsx
+++ b/apps/roboshield/src/components/Code/Code.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Stack } from "@mui/material";
+import { Box, Button, Grid, Stack } from "@mui/material";
 
 import CodeEditor from "./CodeEditor";
 
@@ -33,67 +33,82 @@ export default function Code(props: CodeProps) {
       }}
     >
       <CodeEditor code={code} setCode={handleCodeChange} readOnly={false} />
-
-      <Stack
-        direction={{
-          xs: "column",
-          sm: "row",
-        }}
-        spacing={2}
-      >
-        <Button
-          variant="contained"
-          color="primary"
-          sx={{ mt: 2 }}
-          onClick={onCopy}
-          disabled={!showButtons}
-        >
-          Copy to Clipboard
-        </Button>
-        <Button
-          variant="contained"
-          sx={{
-            mt: 2,
-            background: "#000000",
-            border: "1px solid #000000",
-            "&:hover": {
-              background: "none",
-              color: "#000000",
-            },
-          }}
-          onClick={onDownload}
-          disabled={!showButtons}
-        >
-          Download
-        </Button>
-        <Button
-          variant="outlined"
-          color="primary"
-          sx={{
-            mt: 2,
-          }}
-          onClick={onBack}
-          disabled={!showButtons}
-        >
-          Back
-        </Button>
-        <Button
-          variant="contained"
-          sx={{
-            mt: 2,
-            background: "#FE2500",
-            border: "1px solid #FE2500",
-            "&:hover": {
-              background: "none",
-              color: "#FE2500",
-            },
-          }}
-          onClick={onReset}
-          disabled={!showButtons}
-        >
-          Reset
-        </Button>
-      </Stack>
+      <Grid container spacing={2}>
+        <Grid item md={8} xs={12}>
+          <Stack
+            direction={{
+              xs: "column",
+              md: "row",
+            }}
+            spacing={2}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{ mt: 2 }}
+              onClick={onCopy}
+              disabled={!showButtons}
+            >
+              Copy to Clipboard
+            </Button>
+            <Button
+              variant="contained"
+              sx={{
+                mt: 2,
+                background: "#000000",
+                border: "1px solid #000000",
+                "&:hover": {
+                  background: "none",
+                  color: "#000000",
+                },
+              }}
+              onClick={onDownload}
+              disabled={!showButtons}
+            >
+              Download
+            </Button>
+            <Button
+              variant="outlined"
+              color="primary"
+              sx={{
+                mt: 2,
+              }}
+              onClick={onBack}
+              disabled={!showButtons}
+            >
+              Back
+            </Button>
+          </Stack>
+        </Grid>
+        <Grid item sx={{ mt: { xs: "20px", md: "0" } }} md={4} xs={12}>
+          <Stack
+            direction={{
+              xs: "column",
+              md: "row",
+            }}
+            alignContent="flex-end"
+            justifyContent="flex-end"
+            spacing={2}
+          >
+            <Button
+              variant="contained"
+              sx={{
+                display: "inline-block",
+                background: "#FE2500",
+                border: "1px solid #FE2500",
+                "&:hover": {
+                  background: "none",
+                  color: "#FE2500",
+                },
+              }}
+              onClick={onReset}
+              disabled={!showButtons}
+            >
+              Reset
+            </Button>
+          </Stack>
+        </Grid>
+      </Grid>
     </Box>
   );
 }

From d5155e6bcc7acd3a69dd023e28b4e764cfc4b1a1 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Mon, 24 Jun 2024 13:16:25 +0300
Subject: [PATCH 3/6] feature: implement jump to last step of robots.txt
 generator form wizard

---
 apps/roboshield/src/pages/index.tsx | 67 ++++++-----------------------
 1 file changed, 12 insertions(+), 55 deletions(-)

diff --git a/apps/roboshield/src/pages/index.tsx b/apps/roboshield/src/pages/index.tsx
index df5828dd1..c930af6f6 100644
--- a/apps/roboshield/src/pages/index.tsx
+++ b/apps/roboshield/src/pages/index.tsx
@@ -1,12 +1,9 @@
 import { Section } from "@commons-ui/core";
-import CloseIcon from "@mui/icons-material/Close";
 import CodeIcon from "@mui/icons-material/Code";
 import {
   IconButton,
   Alert,
   Box,
-  Dialog,
-  DialogContent,
   Paper,
   Stack,
   Step,
@@ -18,7 +15,6 @@ import { useEffect } from "react";
 import React from "react";
 import { useRef, useState } from "react";
 
-import CodeEditor from "@/roboshield/components/Code/CodeEditor";
 import Delays from "@/roboshield/components/Delays";
 import Hero from "@/roboshield/components/Hero";
 import Sitemaps from "@/roboshield/components/Sitemaps";
@@ -44,15 +40,6 @@ export default function Home() {
   const { state, setState } = useGlobalState();
   const [code, setCode] = useState(state.robots || "");
   const scrolRef = useRef<HTMLDivElement | null>(null);
-  const [open, setOpen] = React.useState(false);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
 
   const steps: Step[] = [
     {
@@ -178,13 +165,20 @@ export default function Home() {
                 >
                   <Tooltip title="View current robots.txt file">
                     <IconButton
-                      onClick={handleClickOpen}
+                      onClick={handleStep(steps.length - 1)}
                       sx={{
-                        background: "#1120E1",
-                        color: "#FFFFFF",
+                        color:
+                          activeStep === steps.length - 1
+                            ? "#FFFFFF"
+                            : "#1120E1",
+                        backgroundColor:
+                          activeStep === steps.length - 1
+                            ? "#1120E1"
+                            : "#FFFFFF",
                         border: "1px solid #1120E1",
-                        "&:hover": {
-                          color: "#1120E1",
+                        " :hover": {
+                          backgroundColor: "#1120E1",
+                          color: "#FFFFFF",
                         },
                       }}
                     >
@@ -250,43 +244,6 @@ export default function Home() {
               </Box>
             </Box>
           </Box>
-
-          <Dialog
-            open={open}
-            onClose={handleClose}
-            fullWidth={true}
-            maxWidth="md"
-            aria-labelledby="alert-dialog-title"
-            aria-describedby="alert-dialog-description"
-          >
-            <DialogContent>
-              <Box
-                sx={{
-                  display: "flex",
-                  flexDirection: "row-reverse",
-                  mb: 2,
-                }}
-              >
-                <Tooltip title="Exit preview">
-                  <IconButton
-                    onClick={handleClose}
-                    sx={{
-                      background: "#1120E1",
-                      color: "#FFFFFF",
-                      border: "1px solid #1120E1",
-                      "&:hover": {
-                        color: "#1120E1",
-                      },
-                    }}
-                  >
-                    <CloseIcon />
-                  </IconButton>
-                </Tooltip>
-              </Box>
-
-              <CodeEditor code={code} setCode={() => {}} readOnly={true} />
-            </DialogContent>
-          </Dialog>
         </Stack>
       </Section>
     </>

From 491cf31e1f9dca1e77fd4e7db7700bc989a113c8 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Mon, 24 Jun 2024 19:10:25 +0300
Subject: [PATCH 4/6] fix: update robots.txt generated on clicking the show
 code button

---
 .../src/components/CommonBots/CommonBots.tsx  | 10 ++++
 .../CommonSettings/CommonSettings.tsx         | 14 ++++++
 .../src/components/Delays/Delays.tsx          | 16 ++++++
 .../ExistingRobots/ExistingRobots.tsx         | 15 +++++-
 .../src/components/Finish/Finish.tsx          |  6 +++
 .../src/components/Sitemaps/Sitemaps.tsx      | 14 +++++-
 .../SkipToLastStep/SkipToLastStep.tsx         | 45 +++++++++++++++++
 .../src/components/SkipToLastStep/index.ts    |  3 ++
 .../src/components/StepHint/StepHint.tsx      | 26 ++++++++++
 .../src/components/StepHint/index.ts          |  3 ++
 apps/roboshield/src/pages/index.tsx           | 49 ++++---------------
 apps/roboshield/src/types/stepComponent.ts    |  2 +
 12 files changed, 162 insertions(+), 41 deletions(-)
 create mode 100644 apps/roboshield/src/components/SkipToLastStep/SkipToLastStep.tsx
 create mode 100644 apps/roboshield/src/components/SkipToLastStep/index.ts
 create mode 100644 apps/roboshield/src/components/StepHint/StepHint.tsx
 create mode 100644 apps/roboshield/src/components/StepHint/index.ts

diff --git a/apps/roboshield/src/components/CommonBots/CommonBots.tsx b/apps/roboshield/src/components/CommonBots/CommonBots.tsx
index b591b2b51..0f17e0933 100644
--- a/apps/roboshield/src/components/CommonBots/CommonBots.tsx
+++ b/apps/roboshield/src/components/CommonBots/CommonBots.tsx
@@ -27,10 +27,14 @@ import {
   groupAndSortRobots,
 } from "@/roboshield/lib/robots-data";
 import { StepComponent } from "@/roboshield/types/stepComponent";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function CommonBots({
   handleNext,
   handleBack,
+  handleSkipToLast,
+  hint,
   lastStep,
 }: StepComponent) {
   const { state } = useGlobalState();
@@ -73,8 +77,14 @@ export default function CommonBots({
     handleNext({ bots: selectedBots });
   };
 
+  const skipToLast = () => {
+    handleSkipToLast({ bots: selectedBots });
+  };
+
   return (
     <>
+      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box sx={{ py: 2 }}>
         {
           <FormGroup sx={{ width: "100%" }}>
diff --git a/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx b/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx
index da22c9f11..0ef0caf47 100644
--- a/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx
+++ b/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx
@@ -16,10 +16,14 @@ import StepperNav from "@/roboshield/components/StepperNav";
 import { useGlobalState } from "@/roboshield/context/GlobalContext";
 import { platforms } from "@/roboshield/lib/config";
 import { StepComponent } from "@/roboshield/types/stepComponent";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function CommonSettings({
   handleNext,
   handleBack,
+  handleSkipToLast,
+  hint,
   lastStep,
 }: StepComponent) {
   const { state } = useGlobalState();
@@ -64,8 +68,18 @@ export default function CommonSettings({
     });
   };
 
+  const skipToLast = () => {
+    handleSkipToLast({
+      disallowedPaths,
+      allowedPaths,
+      platform,
+    });
+  };
+
   return (
     <>
+      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box
         sx={{
           width: "100%",
diff --git a/apps/roboshield/src/components/Delays/Delays.tsx b/apps/roboshield/src/components/Delays/Delays.tsx
index a8ea12162..bc4606bf3 100644
--- a/apps/roboshield/src/components/Delays/Delays.tsx
+++ b/apps/roboshield/src/components/Delays/Delays.tsx
@@ -8,10 +8,14 @@ import TimePicker from "@/roboshield/components/TimePicker";
 import Input from "@/roboshield/components/Input";
 import { useGlobalState } from "@/roboshield/context/GlobalContext";
 import { StepComponent } from "@/roboshield/types/stepComponent";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function Delays({
   handleNext,
   handleBack,
+  handleSkipToLast,
+  hint,
   lastStep,
 }: StepComponent) {
   const { state } = useGlobalState();
@@ -51,8 +55,20 @@ export default function Delays({
       visitTimeTo,
     });
   };
+
+  const skipToLast = () => {
+    handleSkipToLast({
+      crawlDelay,
+      cachedDelay,
+      visitTimeFrom,
+      visitTimeTo,
+    });
+  };
+
   return (
     <>
+      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box
         sx={{
           width: "100%",
diff --git a/apps/roboshield/src/components/ExistingRobots/ExistingRobots.tsx b/apps/roboshield/src/components/ExistingRobots/ExistingRobots.tsx
index 0eec6c116..94255baee 100644
--- a/apps/roboshield/src/components/ExistingRobots/ExistingRobots.tsx
+++ b/apps/roboshield/src/components/ExistingRobots/ExistingRobots.tsx
@@ -10,10 +10,14 @@ import StepperNav from "@/roboshield/components/StepperNav";
 import { useGlobalState } from "@/roboshield/context/GlobalContext";
 import { StepComponent } from "@/roboshield/types/stepComponent";
 import { validateUrl } from "@/roboshield/utils/urls";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function ExistingRobots({
   handleNext,
   handleBack,
+  handleSkipToLast,
+  hint,
   lastStep,
 }: StepComponent) {
   const { state } = useGlobalState();
@@ -71,8 +75,18 @@ export default function ExistingRobots({
     });
   };
 
+  const skipToLast = () => {
+    handleSkipToLast({
+      url,
+      shouldFetch,
+      ...robots,
+    });
+  };
+
   return (
     <>
+      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box sx={{ py: 2 }}>
         <FormGroup
           sx={{
@@ -133,7 +147,6 @@ export default function ExistingRobots({
           </Alert>
         )}
       </Box>
-
       <StepperNav
         next={next}
         handleBack={handleBack}
diff --git a/apps/roboshield/src/components/Finish/Finish.tsx b/apps/roboshield/src/components/Finish/Finish.tsx
index d6e599dc0..96e6fc5e7 100644
--- a/apps/roboshield/src/components/Finish/Finish.tsx
+++ b/apps/roboshield/src/components/Finish/Finish.tsx
@@ -8,10 +8,14 @@ import { useGlobalState } from "@/roboshield/context/GlobalContext";
 import { generateRobots } from "@/roboshield/lib/robots";
 import { StepComponent } from "@/roboshield/types/stepComponent";
 import { downloadFile } from "@/roboshield/utils/file";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function Finish({
   handleReset,
   handleBack,
+  hint,
+  lastStep,
 }: StepComponent & { handleReset: () => void }) {
   const { state } = useGlobalState();
   const [code, setCode] = useState(state.robots || "");
@@ -67,6 +71,8 @@ export default function Finish({
 
   return (
     <>
+      <SkipToLastStep handleSkipToLast={() => {}} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box
         sx={{
           py: 3,
diff --git a/apps/roboshield/src/components/Sitemaps/Sitemaps.tsx b/apps/roboshield/src/components/Sitemaps/Sitemaps.tsx
index ed8b7c5c6..83dca5e70 100644
--- a/apps/roboshield/src/components/Sitemaps/Sitemaps.tsx
+++ b/apps/roboshield/src/components/Sitemaps/Sitemaps.tsx
@@ -5,10 +5,14 @@ import StepperNav from "@/roboshield/components/StepperNav";
 
 import { useGlobalState } from "@/roboshield/context/GlobalContext";
 import { StepComponent } from "@/roboshield/types/stepComponent";
+import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
+import StepHint from "@/roboshield/components/StepHint";
 
 export default function Sitemaps({
   handleNext,
   handleBack,
+  handleSkipToLast,
+  hint,
   lastStep,
 }: StepComponent) {
   const { state } = useGlobalState();
@@ -25,8 +29,16 @@ export default function Sitemaps({
     });
   };
 
+  const skipToLast = () => {
+    handleSkipToLast({
+      sitemaps,
+    });
+  };
+
   return (
     <>
+      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <StepHint hint={hint} />
       <Box
         sx={{
           width: "100%",
@@ -41,7 +53,7 @@ export default function Sitemaps({
           style={{
             maxHeight: "300px",
             height: "300px",
-            width: "96%",
+            width: "100%",
             border: "1px solid #C4C4C4",
             borderRadius: "5px",
             padding: "2%",
diff --git a/apps/roboshield/src/components/SkipToLastStep/SkipToLastStep.tsx b/apps/roboshield/src/components/SkipToLastStep/SkipToLastStep.tsx
new file mode 100644
index 000000000..e6dd051b9
--- /dev/null
+++ b/apps/roboshield/src/components/SkipToLastStep/SkipToLastStep.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import { Tooltip, IconButton, Box } from "@mui/material";
+import CodeIcon from "@mui/icons-material/Code";
+
+interface SkipToLastStepProps {
+  handleSkipToLast: () => void;
+  lastStep: boolean;
+}
+
+const SkipToLastStep = ({
+  handleSkipToLast,
+  lastStep,
+}: SkipToLastStepProps) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row-reverse",
+        width: "100%",
+        position: "relative",
+        left: "2%",
+        top: "-150px",
+      }}
+    >
+      <Tooltip title="View current robots.txt file">
+        <IconButton
+          onClick={handleSkipToLast}
+          sx={{
+            color: lastStep ? "#FFFFFF" : "#1120E1",
+            backgroundColor: lastStep ? "#1120E1" : "#FFFFFF",
+            border: "1px solid #1120E1",
+            " :hover": {
+              backgroundColor: "#1120E1",
+              color: "#FFFFFF",
+            },
+          }}
+        >
+          <CodeIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+};
+
+export default SkipToLastStep;
diff --git a/apps/roboshield/src/components/SkipToLastStep/index.ts b/apps/roboshield/src/components/SkipToLastStep/index.ts
new file mode 100644
index 000000000..5eff5fd8f
--- /dev/null
+++ b/apps/roboshield/src/components/SkipToLastStep/index.ts
@@ -0,0 +1,3 @@
+import SkipToLastStep from "./SkipToLastStep";
+
+export default SkipToLastStep;
diff --git a/apps/roboshield/src/components/StepHint/StepHint.tsx b/apps/roboshield/src/components/StepHint/StepHint.tsx
new file mode 100644
index 000000000..7695bcf5f
--- /dev/null
+++ b/apps/roboshield/src/components/StepHint/StepHint.tsx
@@ -0,0 +1,26 @@
+import { Alert } from "@mui/material";
+import React from "react";
+
+interface StepHintProps {
+  hint: String;
+}
+
+const StepHint = ({ hint }: StepHintProps) => {
+  return (
+    <Alert
+      severity="info"
+      sx={{
+        mt: -8,
+        alignItems: "center",
+        fontSize: {
+          xs: "0.8rem",
+          md: "1rem",
+        },
+      }}
+    >
+      {hint}
+    </Alert>
+  );
+};
+
+export default StepHint;
diff --git a/apps/roboshield/src/components/StepHint/index.ts b/apps/roboshield/src/components/StepHint/index.ts
new file mode 100644
index 000000000..ee98e622f
--- /dev/null
+++ b/apps/roboshield/src/components/StepHint/index.ts
@@ -0,0 +1,3 @@
+import StepHint from "./StepHint";
+
+export default StepHint;
diff --git a/apps/roboshield/src/pages/index.tsx b/apps/roboshield/src/pages/index.tsx
index c930af6f6..6248fe1f9 100644
--- a/apps/roboshield/src/pages/index.tsx
+++ b/apps/roboshield/src/pages/index.tsx
@@ -1,5 +1,4 @@
 import { Section } from "@commons-ui/core";
-import CodeIcon from "@mui/icons-material/Code";
 import {
   IconButton,
   Alert,
@@ -94,6 +93,12 @@ export default function Home() {
     handleNext();
   };
 
+  const handleSkipToLast = (data: any) => {
+    const newState = { ...state, ...data };
+    setState(newState);
+    setActiveStep(steps.length - 1);
+  };
+
   const handleStep = (step: number) => () => {
     setActiveStep(step);
   };
@@ -157,35 +162,11 @@ export default function Home() {
               >
                 <Box
                   sx={{
-                    display: "flex",
-                    flexDirection: "row-reverse",
                     px: { xs: 2, md: 0 },
+                    py: "10px",
                     mb: 5,
                   }}
-                >
-                  <Tooltip title="View current robots.txt file">
-                    <IconButton
-                      onClick={handleStep(steps.length - 1)}
-                      sx={{
-                        color:
-                          activeStep === steps.length - 1
-                            ? "#FFFFFF"
-                            : "#1120E1",
-                        backgroundColor:
-                          activeStep === steps.length - 1
-                            ? "#1120E1"
-                            : "#FFFFFF",
-                        border: "1px solid #1120E1",
-                        " :hover": {
-                          backgroundColor: "#1120E1",
-                          color: "#FFFFFF",
-                        },
-                      }}
-                    >
-                      <CodeIcon />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
+                ></Box>
 
                 <Stepper nonLinear activeStep={activeStep}>
                   {steps.map((step, index) => (
@@ -221,21 +202,11 @@ export default function Home() {
                       boxShadow: 0,
                     }}
                   >
-                    <Alert
-                      severity="info"
-                      sx={{
-                        alignItems: "center",
-                        fontSize: {
-                          xs: "0.8rem",
-                          md: "1rem",
-                        },
-                      }}
-                    >
-                      {steps[activeStep].description}
-                    </Alert>
                     <ActiveComponent
+                      hint={steps[activeStep].description}
                       handleNext={handleNextStep}
                       handleBack={handleBack}
+                      handleSkipToLast={handleSkipToLast}
                       lastStep={activeStep === steps.length - 1}
                       handleReset={handleReset}
                     />
diff --git a/apps/roboshield/src/types/stepComponent.ts b/apps/roboshield/src/types/stepComponent.ts
index 882a4a968..91944e6a8 100644
--- a/apps/roboshield/src/types/stepComponent.ts
+++ b/apps/roboshield/src/types/stepComponent.ts
@@ -1,5 +1,7 @@
 export interface StepComponent {
   handleNext: (data: any) => void;
+  handleSkipToLast: (data: any) => void;
   handleBack: () => void;
+  hint: String;
   lastStep: boolean;
 }

From 251173e4d688044af9d1c3e631362091afe56b05 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Tue, 25 Jun 2024 15:52:05 +0300
Subject: [PATCH 5/6] fix: improve codeforafrica footer design

---
 .../NewsletterSubscription/NewsletterSubscription.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.js b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.js
index 5d0a6f657..b4d57590d 100644
--- a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.js
+++ b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.js
@@ -19,6 +19,7 @@ const NewsletterSubscriptionRoot = styled(RichTypography)(
         borderRadius: 0,
         display: "flex",
         height: typography.pxToRem(36),
+        marginTop: 0,
         marginBottom: typography.pxToRem(30),
         outline: "none",
         padding: `0 ${typography.pxToRem(12)}`,
@@ -38,10 +39,15 @@ const NewsletterSubscriptionRoot = styled(RichTypography)(
     "& #mc_embed_signup input[type=submit]": {
       ...typography.subtitle1,
       background: "none",
-      border: "none",
+      border: `1px solid ${palette.text.secondary}`,
       color: "inherit",
-      padding: 0,
-      textDecoration: "underline",
+      padding: `${typography.pxToRem(6)} ${typography.pxToRem(12)}`,
+      textDecoration: "none",
+    },
+    "& #mc_embed_signup input[type=submit]:hover": {
+      cursor: "pointer",
+      background: `${palette.text.secondary}`,
+      color: `${palette.text.primary}`,
     },
   }),
 );

From 4575652936729a77e0cdc0069b7929c5966e9a65 Mon Sep 17 00:00:00 2001
From: Michael Hudson Nkotagu <mnkotagu@gmail.com>
Date: Tue, 25 Jun 2024 16:29:38 +0300
Subject: [PATCH 6/6] fix: update NewsletterSubsrciption snapshot

---
 .../NewsletterSubscription/NewsletterSubscription.snap.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
index f5c1a2718..4d382929e 100644
--- a/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
+++ b/apps/codeforafrica/src/components/NewsletterSubscription/NewsletterSubscription.snap.js
@@ -6,7 +6,7 @@ exports[`<NewsletterSubscription /> renders unchanged 1`] = `
     class="MuiStack-root css-4qg6bb-MuiStack-root"
   >
     <div
-      class="MuiTypography-root MuiTypography-body1 css-1nqhb84-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-xgf7mw-MuiTypography-root"
     >