chore(contactus): styling fixes based on design feedback (#1470)

* chore(contactus): styling fixes based on design feedback * fix: use subhead-1 styling instead * chore: remove unused import
isomerpages · Sep 6, 2023 · a71e8da · a71e8da
1 parent 8953a6f
commit a71e8da
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/src/layouts/components/ContactUs/ContactCard.tsx b/src/layouts/components/ContactUs/ContactCard.tsx
@@ -122,7 +122,7 @@ export const ContactCard = ({
   return (
     <Editable.DraggableAccordionItem
       index={index}
-      title={frontMatter.title || "New Contact Information"}
+      title={frontMatter.title || "New contact information"}
       draggableId={`contacts-${index}`}
       isInvalid={getHasErrors(errors)}
     >

diff --git a/src/layouts/components/ContactUs/GeneralInfoSection.tsx b/src/layouts/components/ContactUs/GeneralInfoSection.tsx
@@ -36,7 +36,7 @@ export const GeneralInfoSection = ({
       title="General Information"
       isInvalid={!!errors.agency_name || !!errors.feedback}
     >
-      <Editable.Section spacing="1.25rem">
+      <Editable.Section spacing="1.25rem" pb="1.25rem">
         <FormControl isRequired isInvalid={!!errors.agency_name}>
           <FormLabel>Name of Organisation / Agency</FormLabel>
           <Input
@@ -69,8 +69,8 @@ export const GeneralInfoSection = ({
               />
               <Text textStyle="caption-2" color="base.content.medium">
                 <Text as="span">
-                  This is optional and appears at the bottom of your screen. If
-                  you don&apos;t have a feedback form, you can use
+                  This is optional and appears at the bottom of your Contact Us
+                  page. If you don&apos;t have a feedback form, you can use
                 </Text>
                 <Text as="span" fontWeight="bold">
                   {" "}

diff --git a/src/layouts/components/ContactUs/LocationCard.tsx b/src/layouts/components/ContactUs/LocationCard.tsx
@@ -7,7 +7,6 @@ import {
   Input,
 } from "@opengovsg/design-system-react"
 import _ from "lodash"
-import { ChangeEvent } from "react"
 import { BiInfoCircle } from "react-icons/bi"
 
 import { useEditableContext } from "contexts/EditableContext"
@@ -53,7 +52,7 @@ export const LocationCard = ({
   return (
     <Editable.DraggableAccordionItem
       index={index}
-      title={frontMatter.title || "New Location"}
+      title={frontMatter.title || "New location"}
       draggableId={`locations-${index}`}
       isInvalid={getHasErrors(errors)}
     >
@@ -227,7 +226,7 @@ export const LocationCard = ({
                             colorScheme="critical"
                             mt="0.5rem"
                           >
-                            Remove operating hours
+                            Delete operating hours
                           </Button>
                         </Editable.Section>
                       </Editable.DraggableAccordionItem>
@@ -240,6 +239,7 @@ export const LocationCard = ({
         </DragDropContext>
 
         <AddSectionButton
+          mt="0.5rem"
           w="100%"
           id={`locations-${index}-add_operating_hours`}
           buttonText="Add operating hours"

diff --git a/src/layouts/components/Editable/AddSectionButton.tsx b/src/layouts/components/Editable/AddSectionButton.tsx
@@ -20,6 +20,7 @@ export const AddSectionButton = ({
             isStretch
             isOpen={isOpen}
             rightIcon={undefined}
+            size="lg"
             {...rest}
           >
             <HStack spacing="0.5rem" justify="center">

diff --git a/src/layouts/components/Editable/Editable.tsx b/src/layouts/components/Editable/Editable.tsx
@@ -71,7 +71,13 @@ export const EmptySection = ({
       justifyContent="center"
     >
       {image}
-      <Text>{title}</Text>
+      <Text
+        textStyle="subhead-1"
+        textColor="base.content.strong"
+        textAlign="center"
+      >
+        {title}
+      </Text>
       <Text
         textStyle="caption-2"
         textColor="base.content.medium"
@@ -97,7 +103,6 @@ const EditableSidebar = ({
       bg="base.canvas.alt"
       width="450px"
       overflowY="scroll"
-      pb="100px"
       // NOTE: We reserve 80px **each** for
       // both the header and the footer
       h="calc(100vh - 160px - 1rem)"
@@ -217,7 +222,7 @@ const EditableAccordionItem = ({
           {/* NOTE: Check with design on styling.
         See if entire section is button (ie, whole component hover styling)
       */}
-          <AccordionButton px="1.5rem" py="3rem">
+          <AccordionButton px="1.5rem" py="2.125rem">
             <Flex flex="1" flexDir="column">
               <Text textStyle="h6" textAlign="left" mt="0.25rem" noOfLines={1}>
                 {title}