From e34c5c99fea6ed51f78e8944985bd13af73454e4 Mon Sep 17 00:00:00 2001
From: cheneyni-451 <56236030+cheneyni-451@users.noreply.github.com>
Date: Tue, 24 Jan 2023 12:56:50 -0500
Subject: [PATCH] fix(ui): add margin to delete role button (#802)

Co-authored-by: Cheney Ni <cheneyni@umich.edu>
---
 src/pages/settings/server/Roles.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/server/Roles.tsx b/src/pages/settings/server/Roles.tsx
index a46c87bd..7527bb51 100644
--- a/src/pages/settings/server/Roles.tsx
+++ b/src/pages/settings/server/Roles.tsx
@@ -70,6 +70,10 @@ export const Roles = observer(({ server }: Props) => {
         }
     `;
 
+    const DeleteRoleButton = styled(Button)`
+        margin: 16px 0;
+    `;
+
     return (
         <PermissionsLayout
             server={server}
@@ -266,12 +270,12 @@ export const Roles = observer(({ server }: Props) => {
                                 <h1>
                                     <Text id="app.settings.categories.danger_zone" />
                                 </h1>
-                                <Button
+                                <DeleteRoleButton
                                     palette="error"
                                     compact
                                     onClick={deleteRole}>
                                     <Text id="app.settings.permissions.delete_role" />
-                                </Button>
+                                </DeleteRoleButton>
                             </>
                         )}
                     </div>