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
isomerpages · Sep 7, 2023 · 7685bbe · 7685bbe
1 parent fa25a5c
commit 7685bbe
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,17 +52,19 @@ 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}
         />
         <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
@@ -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
@@ -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: