fix: styling (#1482)

* fix(components): add isNested * fix(editable): fix boxshadow beign on box * fix(cards): remove full wdith * fix(infopic): full width input --------- Co-authored-by: seaerchin <[email protected]>
isomerpages · Sep 7, 2023 · 7185abc · 7185abc
1 parent 91a6fbc
commit 7185abc
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 18 deletions.
diff --git a/src/layouts/components/ContactUs/ContactCard.tsx b/src/layouts/components/ContactUs/ContactCard.tsx
@@ -232,7 +232,6 @@ export const ContactCard = ({
 
         <Button
           variant="clear"
-          w="100%"
           id={`contacts-${index}`}
           onClick={() => onDelete(`contacts-${index}`, "contact information")}
           alignSelf="center"

diff --git a/src/layouts/components/ContactUs/LocationCard.tsx b/src/layouts/components/ContactUs/LocationCard.tsx
@@ -252,7 +252,6 @@ export const LocationCard = ({
 
         <Button
           variant="clear"
-          w="100%"
           id={`locations-${index}`}
           onClick={() => onDelete(`locations-${index}`, "location")}
           alignSelf="center"

diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx
@@ -319,13 +319,12 @@ const DraggableAccordionItem = ({
           borderRadius={isNested ? "0.375rem" : "0.5rem"}
           {...draggableProvided.draggableProps}
           ref={draggableProvided.innerRef}
-          boxShadow="sm"
+          boxShadow={isNested ? "" : "sm"}
           position="relative"
         >
           {({ isExpanded }) => (
             <Box
               borderRadius={isNested ? "0.375rem" : "0.5rem"}
-              boxShadow={isNested ? "" : "sm"}
               bgColor={
                 isExpanded && isNested
                   ? "base.canvas.brand-subtle"

diff --git a/src/layouts/components/Homepage/HeroDropdownSection.tsx b/src/layouts/components/Homepage/HeroDropdownSection.tsx
@@ -83,6 +83,7 @@ export const HeroDropdownSection = ({
                         isInvalid={_.some(
                           errors.dropdownElems[dropdownOptionIndex]
                         )}
+                        isNested
                       >
                         <Editable.Section>
                           <FormControl

diff --git a/src/layouts/components/Homepage/HeroHighlightSection.tsx b/src/layouts/components/Homepage/HeroHighlightSection.tsx
@@ -101,6 +101,7 @@ export const HeroHighlightSection = ({
                         draggableId={`highlight-${highlightIndex}-draggable`}
                         index={highlightIndex}
                         isInvalid={_.some(errors.highlights[highlightIndex])}
+                        isNested
                       >
                         <Editable.Section>
                           <FormControl

diff --git a/src/layouts/components/Homepage/InfopicBody.tsx b/src/layouts/components/Homepage/InfopicBody.tsx
@@ -1,4 +1,4 @@
-import { FormControl } from "@chakra-ui/react"
+import { FormControl, Box } from "@chakra-ui/react"
 import {
   Button,
   FormErrorMessage,
@@ -96,19 +96,21 @@ export const InfopicBody = ({
         />
         <FormErrorMessage>{errors.url}</FormErrorMessage>
       </FormControl>
-      <FormContext
-        hasError={!!errors.image}
-        onFieldChange={onChange}
-        isRequired
-      >
-        <FormTitle>Image</FormTitle>
-        <FormFieldMedia
-          value={image}
-          id={`section-${index}-infopic-image`}
-          inlineButtonText="Browse"
-        />
-        <FormError>{errors.image}</FormError>
-      </FormContext>
+      <Box w="100%">
+        <FormContext
+          hasError={!!errors.image}
+          onFieldChange={onChange}
+          isRequired
+        >
+          <FormTitle>Image</FormTitle>
+          <FormFieldMedia
+            value={image}
+            id={`section-${index}-infopic-image`}
+            inlineButtonText="Browse"
+          />
+          <FormError>{errors.image}</FormError>
+        </FormContext>
+      </Box>
       <FormControl isRequired isInvalid={!!errors.alt}>
         <FormLabel>Alt text</FormLabel>
         <Input

diff --git a/src/layouts/components/NavBar/GroupMenuBody.tsx b/src/layouts/components/NavBar/GroupMenuBody.tsx
@@ -82,6 +82,7 @@ export const GroupMenuBody = ({
                         index={sublinkIndex}
                         title={sublink.title}
                         isInvalid={_.some(errors.sublinks[sublinkIndex])}
+                        isNested
                       >
                         <Editable.Section mt="-0.5rem">
                           <FormControl