feat: Reposition and style help text button (#2435)

* feat: Reposition and style help text button * feat: Remove border radius from button
theopensystemslab · Nov 27, 2023 · afa35c0 · afa35c0
1 parent 960deaa
commit afa35c0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 41 deletions.
diff --git 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"
         >
-          <span>Help</span>
+          <span>Info</span>
         </InfoButton>
       )}
       <MoreInfo open={open} handleClose={() => setOpen(false)}>

diff --git 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> = (props) => {
           policyRef={props.policyRef}
           howMeasured={props.howMeasured}
         />
-        <Container
-          customColor={props.color}
-          mt={{ xs: 9, sm: 10, md: 12, contentWrap: 6 }}
-        >
+        <Container customColor={props.color}>
           <Content>
             <TitleWrap>
               <ErrorOutline sx={{ width: 34, height: 34 }} />

diff --git 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
@@ -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,15 @@ 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,
   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 +105,7 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
 
   return (
     <>
-      <Box mb={1}>
+      <Box mb={1} sx={{ minHeight: "2em" }}>
         {title && (
           <TitleWrapper mr={1} pt={0.5}>
             <Typography
@@ -136,6 +129,22 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
             </Typography>
           </Description>
         )}
+        {!!(info || policyRef || howMeasured) && (
+          <HelpButtonWrapper>
+            <HelpButton
+              title={`More information`}
+              aria-label={`See more information about "${title}"`}
+              onClick={handleHelpClick}
+              aria-haspopup="dialog"
+              data-testid="more-info-button"
+              variant="outlined"
+              color="primary"
+              sx={{ width: "100%" }}
+            >
+              Help
+            </HelpButton>
+          </HelpButtonWrapper>
+        )}
         <MoreInfo open={open} handleClose={() => setOpen(false)}>
           {info && info !== emptyContent ? (
             <MoreInfoSection title="Why does it matter?">
@@ -160,21 +169,6 @@ const QuestionHeader: React.FC<IQuestionHeader> = ({
         </MoreInfo>
         {img && <Image src={img} alt="question" />}
       </Box>
-      {!!(info || policyRef || howMeasured) && (
-        <HelpButtonWrapper>
-          <HelpButton
-            title={`More information`}
-            aria-label={`See more information about "${title}"`}
-            onClick={handleHelpClick}
-            aria-haspopup="dialog"
-            data-testid="more-info-button"
-            variant="contained"
-            sx={{ width: "100%" }}
-          >
-            Help
-          </HelpButton>
-        </HelpButtonWrapper>
-      )}
     </>
   );
 };

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -258,9 +258,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,
             },
           },
         },