style: update headings in SelectUsersAndRoleStep for improved visibility

Author: bra-i-am

src/authz-module/wizard/SelectUsersAndRoleStep.tsx

@@ -50,7 +50,7 @@ const SelectUsersAndRoleStep = ({
   return (
     <div className="select-users-and-role-step">
       {/* Users Section */}
-      <h3 className="mb-2">{intl.formatMessage(messages['wizard.step1.users.heading'])}</h3>
+      <h3 className="text-primary mb-2">{intl.formatMessage(messages['wizard.step1.users.heading'])}</h3>
       <Form.Group controlId="users-input">
         <Form.Label>{intl.formatMessage(messages['wizard.step1.users.label'])}</Form.Label>
         <HighlightedUsersInput
@@ -70,10 +70,10 @@ const SelectUsersAndRoleStep = ({
       </Form.Group>
 
       {/* Roles Section */}
-      <h3 className="mt-4 mb-2">{intl.formatMessage(messages['wizard.step1.roles.heading'])}</h3>
+      <h3 className="text-primary mt-4 mb-2">{intl.formatMessage(messages['wizard.step1.roles.heading'])}</h3>
       {orderedContexts.map((context) => (
         <div key={context} className="role-group mb-4">
-          <h5 className="role-group-header mb-3 pl-4">
+          <h5 className="h4 text-gray role-group-header my-4 pl-4">
             {contextLabels[context] || context}
           </h5>
           <Form.RadioSet
@@ -86,7 +86,7 @@ const SelectUsersAndRoleStep = ({
               const radioContent = (
                 <Form.Radio key={role.role} value={role.role} disabled={role.disabled}>
                   <Stack gap={2}>
-                    <span className={`role-name font-weight-bold${role.disabled ? ' text-muted' : ''}`}>
+                    <span className={`role-name ${role.disabled ? ' text-muted' : ''}`}>
                       {role.name}
                     </span>
                     <p className="mb-0 text-gray-500 small">{role.description}</p>