From d94cf8c154dfdac6ba569989871a4fe9099acaa3 Mon Sep 17 00:00:00 2001
From: Pier Francesco Ferrari <pierfrancesco@commercelayer.io>
Date: Wed, 24 Apr 2024 13:25:22 +0200
Subject: [PATCH] feat: align ui with other apps

---
 packages/app/src/pages/WebhooksList.tsx | 83 +++++++++++++------------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/packages/app/src/pages/WebhooksList.tsx b/packages/app/src/pages/WebhooksList.tsx
index 025310e..d6819ac 100755
--- a/packages/app/src/pages/WebhooksList.tsx
+++ b/packages/app/src/pages/WebhooksList.tsx
@@ -7,6 +7,7 @@ import {
   Icon,
   PageLayout,
   ResourceList,
+  Spacer,
   useTokenProvider
 } from '@commercelayer/app-elements'
 import type { FC } from 'react'
@@ -36,47 +37,49 @@ export const WebhooksList: FC = () => {
 
   return (
     <HomePageLayout title='Webhooks'>
-      <ResourceList
-        title='All webhooks'
-        type='webhooks'
-        query={{
-          include: ['last_event_callbacks'],
-          sort: {
-            created_at: 'desc'
-          }
-        }}
-        actionButton={
-          canUser('create', 'webhooks') ? (
-            <Link href={appRoutes.newWebhook.makePath({})}>
-              <Button
-                variant='secondary'
-                size='mini'
-                alignItems='center'
-                aria-label='Add webhook'
-              >
-                <Icon name='plus' size={16} />
-                Webhook
-              </Button>
-            </Link>
-          ) : undefined
-        }
-        ItemTemplate={ListItemWebhook}
-        emptyState={
-          <EmptyState
-            title='No webhook yet!'
-            description='Create your first webhook'
-            action={
-              canUser('create', 'webhooks') ? (
-                <Link href={appRoutes.newWebhook.makePath({})}>
-                  <Button variant='primary' type='button'>
-                    New webhook
-                  </Button>
-                </Link>
-              ) : undefined
+      <Spacer top='14'>
+        <ResourceList
+          title='All webhooks'
+          type='webhooks'
+          query={{
+            include: ['last_event_callbacks'],
+            sort: {
+              created_at: 'desc'
             }
-          />
-        }
-      />
+          }}
+          actionButton={
+            canUser('create', 'webhooks') ? (
+              <Link href={appRoutes.newWebhook.makePath({})}>
+                <Button
+                  variant='secondary'
+                  size='mini'
+                  alignItems='center'
+                  aria-label='Add webhook'
+                >
+                  <Icon name='plus' size={16} />
+                  New
+                </Button>
+              </Link>
+            ) : undefined
+          }
+          ItemTemplate={ListItemWebhook}
+          emptyState={
+            <EmptyState
+              title='No webhook yet!'
+              description='Create your first webhook'
+              action={
+                canUser('create', 'webhooks') ? (
+                  <Link href={appRoutes.newWebhook.makePath({})}>
+                    <Button variant='primary' type='button'>
+                      New webhook
+                    </Button>
+                  </Link>
+                ) : undefined
+              }
+            />
+          }
+        />
+      </Spacer>
     </HomePageLayout>
   )
 }