From 697c96f25c220750ae290879e3020ecc1a5f03c5 Mon Sep 17 00:00:00 2001
From: Divyanshi Gupta <divyanshigupta3295@gmail.com>
Date: Wed, 24 Jan 2024 19:49:22 +0530
Subject: [PATCH] feat(rbac): center align toast (#1090)

---
 .../src/components/RolesList/RolesListToolbar.tsx     |  9 +++++++--
 plugins/rbac/src/components/SnackbarAlert.tsx         | 11 ++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx b/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx
index 0c77c9f421..54e40c6548 100644
--- a/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx
+++ b/plugins/rbac/src/components/RolesList/RolesListToolbar.tsx
@@ -15,6 +15,9 @@ const useStyles = makeStyles(theme => ({
   rbacPreReqLink: {
     color: theme.palette.link,
   },
+  alertTitle: {
+    fontWeight: 'bold',
+  },
 }));
 
 export const RolesListToolbar = ({
@@ -29,8 +32,10 @@ export const RolesListToolbar = ({
     <div>
       {!createRoleLoading && !createRoleAllowed && (
         <Alert severity="warning" data-testid="create-role-warning">
-          <AlertTitle>Unable to create role.</AlertTitle>
-          To enable create role button, the role associacted with your user
+          <AlertTitle className={classes.alertTitle}>
+            Unable to create role.
+          </AlertTitle>
+          To enable create role button, the role associated with your user
           should have the permission policies mentioned{' '}
           <a
             href="https://github.com/janus-idp/backstage-plugins/tree/main/plugins/rbac#prerequisites"
diff --git a/plugins/rbac/src/components/SnackbarAlert.tsx b/plugins/rbac/src/components/SnackbarAlert.tsx
index 53f903cafb..1c49026a5a 100644
--- a/plugins/rbac/src/components/SnackbarAlert.tsx
+++ b/plugins/rbac/src/components/SnackbarAlert.tsx
@@ -15,17 +15,10 @@ export const SnackbarAlert = ({
       open={toastMessage !== ''}
       autoHideDuration={6000}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      sx={{ width: '100%' }}
-      style={{ top: '100px', right: '20px' }}
+      style={{ top: '100px', left: '0px', justifyContent: 'center' }}
       onClose={onAlertClose}
     >
-      <Alert
-        onClose={onAlertClose}
-        severity="info"
-        variant="filled"
-        icon={false}
-        sx={{ width: '60%' }}
-      >
+      <Alert onClose={onAlertClose} severity="success">
         {toastMessage}
       </Alert>
     </Snackbar>