From 7685bbe74c9000af68395697dafb0617d0eedb43 Mon Sep 17 00:00:00 2001
From: Alexander Lee <alexander@open.gov.sg>
Date: Wed, 6 Sep 2023 17:08:11 +0800
Subject: [PATCH] Fix/edit nav nits (#1476)

* fix: reduce bottom padding of sidebar

* fix: text styling

* fix: padding on add section button

* chore: remove periods from validators

* chore: change placeholder text

* fix: update default values of new sections

* fix: copy changes
---
 src/layouts/EditNavBar.jsx                       | 14 +++++++-------
 src/layouts/components/Editable/Editable.tsx     |  1 +
 src/layouts/components/NavBar/FolderMenuBody.tsx |  2 +-
 src/layouts/components/NavBar/GroupMenuBody.tsx  | 16 +++++++++-------
 src/layouts/components/NavBar/PageMenuBody.tsx   |  4 ++--
 src/utils/validators.js                          |  6 +++---
 6 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/layouts/EditNavBar.jsx b/src/layouts/EditNavBar.jsx
index efe8186215..b541d9d663 100644
--- a/src/layouts/EditNavBar.jsx
+++ b/src/layouts/EditNavBar.jsx
@@ -87,28 +87,28 @@ const EditNavBar = ({ match }) => {
   const errorToast = useErrorToast()
 
   const LinkCollectionSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New folder",
     collection: collections[0],
   })
 
   const LinkResourceSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New resource room",
     resource_room: true,
   })
 
   const LinkPageSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New single page",
     url: "/permalink",
   })
 
   const LinkSublinkSectionConstructor = () => ({
-    title: "Menu Title",
+    title: "New menu group",
     url: "/permalink",
     sublinks: [],
   })
 
   const SublinkSectionConstructor = () => ({
-    title: "Submenu Title",
+    title: "New submenu",
     url: "/permalink",
   })
 
