website/docs: update procedurals for assigning roles to groups (#12198)

* update for dual-select

* add new dual-select unit and tweaks

* polishes

---------

Co-authored-by: Tana M Berry <tana@goauthentik.com>

website/docs/users-sources/roles/manage_roles.md

@@ -38,15 +38,11 @@ To delete a role, follow these steps:
 In authentik, roles are assigned to [groups](../groups/index.mdx), not to individual users.
 
 :::warning
-In authentik, each role can only be applied to a single group at the moment.
+In authentik, each role can only be applied to a single group at a time.
 :::
 
-1.  To assign the role to a group, navigate to **Directory -> Groups**.
-2.  Click the name of the group to which you want to add a role.
-3.  On the group's detail page, on the Overview tab, click **Edit** in the **Group Info** area.
-4.  On the **Update Group** modal, in the **Roles** field, scroll through the list of existent roles, and click to select the one you want to add to the group. (You can select multiple roles at once by holding the Control and Command keys while selecting the roles.)
-5.  Click **Update** to add the role(s) and close the modal.
-
-:::info
-To remove a role from a group, hold the Command key and click the name of the role that you want to remove from the group. This desepcts the role. Then click **Update**.
-:::
+1. To assign the role to a group, navigate to **Directory -> Groups**.
+2. Click the name of the group to which you want to add a role.
+3. On the group's detail page, on the Overview tab, click **Edit** in the **Group Info** area.
+4. On the **Update Group** modal, in the **Roles** field, select the roles you want to assign to the group from the list of **Available Roles** in the left box (you can select multiple roles at once by holding the Shift key while selecting the roles), and then click the appropriate arrow icon to move them into the **Selected Roles** box.
+5. Click **Update** to add the role(s) and close the modal.