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 && }
- {!!(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,
},
},
},