Fix/style nits (#1483)

* fix(nested-cards): fix spacing to 0.75rem * fix(editable): set extra padding * fix(edithoempage): fix errors * fix(cardssection): remove errorneous spacing * fix(cards): remove extra margins * fix(hero/infopic): update margins * fix(editable): remove padding --------- Co-authored-by: seaerchin <[email protected]>
isomerpages · Sep 7, 2023 · 5470322 · 5470322
1 parent 7185abc
commit 5470322
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 68 deletions.
diff --git a/src/layouts/EditHomepage/EditHomepage.jsx b/src/layouts/EditHomepage/EditHomepage.jsx
@@ -966,11 +966,17 @@ const EditHomepage = ({ match }) => {
                                   <HeroDropdownSection
                                     {...section.hero.dropdown}
                                     state={section.hero}
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      ...errors.sections[0].hero,
+                                    }}
                                   />
                                 ) : (
                                   <HeroHighlightSection
-                                    errors={errors}
+                                    errors={{
+                                      ...errors,
+                                      ...errors.sections[0].hero,
+                                    }}
                                     highlights={section.hero.key_highlights}
                                   />
                                 )

diff --git a/src/layouts/components/ContactUs/CardsSection.tsx b/src/layouts/components/ContactUs/CardsSection.tsx
@@ -62,7 +62,7 @@ export const CardsSection = ({
             subtitle={CONTACTUS_EMPTY_SECTION_SUBTITLE[contactUsType]}
             isEmpty={cardFrontMatter.length === 0}
           >
-            <VStack p={0} spacing="1.125rem">
+            <VStack p={0} spacing="1.25rem">
               {cardFrontMatter.map((card, index) => (
                 <>
                   {contactUsType === "locations" ? (

diff --git a/src/layouts/components/ContactUs/LocationCard.tsx b/src/layouts/components/ContactUs/LocationCard.tsx
@@ -133,7 +133,7 @@ export const LocationCard = ({
               isEmpty={frontMatter.operating_hours.length === 0}
             >
               <Editable.Accordion>
-                <VStack p={0} spacing="1.125rem">
+                <VStack p={0} spacing="0.75rem">
                   {frontMatter.operating_hours.map(
                     (operatingHour, operatingHourIndex) => (
                       <Editable.DraggableAccordionItem
@@ -222,7 +222,6 @@ export const LocationCard = ({
                             }
                             alignSelf="center"
                             colorScheme="critical"
-                            mt="0.5rem"
                           >
                             Delete operating hours
                           </Button>

diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
@@ -120,7 +120,7 @@ export const HeroBody = ({
             onFieldChange={onChange}
             isRequired
           >
-            <Box mb="0.5rem">
+            <Box mb="0.75rem">
               <FormTitle>Hero background image</FormTitle>
             </Box>
             <FormFieldMedia

diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx
@@ -69,7 +69,7 @@ export const HeroDropdownSection = ({
               subtitle="Add options to allow users to quickly navigate your site"
               isEmpty={state.dropdown.options.length === 0}
             >
-              <Editable.Section px={0} spacing="1.25rem" py="1.5rem">
+              <Editable.Section px={0} spacing="0.75rem" py="1.5rem">
                 {state.dropdown.options.map(
                   (
                     { title: optionTitle, url: optionUrl },
@@ -131,7 +131,6 @@ export const HeroDropdownSection = ({
                             alignSelf="center"
                             variant="clear"
                             colorScheme="critical"
-                            mt="1rem"
                           >
                             Delete option
                           </Button>

diff --git a/src/layouts/components/Homepage/HeroHighlightSection.tsx b/src/layouts/components/Homepage/HeroHighlightSection.tsx
@@ -85,7 +85,7 @@ export const HeroHighlightSection = ({
               title="Highlights you add will appear here"
               subtitle="You can call out informative links using highlights"
             >
-              <Editable.Section px={0} spacing="1.25rem" py="1.5rem">
+              <Editable.Section px={0} spacing="0.75rem" py="1.5rem">
                 {highlights.map(
                   (
                     {
@@ -164,7 +164,6 @@ export const HeroHighlightSection = ({
                             alignSelf="center"
                             variant="clear"
                             colorScheme="critical"
-                            mt="1rem"
                           >
                             Delete highlight
                           </Button>

diff --git a/src/layouts/components/Homepage/InfopicBody.tsx b/src/layouts/components/Homepage/InfopicBody.tsx
@@ -102,7 +102,9 @@ export const InfopicBody = ({
           onFieldChange={onChange}
           isRequired
         >
-          <FormTitle>Image</FormTitle>
+          <Box mb="0.75rem">
+            <FormTitle>Image</FormTitle>
+          </Box>
           <FormFieldMedia
             value={image}
             id={`section-${index}-infopic-image`}

diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -74,64 +74,62 @@ export const GroupMenuBody = ({
               isEmpty={sublinks.length === 0}
             >
               <Editable.Accordion>
-                <VStack p={0} spacing="1.25rem">
+                <VStack p={0} spacing="0.75rem">
                   {sublinks.map((sublink, sublinkIndex) => (
-                    <VStack w="100%">
-                      <Editable.DraggableAccordionItem
-                        draggableId={`sublink-${index}-${sublinkIndex}-draggable`}
-                        index={sublinkIndex}
-                        title={sublink.title}
-                        isInvalid={_.some(errors.sublinks[sublinkIndex])}
-                        isNested
-                      >
-                        <Editable.Section mt="-0.5rem">
-                          <FormControl
-                            isRequired
-                            isInvalid={!!errors.sublinks[sublinkIndex].title}
-                          >
-                            <FormLabel>Submenu name</FormLabel>
-                            <Input
-                              placeholder="New menu group"
-                              id={`sublink-${index}-${sublinkIndex}-title`}
-                              value={sublink.title}
-                              onChange={onChange}
-                            />
-                            <FormErrorMessage>
-                              {errors.sublinks[sublinkIndex].title}
-                            </FormErrorMessage>
-                          </FormControl>
-                          <FormControl
-                            isRequired
-                            isInvalid={!!errors.sublinks[sublinkIndex].url}
-                          >
-                            <FormLabel>Destination</FormLabel>
-                            <Input
-                              placeholder="Enter a /page-url or link for this menu item"
-                              id={`sublink-${index}-${sublinkIndex}-url`}
-                              value={sublink.url}
-                              onChange={onChange}
-                            />
-                            <FormErrorMessage>
-                              {errors.sublinks[sublinkIndex].url}
-                            </FormErrorMessage>
-                          </FormControl>
-                          <Button
-                            id={`section-${index}-${sublinkIndex}`}
-                            onClick={() =>
-                              onDelete(
-                                `sublink-${index}-${sublinkIndex}`,
-                                "Submenu"
-                              )
-                            }
-                            alignSelf="center"
-                            variant="clear"
-                            colorScheme="critical"
-                          >
-                            Delete submenu
-                          </Button>
-                        </Editable.Section>
-                      </Editable.DraggableAccordionItem>
-                    </VStack>
+                    <Editable.DraggableAccordionItem
+                      draggableId={`sublink-${index}-${sublinkIndex}-draggable`}
+                      index={sublinkIndex}
+                      title={sublink.title}
+                      isInvalid={_.some(errors.sublinks[sublinkIndex])}
+                      isNested
+                    >
+                      <Editable.Section mt="-0.5rem">
+                        <FormControl
+                          isRequired
+                          isInvalid={!!errors.sublinks[sublinkIndex].title}
+                        >
+                          <FormLabel>Submenu name</FormLabel>
+                          <Input
+                            placeholder="New menu group"
+                            id={`sublink-${index}-${sublinkIndex}-title`}
+                            value={sublink.title}
+                            onChange={onChange}
+                          />
+                          <FormErrorMessage>
+                            {errors.sublinks[sublinkIndex].title}
+                          </FormErrorMessage>
+                        </FormControl>
+                        <FormControl
+                          isRequired
+                          isInvalid={!!errors.sublinks[sublinkIndex].url}
+                        >
+                          <FormLabel>Destination</FormLabel>
+                          <Input
+                            placeholder="Enter a /page-url or link for this menu item"
+                            id={`sublink-${index}-${sublinkIndex}-url`}
+                            value={sublink.url}
+                            onChange={onChange}
+                          />
+                          <FormErrorMessage>
+                            {errors.sublinks[sublinkIndex].url}
+                          </FormErrorMessage>
+                        </FormControl>
+                        <Button
+                          id={`section-${index}-${sublinkIndex}`}
+                          onClick={() =>
+                            onDelete(
+                              `sublink-${index}-${sublinkIndex}`,
+                              "Submenu"
+                            )
+                          }
+                          alignSelf="center"
+                          variant="clear"
+                          colorScheme="critical"
+                        >
+                          Delete submenu
+                        </Button>
+                      </Editable.Section>
+                    </Editable.DraggableAccordionItem>
                   ))}
                 </VStack>
               </Editable.Accordion>