New custom roles empty state (FE)

What does this MR do and why?

• Updates UI of the empty state of Custom Roles page
• Currently in development mode and not visible to users until all the UI improvements have been made to the app

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Apply the following diff to initialise the new Vue app

diff --git a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
index a36c2808700e..6372dac511a9 100644
--- a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
+++ b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
@@ -1,3 +1,3 @@
-import { initRolesAndPermissions } from 'ee/roles_and_permissions';
+import { initCustomRolesApp } from 'ee/roles_and_permissions';
 
-initRolesAndPermissions();
+initCustomRolesApp();

2. Log-in as admin and navigate to any group's Settings > Roles and Permissions. You should see an empty state.

Related to #437916 (closed)