Merge pull request #7136 from RoadieHQ/improve-UX-sign-in-github-modal

Improve UX for Login modal

.changeset/short-mugs-drive.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Improve UX for Login pop-up

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>
   );
 };

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, 0),
+  },
 }));
 
 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,7 +81,7 @@ export const OAuthRequestDialog = () => {
         </List>
       </DialogContent>
 
-      <DialogActions>
+      <DialogActions classes={{ root: classes.actionButtons }}>
         <Button onClick={handleRejectAll}>Reject All</Button>
       </DialogActions>
     </Dialog>