feat: Editor styles and layout update

theopensystemslab · Nov 28, 2023 · 775e0df · 775e0df
1 parent 0f9bbc2
commit 775e0df
Show file tree

Hide file tree

Showing 17 changed files with 169 additions and 114 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -146,7 +146,7 @@ const OptionEditor: React.FC<{
 
 const Options: React.FC<{ formik: FormikHookReturn }> = ({ formik }) => {
   return (
-    <ModalSectionContent title="Options">
+    <ModalSectionContent subtitle="Options">
       {formik.values.groupedOptions ? (
         <Box>
           {formik.values.groupedOptions.map(

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -44,7 +44,7 @@ const OptionEditor: React.FC<{
       {props.value.id && (
         <input type="hidden" value={props.value.id} readOnly />
       )}
-      <InputRowItem width="50%">
+      <InputRowItem width="100%">
         <Input
           // required
           format="bold"
@@ -86,6 +86,7 @@ const OptionEditor: React.FC<{
             },
           });
         }}
+        sx={{ width: "160px", maxWidth: "160px" }}
       />
     </InputRow>
     <InputRow>
@@ -210,7 +211,7 @@ export const Question: React.FC<Props> = (props) => {
           </InputGroup>
         </ModalSectionContent>
 
-        <ModalSectionContent title="Options">
+        <ModalSectionContent subtitle="Options">
           <ListManager
             values={formik.values.options}
             onChange={(newOptions) => {

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/DesignSettings.tsx
@@ -58,7 +58,9 @@ const DesignSettings: React.FC = () => {
         <InputGroup flowSpacing>
           <InputLegend>Logo</InputLegend>
           <InputCaption>
-            Set the logo to be used in the header of the service.
+            Set the logo to be used in the header of the service. The logo
+            should contrast with a dark background colour and have a transparent
+            background.
           </InputCaption>
           <Link variant="body2" href="https://www.planx.uk">
             See our guide for logos

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/ServiceSettings.tsx
@@ -4,8 +4,10 @@ import Switch, { SwitchProps } from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { useFormik } from "formik";
 import React from "react";
+import EditorRow from "ui/EditorRow";
 import Input, { Props as InputProps } from "ui/Input";
 import InputGroup from "ui/InputGroup";
+import InputLegend from "ui/InputLegend";
 import InputRow from "ui/InputRow";
 import InputRowItem from "ui/InputRowItem";
 import RichTextInput from "ui/RichTextInput";
@@ -29,8 +31,8 @@ const TextInput: React.FC<{
   contentInputProps,
 }) => {
   return (
-    <Box mb={2} width="100%">
-      <Box my={2} display="flex" alignItems="center">
+    <Box width="100%">
+      <Box mb={2} display="flex" alignItems="center">
         <Switch {...switchProps} color="primary" />
         <Typography variant="h4" component="h5">
           {title}
@@ -98,15 +100,15 @@ const ServiceSettings: React.FC = () => {
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <Box pb={3} borderBottom={1}>
+      <EditorRow>
         <Typography variant="h2" component="h3" gutterBottom>
           Elements
         </Typography>
         <Typography variant="body1">
           Manage the features that users will be able to see
         </Typography>
-      </Box>
-      <Box borderBottom={1} pb={3}>
+      </EditorRow>
+      <EditorRow background>
         <TextInput
           title="Legal Disclaimer"
           description="Displayed before a user submits their application"
@@ -126,61 +128,61 @@ const ServiceSettings: React.FC = () => {
             onChange: formik.handleChange,
           }}
         />
-      </Box>
-      <Box pt={2}>
-        <Typography variant="h3" component="h4">
-          <strong>Footer Links</strong>
-        </Typography>
-        <InputGroup>
-          <TextInput
-            title="Help Page"
-            richText
-            description="A place to communicate FAQs, useful tips, or contact information"
-            switchProps={{
-              name: "elements.help.show",
-              checked: formik.values.elements?.help?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.help.heading",
-              value: formik.values.elements?.help?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.help.content",
-              value: formik.values.elements?.help?.content,
-              onChange: formik.handleChange,
-            }}
-          />
-
-          <TextInput
-            title="Privacy Page"
-            richText
-            description="Your privacy policy"
-            switchProps={{
-              name: "elements.privacy.show",
-              checked: formik.values.elements?.privacy?.show,
-              onChange: formik.handleChange,
-            }}
-            headingInputProps={{
-              name: "elements.privacy.heading",
-              value: formik.values.elements?.privacy?.heading,
-              onChange: formik.handleChange,
-            }}
-            contentInputProps={{
-              name: "elements.privacy.content",
-              value: formik.values.elements?.privacy?.content,
-              onChange: formik.handleChange,
-            }}
-          />
+      </EditorRow>
+      <EditorRow background>
+        <InputGroup flowSpacing>
+          <InputLegend>Footer Links</InputLegend>
+          <InputRow>
+            <TextInput
+              title="Help Page"
+              richText
+              description="A place to communicate FAQs, useful tips, or contact information"
+              switchProps={{
+                name: "elements.help.show",
+                checked: formik.values.elements?.help?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.help.heading",
+                value: formik.values.elements?.help?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.help.content",
+                value: formik.values.elements?.help?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
+          <InputRow>
+            <TextInput
+              title="Privacy Page"
+              richText
+              description="Your privacy policy"
+              switchProps={{
+                name: "elements.privacy.show",
+                checked: formik.values.elements?.privacy?.show,
+                onChange: formik.handleChange,
+              }}
+              headingInputProps={{
+                name: "elements.privacy.heading",
+                value: formik.values.elements?.privacy?.heading,
+                onChange: formik.handleChange,
+              }}
+              contentInputProps={{
+                name: "elements.privacy.content",
+                value: formik.values.elements?.privacy?.content,
+                onChange: formik.handleChange,
+              }}
+            />
+          </InputRow>
         </InputGroup>
-
-        <Box py={2} justifyContent="flex-end" mb={4}>
-          <Button type="submit" variant="contained" color="primary">
-            Save
-          </Button>
-        </Box>
-      </Box>
+      </EditorRow>
+      <EditorRow>
+        <Button type="submit" variant="contained" color="primary">
+          Update elements
+        </Button>
+      </EditorRow>
     </form>
   );
 };

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/index.tsx
@@ -56,10 +56,11 @@ interface LinkTabProps {
   href?: string;
 }
 
-const StyledTab = styled(Tab)(() => ({
+const StyledTab = styled(Tab)(({ theme }) => ({
   position: "relative",
   zIndex: 1,
   textTransform: "none",
+  background: theme.palette.background.default,
 })) as typeof Tab;
 
 function LinkTab(props: LinkTabProps) {
@@ -84,16 +85,16 @@ const classes = {
   tabIndicator: `${PREFIX}-tabIndicator`,
 };
 
-const Root = styled(Box)(() => ({
+const Root = styled(Box)(({ theme }) => ({
   flexGrow: 1,
-  backgroundColor: "#f2f2f2",
+  backgroundColor: theme.palette.background.default,
   position: "absolute",
   top: HEADER_HEIGHT,
   left: 0,
   right: 0,
   minHeight: `calc(100% - ${HEADER_HEIGHT}px)`,
   [`& .${classes.tabs}`]: {
-    backgroundColor: "#ddd",
+    backgroundColor: theme.palette.border.main,
   },
   [`& .${classes.tabIndicator}`]: {
     height: "100%",

diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -21,23 +21,27 @@ import { useStore } from "../../lib/store";
 const StyledDialog = styled(Dialog)(({ theme }) => ({
   // Target all modal sections (the direct child is the backdrop, hence the double child selector)
   "& > * > *": {
-    backgroundColor: theme.palette.grey[100],
+    backgroundColor: theme.palette.background.paper,
   },
 }));
 
 const CloseButton = styled(IconButton)(({ theme }) => ({
-  float: "right",
-  margin: 0,
-  padding: 0,
+  margin: "0 0 0 auto",
+  padding: theme.spacing(1),
   color: theme.palette.grey[600],
 }));
 
+const TypeSelect = styled("select")(() => ({
+  fontSize: "1em",
+  padding: "0.25em",
+}));
+
 const NodeTypeSelect: React.FC<{
   value: string;
   onChange: (newValue: string) => void;
 }> = (props) => {
   return (
-    <select
+    <TypeSelect
       value={fromSlug(props.value)}
       onChange={(ev) => {
         props.onChange(ev.target.value);
@@ -85,7 +89,7 @@ const NodeTypeSelect: React.FC<{
       <optgroup label="Outputs">
         <option value={TYPES.Send}>Send</option>
       </optgroup>
-    </select>
+    </TypeSelect>
   );
 };
 
@@ -120,7 +124,14 @@ const FormModal: React.FC<{
       disableScrollLock
       onClose={handleClose}
     >
-      <DialogTitle>
+      <DialogTitle
+        sx={{
+          py: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
         {!handleDelete && (
           <NodeTypeSelect
             value={type}

diff --git a/editor.planx.uk/src/ui/ColorPicker.tsx b/editor.planx.uk/src/ui/ColorPicker.tsx
@@ -65,9 +65,10 @@ const StyledButtonBase = styled(ButtonBase, {
   display: "flex",
   alignItems: "center",
   textAlign: "left",
-  padding: theme.spacing(1, 2),
+  padding: theme.spacing(1),
   whiteSpace: "nowrap",
   backgroundColor: theme.palette.common.white,
+  border: `1px solid ${theme.palette.border.light}`,
   ...(show && {
     color: theme.palette.primary.dark,
     "& .swatch": {

diff --git a/editor.planx.uk/src/ui/EditorRow.tsx b/editor.planx.uk/src/ui/EditorRow.tsx
@@ -12,18 +12,18 @@ const Root = styled(Box, {
 })<RootProps>(({ background, theme }) => ({
   display: "block",
   width: "100%",
-  padding: theme.spacing(2.5),
+  padding: theme.spacing(2.5, 0),
   "&:first-of-type": {
     paddingTop: 0,
   },
   "& > * + *": {
     ...contentFlowSpacing(theme),
   },
   ...(background && {
-    background: theme.palette.common.white,
+    background: theme.palette.background.paper,
     marginTop: theme.spacing(2),
-    border: `1px solid #e5e9f2`,
-    filter: `drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 0px)`,
+    padding: theme.spacing(2.5),
+    border: `1px solid ${theme.palette.border.light}`,
   }),
 }));
 

diff --git a/editor.planx.uk/src/ui/ImgInput.tsx b/editor.planx.uk/src/ui/ImgInput.tsx
@@ -12,16 +12,17 @@ import PublicFileUploadButton from "./PublicFileUploadButton";
 
 const ImageUploadContainer = styled(Box)(() => ({
   height: 50,
-  width: 50,
   position: "relative",
+  flexGrow: 0,
+  display: "flex",
+  flexDirection: "row-reverse",
+  alignItems: "center",
 }));
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  position: "absolute",
   backgroundColor: "rgba(0, 0, 0, 0.5)",
   color: theme.palette.common.white,
-  top: 0,
-  right: 0,
+  marginLeft: theme.spacing(0.5),
 }));
 
 /** Uploads an image and returns corresponding URL */

diff --git a/editor.planx.uk/src/ui/Input.tsx b/editor.planx.uk/src/ui/Input.tsx
@@ -37,26 +37,36 @@ const StyledInputBase = styled(InputBase, {
   shouldForwardProp: (prop) =>
     !["format", "bordered"].includes(prop.toString()),
 })<StyledInputBase>(({ theme, format, bordered }) => ({
-  backgroundColor: "#fff",
+  backgroundColor: theme.palette.common.white,
   // Maintain 16px minimum input size to prevent zoom on iOS
   fontSize: "1rem",
   width: "100%",
   padding: theme.spacing(0, 1.5),
   height: 50,
+  border: `1px solid ${theme.palette.border.light}`,
   "& input": {
     fontWeight: "inherit",
   },
+  "& ::placeholder": {
+    color: theme.palette.text.secondary,
+    opacity: "0.5",
+  },
+  "&:focus-within": {
+    border: `1px solid ${theme.palette.border.input}`,
+    boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.input}`,
+    outline: `3px solid ${theme.palette.action.focus}`,
+  },
   ...(bordered && {
     border: `2px solid ${theme.palette.text.primary}`,
   }),
   ...(format === "data" && {
-    backgroundColor: "#fafafa",
+    backgroundColor: theme.palette.common.white,
   }),
   ...(format === "bold" && {
     fontWeight: FONT_WEIGHT_SEMI_BOLD,
   }),
   ...(format === "large" && {
-    backgroundColor: "#fff",
+    backgroundColor: theme.palette.common.white,
     height: 50,
     fontSize: 25,
     width: "100%",