fix: refactor add network to use card footer, closes leather-io/issue…

…s#313
leather-io · Sep 6, 2024 · 1d44909 · 1d44909
1 parent 3450e0a
commit 1d44909
Showing 1 changed file with 14 additions and 9 deletions.
diff --git 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>