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

…s#313
leather-io · Sep 20, 2024 · 68de602 · 68de602
1 parent d4c8b48
commit 68de602
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx
@@ -3,7 +3,7 @@ import { ErrorCircleIcon, Flag, type FlagProps } from '@leather.io/ui';
 export function ErrorLabel({ children, ...rest }: FlagProps) {
   return (
     <Flag
-      img={<ErrorCircleIcon variant="small" />}
+      img={<ErrorCircleIcon color="red.action-primary-default" variant="small" />}
       spacing="space.02"
       color="red.action-primary-default"
       textStyle="body.02"

diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx
@@ -20,13 +20,26 @@ export function AddNetwork() {
       <Content>
         <Page>
           <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
-            {() => (
-              <Card>
+            {({ handleSubmit }) => (
+              <Card
+                footerBorder
+                footer={
+                  <Button
+                    fullWidth
+                    aria-busy={loading}
+                    data-testid={NetworkSelectors.AddNetworkBtn}
+                    type="submit"
+                    onClick={() => handleSubmit()}
+                  >
+                    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 +65,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>