@@ -710,7 +710,7 @@ const EditNavBar = ({ match }) => {
                                     <Editable.DraggableAccordionItem
                                       index={linkIndex}
                                       tag={
-                                        <Tag variant="subtle">Menu Group</Tag>
+                                        <Tag variant="subtle">Menu group</Tag>
                                       }
                                       title={link.title}
                                       isInvalid={
@@ -763,7 +763,7 @@ const EditNavBar = ({ match }) => {
                     </VStack>
                   </Editable.Accordion>
 
-                  <Box p="1.5rem">
+                  <Box px="1.5rem">
                     <AddSectionButton buttonText="Add menu item">
                       <AddSectionButton.List>
                         {/* NOTE: Check if the site contains any collections in `options` 
diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx
index 83bb853ed3..3c5cdec529 100644
--- a/src/layouts/components/Editable/Editable.tsx
+++ b/src/layouts/components/Editable/Editable.tsx
@@ -103,6 +103,7 @@ const EditableSidebar = ({
       bg="base.canvas.alt"
       width="450px"
       overflowY="scroll"
+      pb="1.5rem"
       // NOTE: We reserve 80px **each** for
       // both the header and the footer
       h="calc(100vh - 160px - 1rem)"
diff --git a/src/layouts/components/NavBar/FolderMenuBody.tsx b/src/layouts/components/NavBar/FolderMenuBody.tsx
index 9ea77f3893..cb8755bfd3 100644
--- a/src/layouts/components/NavBar/FolderMenuBody.tsx
+++ b/src/layouts/components/NavBar/FolderMenuBody.tsx
@@ -50,7 +50,7 @@ export const FolderMenuBody = ({
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Item Name</FormLabel>
+        <FormLabel>Menu item name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
index 6d6977406b..71b0b34447 100644
--- a/src/layouts/components/NavBar/GroupMenuBody.tsx
+++ b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -40,7 +40,7 @@ export const GroupMenuBody = ({
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Group Name</FormLabel>
+        <FormLabel>Menu group name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
@@ -52,7 +52,7 @@ export const GroupMenuBody = ({
       <FormControl isRequired isInvalid={!!errors.url}>
         <FormLabel>Destination</FormLabel>
         <Input
-          placeholder="This subtitle appears above the title"
+          placeholder="Enter a /page-url or link for this menu item"
           id={`link-${index}-url`}
           value={url}
           onChange={onChange}
@@ -60,9 +60,11 @@ export const GroupMenuBody = ({
         <FormErrorMessage>{errors.url}</FormErrorMessage>
       </FormControl>
       <FormControl isRequired pt="0.5rem">
-        <FormLabel mb="0.5rem">Submenus</FormLabel>
-        <Text textStyle="caption-2" mb="1.5rem">
-          Cards are displayed side by side on a desktop screen
+        <FormLabel mb="0.5rem" textStyle="h6">
+          Submenus
+        </FormLabel>
+        <Text textStyle="body-2" mb="1.5rem">
+          Cards are displayed side by side on a desktop screens
         </Text>
         <DragDropContext onDragEnd={onDragEnd}>
           <Editable.Droppable width="100%" editableId={`sublink-${index}`}>
@@ -87,7 +89,7 @@ export const GroupMenuBody = ({
                             isRequired
                             isInvalid={!!errors.sublinks[sublinkIndex].title}
                           >
-                            <FormLabel>Submenu Name</FormLabel>
+                            <FormLabel>Submenu name</FormLabel>
                             <Input
                               placeholder="New menu group"
                               id={`sublink-${index}-${sublinkIndex}-title`}
@@ -104,7 +106,7 @@ export const GroupMenuBody = ({
                           >
                             <FormLabel>Destination</FormLabel>
                             <Input
-                              placeholder="/permalink"
+                              placeholder="Enter a /page-url or link for this menu item"
                               id={`sublink-${index}-${sublinkIndex}-url`}
                               value={sublink.url}
                               onChange={onChange}
diff --git a/src/layouts/components/NavBar/PageMenuBody.tsx b/src/layouts/components/NavBar/PageMenuBody.tsx
index 607f73fa77..be60709164 100644
--- a/src/layouts/components/NavBar/PageMenuBody.tsx
+++ b/src/layouts/components/NavBar/PageMenuBody.tsx
@@ -26,7 +26,7 @@ export const PageMenuBody = ({ title, url, index, errors }: PagesBodyProps) => {
   return (
     <Editable.Section>
       <FormControl isRequired isInvalid={!!errors.title}>
-        <FormLabel>Menu Item Name</FormLabel>
+        <FormLabel>Menu item name</FormLabel>
         <Input
           placeholder="This is displayed on the navigation bar"
           id={`link-${index}-title`}
@@ -38,7 +38,7 @@ export const PageMenuBody = ({ title, url, index, errors }: PagesBodyProps) => {
       <FormControl isRequired isInvalid={!!errors.url}>
         <FormLabel>Destination</FormLabel>
         <Input
-          placeholder="This subtitle appears above the title"
+          placeholder="Enter a /page-url or link for this menu item"
           id={`link-${index}-url`}
           value={url}
           onChange={onChange}
diff --git a/src/utils/validators.js b/src/utils/validators.js
index 127334f9d6..752ffcde0d 100644
--- a/src/utils/validators.js
+++ b/src/utils/validators.js
@@ -677,15 +677,15 @@ const validateLink = (linkType, value) => {
   switch (linkType) {
     case "title":
       if (value.length < LINK_TITLE_MIN_LENGTH) {
-        errorMessage = `Title cannot be empty.`
+        errorMessage = `Name cannot be empty`
       }
       if (value.length > LINK_TITLE_MAX_LENGTH) {
-        errorMessage = `Title should be shorter than ${LINK_TITLE_MAX_LENGTH} characters.`
+        errorMessage = `Name should be shorter than ${LINK_TITLE_MAX_LENGTH} characters`
       }
       break
     case "url":
       if (value.length < LINK_URL_MIN_LENGTH) {
-        errorMessage = `Permalink cannot be empty.`
+        errorMessage = `Destination cannot be empty`
       }
       break
     default: