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 1/3] 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>
   );

From 61e9fcf4063d22327d3c400b36e930b124b0247f Mon Sep 17 00:00:00 2001
From: irma12 <irma@roadie.io>
Date: Fri, 10 Sep 2021 14:55:20 +0200
Subject: [PATCH 2/3] Added changeset

Signed-off-by: irma12 <irma@roadie.io>
---
 .changeset/short-mugs-drive.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/short-mugs-drive.md

diff --git a/.changeset/short-mugs-drive.md b/.changeset/short-mugs-drive.md
new file mode 100644
index 0000000000..f2b34fd2c4
--- /dev/null
+++ b/.changeset/short-mugs-drive.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Improve UX for Login pop-up

From 01bd068fb7be8ec6436c4dbdb4946a37cd7b269c Mon Sep 17 00:00:00 2001
From: irma12 <irma@roadie.io>
Date: Mon, 13 Sep 2021 09:21:29 +0200
Subject: [PATCH 3/3] Remove contained from button

Signed-off-by: irma12 <irma@roadie.io>
---
 .../components/OAuthRequestDialog/OAuthRequestDialog.tsx    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
index 14b0789ff8..e4434a4339 100644
--- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
+++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles<Theme>(theme => ({
     padding: 0,
   },
   actionButtons: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(2, 0),
   },
 }));
 
@@ -82,9 +82,7 @@ export const OAuthRequestDialog = () => {
       </DialogContent>
 
       <DialogActions classes={{ root: classes.actionButtons }}>
-        <Button variant="contained" color="secondary" onClick={handleRejectAll}>
-          Reject All
-        </Button>
+        <Button onClick={handleRejectAll}>Reject All</Button>
       </DialogActions>
     </Dialog>
   );