From 1d44909ca8cb6d80c5860c818595702edeac8d2f Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 6 Sep 2024 09:37:47 +0100
Subject: [PATCH] fix: refactor add network to use card footer, closes
 leather-io/issues#313

---
 src/app/features/add-network/add-network.tsx | 23 ++++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
index 295347d049f..bc8d7a2e2a0 100644
--- a/src/app/features/add-network/add-network.tsx
+++ b/src/app/features/add-network/add-network.tsx
@@ -21,12 +21,24 @@ export function AddNetwork() {
         <Page>
           <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
             {() => (
-              <Card>
+              <Card
+                footerBorder
+                footer={
+                  <Button
+                    fullWidth
+                    aria-busy={loading}
+                    data-testid={NetworkSelectors.AddNetworkBtn}
+                    type="submit"
+                  >
+                    Add network
+                  </Button>
+                }
+              >
                 <Form data-testid={NetworkSelectors.NetworkPageReady}>
                   <Stack
                     gap="space.05"
                     maxWidth="pageWidth"
-                    px={['space.05', 'space.04']}
+                    px={{ base: 'space.00', sm: 'space.04', md: 'space.05' }}
                     my="space.05"
                   >
                     <styled.span textStyle="body.02">
@@ -52,13 +64,6 @@ export function AddNetwork() {
                     {error ? (
                       <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
                     ) : null}
-                    <Button
-                      aria-busy={loading}
-                      data-testid={NetworkSelectors.AddNetworkBtn}
-                      type="submit"
-                    >
-                      Add network
-                    </Button>
                   </Stack>
                 </Form>
               </Card>