fix(core): add minor changes to address form layout (#1086)

bigcommerce · Jul 15, 2024 · e0926ee · e0926ee
1 parent e648a62
commit e0926ee
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/.changeset/empty-students-scream.md b/.changeset/empty-students-scream.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+add minor changes to address form layout
diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx
@@ -149,7 +149,7 @@ export const AddAddress = ({
         </Message>
       )}
       <Form action={onSubmit} ref={form}>
-        <div className="grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
+        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
           {addressFields.map((field) => {
             switch (field.__typename) {
               case 'TextFormField': {

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/edit-address.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/edit-address.tsx
@@ -186,7 +186,7 @@ export const EditAddress = ({
         </Message>
       )}
       <Form action={onSubmit} ref={form}>
-        <div className="grid grid-cols-1 gap-y-6 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-2">
+        <div className="grid grid-cols-1 gap-y-3 lg:grid-cols-2 lg:gap-x-6">
           {addressFields.map((field) => {
             const key = FieldNameToFieldId[field.entityId];
 

diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx
@@ -34,7 +34,7 @@ export const AddressesContent = async ({
   if (customerAction === 'add-new-address') {
     return (
       <div className="mx-auto mb-14 lg:w-2/3">
-        <h1 className="my-8 text-3xl font-black lg:text-4xl">{t('newAddress')}</h1>
+        <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('newAddress')}</h1>
         <CustomerNewAddress />
       </div>
     );
@@ -47,7 +47,7 @@ export const AddressesContent = async ({
 
     return (
       <div className="mx-auto mb-14 lg:w-2/3">
-        <h1 className="my-8 text-3xl font-black lg:text-4xl">{t('editAddress')}</h1>
+        <h1 className="mb-8 text-3xl font-black lg:text-4xl">{t('editAddress')}</h1>
         {activeAddress && Object.keys(activeAddress).length > 0 ? (
           <CustomerEditAddress address={activeAddress} isAddressRemovable={addresses.length > 1} />
         ) : null}