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}`, }, }), ); 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[` renders unchanged 1`] = ` class="MuiStack-root css-4qg6bb-MuiStack-root" >
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) { }} > - - - - - - - + + + + + + + + + + + + + + ); } 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 ( <> + + { 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 ( <> + + { + handleSkipToLast({ + crawlDelay, + cachedDelay, + visitTimeFrom, + visitTimeTo, + }); + }; + return ( <> + + { + handleSkipToLast({ + url, + shouldFetch, + ...robots, + }); + }; + return ( <> + + )} - void }) { const { state } = useGlobalState(); const [code, setCode] = useState(state.robots || ""); @@ -67,6 +71,8 @@ export default function Finish({ return ( <> + {}} lastStep={lastStep} /> + 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}`, }, }), ); 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 ( <> + + void; + lastStep: boolean; +} + +const SkipToLastStep = ({ + handleSkipToLast, + lastStep, +}: SkipToLastStepProps) => { + return ( + + + + + + + + ); +}; + +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 ( + + {hint} + + ); +}; + +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 695b5045a..1cbadab0f 100644 --- a/apps/roboshield/src/pages/index.tsx +++ b/apps/roboshield/src/pages/index.tsx @@ -1,12 +1,8 @@ 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 +14,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"; @@ -45,15 +40,6 @@ export default function Home() { const { state, setState } = useGlobalState(); const [code, setCode] = useState(state.robots || ""); const scrolRef = useRef(null); - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; const steps: Step[] = [ { @@ -108,6 +94,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); }; @@ -171,28 +163,11 @@ export default function Home() { > - - - - - - + > {steps.map((step, index) => ( @@ -228,21 +203,11 @@ export default function Home() { boxShadow: 0, }} > - - {steps[activeStep].description} - @@ -251,43 +216,6 @@ export default function Home() { - - - - - - - - - - - - {}} readOnly={true} /> - - 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; }