From ace57abe4c4f874481d496a12ced7124a2215c2a Mon Sep 17 00:00:00 2001
From: irma12 <irma@roadie.io>
Date: Fri, 10 Sep 2021 14:53:12 +0200
Subject: [PATCH] Improve UX on popup

Signed-off-by: irma12 <irma@roadie.io>
---
 .../OAuthRequestDialog/LoginRequestListItem.tsx       | 11 +++++------
 .../OAuthRequestDialog/OAuthRequestDialog.tsx         | 11 ++++++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
index e0102564fd..f9533d9d03 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/LoginRequestListItem.tsx
@@ -21,6 +21,7 @@ import {
   makeStyles,
   Typography,
   Theme,
+  Button,
 } from '@material-ui/core';
 import React, { useState } from 'react';
 import { PendingAuthRequest } from '@backstage/core-plugin-api';
@@ -55,12 +56,7 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
   const IconComponent = request.provider.icon;
 
   return (
-    <ListItem
-      button
-      disabled={busy}
-      onClick={handleContinue}
-      classes={{ root: classes.root }}
-    >
+    <ListItem button disabled={busy} classes={{ root: classes.root }}>
       <ListItemAvatar>
         <IconComponent fontSize="large" />
       </ListItemAvatar>
@@ -74,6 +70,9 @@ const LoginRequestListItem = ({ request, busy, setBusy }: RowProps) => {
           )
         }
       />
+      <Button color="primary" variant="contained" onClick={handleContinue}>
+        Log in
+      </Button>
     </ListItem>
   );
 };
diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
index 687e4211bf..14b0789ff8 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
@@ -39,6 +39,9 @@ const useStyles = makeStyles<Theme>(theme => ({
   contentList: {
     padding: 0,
   },
+  actionButtons: {
+    padding: theme.spacing(2),
+  },
 }));
 
 export const OAuthRequestDialog = () => {
@@ -65,7 +68,7 @@ export const OAuthRequestDialog = () => {
         Login Required
       </DialogTitle>
 
-      <DialogContent classes={{ root: classes.contentList }}>
+      <DialogContent dividers classes={{ root: classes.contentList }}>
         <List>
           {requests.map(request => (
             <LoginRequestListItem
@@ -78,8 +81,10 @@ export const OAuthRequestDialog = () => {
         </List>
       </DialogContent>
 
-      <DialogActions>
-        <Button onClick={handleRejectAll}>Reject All</Button>
+      <DialogActions classes={{ root: classes.actionButtons }}>
+        <Button variant="contained" color="secondary" onClick={handleRejectAll}>
+          Reject All
+        </Button>
       </DialogActions>
     </Dialog>
   );