Update role mappings empty UI for consistency (#162357)

## Summary

Fixes #161137 

Update style of empty role mappings prompt to meet consistency.


![image](https://github.com/elastic/kibana/assets/5312918/f419de0e-177a-4fac-aa36-1c6ec5f0d6c6)


Update icon of create api key button of empty api key  prompt.


![image](https://github.com/elastic/kibana/assets/5312918/9b69e91a-9267-42d7-85f0-aca1507879af)


### Checklist

Delete any items that are not applicable to this PR.
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Jeramy Soucy <[email protected]>

x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_empty_prompt.tsx

@@ -147,7 +147,7 @@ export const ApiKeysEmptyPrompt: FunctionComponent<ApiKeysEmptyPromptProps> = ({
 
   return (
     <KibanaPageTemplate.EmptyPrompt
-      iconType="gear"
+      iconType="managementApp"
       title={
         <h1>
           <FormattedMessage

x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_keys_grid_page.tsx

@@ -198,7 +198,7 @@ export class APIKeysGridPage extends Component<Props, State> {
             <EuiButton
               {...reactRouterNavigate(this.props.history, '/create')}
               fill
-              iconType="plusInCircleFilled"
+              iconType="plusInCircle"
               data-test-subj="apiKeysCreatePromptButton"
               href={'/'}
             >

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx

@@ -21,6 +21,7 @@ interface CreateRoleMappingButtonProps {
 export const CreateRoleMappingButton = ({ history }: CreateRoleMappingButtonProps) => {
   return (
     <EuiButton
+      iconType="plusInCircle"
       data-test-subj="createRoleMappingButton"
       {...reactRouterNavigate(history, EDIT_ROLE_MAPPING_PATH)}
       fill

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/empty_prompt/empty_prompt.tsx

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt } from '@elastic/eui';
-import React, { Fragment } from 'react';
+import React from 'react';
 
 import type { ScopedHistory } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 
 import { CreateRoleMappingButton } from '../create_role_mapping_button';
 
@@ -22,7 +22,7 @@ export const EmptyPrompt: React.FunctionComponent<EmptyPromptProps> = ({
   history,
   readOnly = false,
 }) => (
-  <EuiEmptyPrompt
+  <KibanaPageTemplate.EmptyPrompt
     iconType="managementApp"
     title={
       <h1>
@@ -40,14 +40,12 @@ export const EmptyPrompt: React.FunctionComponent<EmptyPromptProps> = ({
       </h1>
     }
     body={
-      <Fragment>
-        <p>
-          <FormattedMessage
-            id="xpack.security.management.roleMappings.emptyPromptDescription"
-            defaultMessage="Role mappings control which roles are assigned to your users."
-          />
-        </p>
-      </Fragment>
+      <p>
+        <FormattedMessage
+          id="xpack.security.management.roleMappings.emptyPromptDescription"
+          defaultMessage="Role mappings control which roles are assigned to your users."
+        />
+      </p>
     }
     actions={readOnly ? null : <CreateRoleMappingButton history={history} />}
     data-test-subj="roleMappingsEmptyPrompt"

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/role_mappings_grid_page.tsx

@@ -136,11 +136,7 @@ export class RoleMappingsGridPage extends Component<Props, State> {
     }
 
     if (loadState === 'finished' && roleMappings && roleMappings.length === 0) {
-      return (
-        <EuiPageSection alignment="center" color="subdued">
-          <EmptyPrompt history={this.props.history} readOnly={this.props.readOnly} />
-        </EuiPageSection>
-      );
+      return <EmptyPrompt history={this.props.history} readOnly={this.props.readOnly} />;
     }
 
     return (