diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx index e11537ca0e..7d87ddb32d 100644 --- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx +++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx @@ -307,7 +307,7 @@ const InteractiveFileListItem = (props: FileListItemProps) => { aria-haspopup="dialog" size="small" > - Help + Info )} setOpen(false)}> diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx index b7a1dc6195..8117dcf3c9 100644 --- a/editor.planx.uk/src/@planx/components/Notice/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Notice/Public.tsx @@ -91,10 +91,7 @@ const NoticeComponent: React.FC = (props) => { policyRef={props.policyRef} howMeasured={props.howMeasured} /> - + diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx index 363c820661..bcf9dfe52b 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/Card.tsx @@ -24,6 +24,7 @@ export const contentFlowSpacing = (theme: Theme): React.CSSProperties => ({ const InnerContainer = styled(Box)(({ theme }) => ({ maxWidth: "100%", + position: "relative", "& > * + *": { ...contentFlowSpacing(theme), }, diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx index 0f656c63cc..2274cd172f 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Preview/QuestionHeader.tsx @@ -11,7 +11,7 @@ import { DESCRIPTION_TEXT } from "../constants"; import MoreInfo from "./MoreInfo"; import MoreInfoSection from "./MoreInfoSection"; -const HelpButtonMinWidth = "75px"; +const HelpButtonMinWidth = "70px"; interface IQuestionHeader { title?: string; @@ -30,7 +30,7 @@ const Description = styled(Box)(({ theme }) => ({ const TitleWrapper = styled(Box)(({ theme }) => ({ width: theme.breakpoints.values.formWrap, - maxWidth: `calc(100% - ${HelpButtonMinWidth})`, + maxWidth: `calc(100% - (${HelpButtonMinWidth} + 4px))`, [theme.breakpoints.up("contentWrap")]: { maxWidth: "100%", }, @@ -45,21 +45,19 @@ const HelpButtonWrapper = styled(Box)(({ theme }) => ({ display: "flex", justifyContent: "stretch", width: HelpButtonMinWidth, - top: theme.spacing(6), - right: 0, - [theme.breakpoints.up("sm")]: { - top: theme.spacing(6.5), - }, + top: "-4px", + right: "-6px", [theme.breakpoints.up("md")]: { - top: theme.spacing(8.5), - width: "110px", + width: "80px", + top: 0, + right: 0, }, [theme.breakpoints.up("lg")]: { - width: "140px", + width: "100px", }, "#embedded-browser &": { + top: "-60px", width: "80px", - top: theme.spacing(13), }, })); @@ -68,20 +66,16 @@ export const HelpButton = styled(Button)(({ theme }) => ({ position: "sticky", right: 0, minHeight: "44px", - padding: "0.35em 1em", + padding: "0.35em 0.5em", alignSelf: "flex-start", - borderRadius: "50px 0 0 50px", minWidth: "100%", boxShadow: "none", - backgroundColor: theme.palette.text.primary, + borderRadius: "3px", fontSize: "1.125em", - filter: "drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5))", - [theme.breakpoints.up("md")]: { - padding: "0.35em 1em 0.35em 0.5em", - }, + filter: "drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5))", [theme.breakpoints.up("lg")]: { minHeight: "48px", - fontSize: "1.375em", + fontSize: "1.25em", top: theme.spacing(1), }, "#embedded-browser &": { @@ -112,7 +106,7 @@ const QuestionHeader: React.FC = ({ return ( <> - + {title && ( = ({ )} + {!!(info || policyRef || howMeasured) && ( + + + Help + + + )} setOpen(false)}> {info && info !== emptyContent ? ( @@ -160,21 +170,6 @@ const QuestionHeader: React.FC = ({ {img && question} - {!!(info || policyRef || howMeasured) && ( - - - Help - - - )} ); }; diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts index cdfda2e22f..dc08903c53 100644 --- a/editor.planx.uk/src/theme.ts +++ b/editor.planx.uk/src/theme.ts @@ -263,9 +263,13 @@ const getThemeOptions = (primaryColor: string): ThemeOptions => { }, outlined: { borderWidth: "2px 2px 3px", - borderColor: "currentcolor", + borderColor: palette.primary.main, + color: palette.text.primary, + backgroundColor: palette.common.white, "&:hover": { borderWidth: "2px 2px 3px", + backgroundColor: palette.primary.dark, + color: palette.common.white, }, }, },