Merge pull request #734 from CodeForAfrica/feat/roboshield_ui

feature/roboshield-ui
CodeForAfrica · Jun 25, 2024 · 98a4e82 · 98a4e82
2 parents 9f1032d + 4575652
commit 98a4e82
Show file tree

Hide file tree

Showing 17 changed files with 255 additions and 154 deletions.
diff --git 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}`,
     },
   }),
 );

diff --git 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"
     >
       
           

diff --git 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>
   );
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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}`,
     },
   }),
 );
-Original file line number
+Diff line change
@@ Expand Up / @@ -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"
         >
@@ Expand Down @@