Fix/styles (#1560)

* fix(annnouncementobdy): remove extra sentenee * fix(hero): fix minor ints * fix(textcardsbody): remove form control from whole group * fix(hero): update styles * fix(hero): update styles
isomerpages · Oct 4, 2023 · 4ad3c38 · 4ad3c38
1 parent 947b817
commit 4ad3c38
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 123 deletions.
diff --git a/src/layouts/components/Homepage/AnnouncementBody.tsx b/src/layouts/components/Homepage/AnnouncementBody.tsx
@@ -74,8 +74,7 @@ export const AnnouncementBody = ({
         <Editable.Droppable editableId="announcement">
           <Text textStyle="h5">Announcements</Text>
           <Text mt="0.5rem" textStyle="body-2" textColor="base.content.medium">
-            {`You can display up to ${MAX_ANNOUNCEMENTS} announcements at a time. Newly added
-            announcements are shown on the top of the list`}
+            {`You can display up to ${MAX_ANNOUNCEMENTS} announcements at a time.`}
           </Text>
 
           <Editable.Accordion

diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
@@ -450,10 +450,14 @@ export const HeroBody = ({
       <Divider my="1.5rem" />
       <Editable.Section spacing="0.75rem">
         <Box w="100%">
-          <Text textStyle="h5" mb="0.75rem">
+          <Text textStyle="h5" mb="1rem">
             Hero Interactions
           </Text>
-          <Text textStyle="subhead-1" mb="0.25rem">
+          <Text
+            textStyle="subhead-1"
+            mb="0.25rem"
+            textColor="base.content.strong"
+          >
             Content type
           </Text>
           <Radio.RadioGroup

diff --git a/src/layouts/components/Homepage/HeroHighlightSection.tsx b/src/layouts/components/Homepage/HeroHighlightSection.tsx
@@ -48,7 +48,7 @@ export const HeroHighlightSection = ({
         <Editable.Droppable editableId="highlight">
           <VStack spacing="1.25rem" align="flex-start" p={0}>
             <FormControl isRequired isInvalid={!!errors.button}>
-              <FormLabel>Button Text</FormLabel>
+              <FormLabel>Button text</FormLabel>
               <Input
                 id="section-0-hero-button"
                 placeholder="This is a button"

diff --git a/src/layouts/components/Homepage/TextCardsBody.tsx b/src/layouts/components/Homepage/TextCardsBody.tsx
@@ -81,121 +81,116 @@ export const TextCardsSectionBody = ({
         <FormErrorMessage>{errors.description}</FormErrorMessage>
       </FormControl>
       <Divider py="0.5rem" />
-      <FormControl isRequired>
-        <Text mb="0.5rem" textStyle="h5">
-          Cards
-        </Text>
-        <Text textStyle="body-2" mb="1.5rem">
-          Cards are displayed side by side on a desktop screen. You can add up
-          to 4 cards
-        </Text>
-        <DragDropContext onDragEnd={onDragEnd}>
-          <Editable.Droppable width="100%" editableId={`textCardItem-${index}`}>
-            <Editable.EmptySection
-              title="Add a card to get started"
-              subtitle="You must add at least 1 card to this block"
-              isEmpty={cards.length === 0}
-            >
-              <Editable.Accordion>
-                <VStack p={0} spacing="0.75rem">
-                  {cards.map((card, cardIndex) => (
-                    <Editable.DraggableAccordionItem
-                      draggableId={`textCardItem-${index}-${cardIndex}-draggable`}
-                      index={cardIndex}
-                      title={card.title}
-                      isInvalid={_.some(cardErrors[cardIndex])}
-                      isNested
-                    >
-                      <Editable.Section>
-                        <FormControl
-                          isRequired
-                          isInvalid={!!cardErrors[cardIndex].title}
+      <Text mb="0.5rem" textStyle="h5">
+        Cards
+      </Text>
+      <Text textStyle="body-2" mb="1.5rem">
+        Cards are displayed side by side on a desktop screen. You can add up to
+        4 cards
+      </Text>
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Editable.Droppable width="100%" editableId={`textCardItem-${index}`}>
+          <Editable.EmptySection
+            title="Add a card to get started"
+            subtitle="You must add at least 1 card to this block"
+            isEmpty={cards.length === 0}
+          >
+            <Editable.Accordion>
+              <VStack p={0} spacing="0.75rem">
+                {cards.map((card, cardIndex) => (
+                  <Editable.DraggableAccordionItem
+                    draggableId={`textCardItem-${index}-${cardIndex}-draggable`}
+                    index={cardIndex}
+                    title={card.title}
+                    isInvalid={_.some(cardErrors[cardIndex])}
+                    isNested
+                  >
+                    <Editable.Section>
+                      <FormControl
+                        isRequired
+                        isInvalid={!!cardErrors[cardIndex].title}
+                      >
+                        <FormLabel>Title</FormLabel>
+                        <Input
+                          placeholder="New card"
+                          id={`textCardItem-${index}-${cardIndex}-title`}
+                          value={card.title}
+                          onChange={onChange}
+                        />
+                        <FormErrorMessage>
+                          {cardErrors[cardIndex].title}
+                        </FormErrorMessage>
+                      </FormControl>
+                      <FormControl
+                        isInvalid={!!cardErrors[cardIndex].description}
+                      >
+                        <FormLabel>Description</FormLabel>
+                        <Textarea
+                          placeholder="This is a description for the card. We recommend keeping it short and succinct."
+                          id={`textCardItem-${index}-${cardIndex}-description`}
+                          value={card.description}
+                          onChange={onChange}
+                        />
+                        <FormErrorMessage>
+                          {cardErrors[cardIndex].description}
+                        </FormErrorMessage>
+                      </FormControl>
+                      <FormControl
+                        isRequired
+                        isInvalid={!!cardErrors[cardIndex].linktext}
+                      >
+                        <FormLabel>Link text</FormLabel>
+                        <Input
+                          placeholder="Learn more"
+                          id={`textCardItem-${index}-${cardIndex}-linktext`}
+                          value={card.linktext}
+                          onChange={onChange}
+                        />
+                        <FormErrorMessage>
+                          {cardErrors[cardIndex].linktext}
+                        </FormErrorMessage>
+                      </FormControl>
+                      <FormControl
+                        isRequired
+                        isInvalid={!!cardErrors[cardIndex].url}
+                      >
+                        <FormLabel mb="0">Link URL</FormLabel>
+                        <Text
+                          mb="0.75rem"
+                          textStyle="body-2"
+                          textColor="base.content.medium"
                         >
-                          <FormLabel>Title</FormLabel>
-                          <Input
-                            placeholder="New card"
-                            id={`textCardItem-${index}-${cardIndex}-title`}
-                            value={card.title}
-                            onChange={onChange}
-                          />
-                          <FormErrorMessage>
-                            {cardErrors[cardIndex].title}
-                          </FormErrorMessage>
-                        </FormControl>
-                        <FormControl
-                          isInvalid={!!cardErrors[cardIndex].description}
-                        >
-                          <FormLabel>Description</FormLabel>
-                          <Textarea
-                            placeholder="This is a description for the card. We recommend keeping it short and succinct."
-                            id={`textCardItem-${index}-${cardIndex}-description`}
-                            value={card.description}
-                            onChange={onChange}
-                          />
-                          <FormErrorMessage>
-                            {cardErrors[cardIndex].description}
-                          </FormErrorMessage>
-                        </FormControl>
-                        <FormControl
-                          isRequired
-                          isInvalid={!!cardErrors[cardIndex].linktext}
-                        >
-                          <FormLabel>Link text</FormLabel>
-                          <Input
-                            placeholder="Learn more"
-                            id={`textCardItem-${index}-${cardIndex}-linktext`}
-                            value={card.linktext}
-                            onChange={onChange}
-                          />
-                          <FormErrorMessage>
-                            {cardErrors[cardIndex].linktext}
-                          </FormErrorMessage>
-                        </FormControl>
-                        <FormControl
-                          isRequired
-                          isInvalid={!!cardErrors[cardIndex].url}
-                        >
-                          <FormLabel mb="0">Link URL</FormLabel>
-                          <Text
-                            mb="0.75rem"
-                            textStyle="body-2"
-                            textColor="base.content.medium"
-                          >
-                            Clicking on the card will open this URL
-                          </Text>
-                          <Input
-                            placeholder="Insert /page-url or https://"
-                            id={`textCardItem-${index}-${cardIndex}-url`}
-                            value={card.url}
-                            onChange={onChange}
-                          />
-                          <FormErrorMessage>
-                            {cardErrors[cardIndex].url}
-                          </FormErrorMessage>
-                        </FormControl>
-                        <Button
-                          id={`textCardItem-${index}-${cardIndex}`}
-                          onClick={() =>
-                            onDelete(
-                              `textCardItem-${index}-${cardIndex}`,
-                              "Card"
-                            )
-                          }
-                          alignSelf="center"
-                          variant="clear"
-                          colorScheme="critical"
-                        >
-                          Delete card
-                        </Button>
-                      </Editable.Section>
-                    </Editable.DraggableAccordionItem>
-                  ))}
-                </VStack>
-              </Editable.Accordion>
-            </Editable.EmptySection>
-          </Editable.Droppable>
-        </DragDropContext>
-      </FormControl>
+                          Clicking on the card will open this URL
+                        </Text>
+                        <Input
+                          placeholder="Insert /page-url or https://"
+                          id={`textCardItem-${index}-${cardIndex}-url`}
+                          value={card.url}
+                          onChange={onChange}
+                        />
+                        <FormErrorMessage>
+                          {cardErrors[cardIndex].url}
+                        </FormErrorMessage>
+                      </FormControl>
+                      <Button
+                        id={`textCardItem-${index}-${cardIndex}`}
+                        onClick={() =>
+                          onDelete(`textCardItem-${index}-${cardIndex}`, "Card")
+                        }
+                        alignSelf="center"
+                        variant="clear"
+                        colorScheme="critical"
+                      >
+                        Delete card
+                      </Button>
+                    </Editable.Section>
+                  </Editable.DraggableAccordionItem>
+                ))}
+              </VStack>
+            </Editable.Accordion>
+          </Editable.EmptySection>
+        </Editable.Droppable>
+      </DragDropContext>
       <Button
         id={`textCardItem-${index}-create`}
         variant="outline"

diff --git a/src/styles/isomer-template/components/homepage/_hero.scss b/src/styles/isomer-template/components/homepage/_hero.scss
@@ -65,10 +65,6 @@
     width: 50%;
   }
 
-  .side-section-infobox-container {
-    max-width: 576px;
-  }
-
   .side-section-container-left {
     text-align: right;
     align-self: flex-end;
@@ -80,6 +76,19 @@
   }
 }
 
+// NOTE: This is done to account for the drawer width which eats into the preview
+@media screen and (min-width: (map-get($breakpoints, "xxl") + $preview-drawer-width)) {
+  .side-section-infobox-container {
+    width: 576px;
+  }
+}
+
+@media screen and (max-width: (map-get($breakpoints, "xxl") + $preview-drawer-width - 1)) {
+  .side-section-infobox-container {
+    width: 100%;
+  }
+}
+
 @media screen and ((max-width: (map-get($breakpoints, "xl") - 1))) {
   .hero-side-sm {
     width: 33%;

diff --git a/src/styles/isomer-template/theme/_breakpoints.scss b/src/styles/isomer-template/theme/_breakpoints.scss
@@ -12,3 +12,4 @@ $breakpoints: (
 
 // Maximum width of site contents
 $container-max-width: map-get($breakpoints, "xl");
+$preview-drawer-width: 447.5px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,3 +12,4 @@ $breakpoints: (

		// Maximum width of site contents
		$container-max-width: map-get($breakpoints, "xl");
		$preview-drawer-width: 447.5px;