Add hover effect to back button (#4695)

app/assets/stylesheets/application.bootstrap.scss

@@ -652,3 +652,9 @@ input[type="range"]:focus::-moz-range-thumb {
   width: 150px;
   height: 150px;
 }
+
+.back-button {
+  &:hover {
+    color: var(--brand-color) !important;
+  }
+}

app/javascript/components/admin/manage_users/EditUser.jsx

@@ -42,7 +42,7 @@ export default function EditUser() {
                         <h3>{ t('admin.manage_users.edit_user')}</h3>
                       </div>
                       <Stack
-                        className="d-inline-block float-end cursor-pointer pe-2 pt-2 text-muted"
+                        className="d-inline-block float-end cursor-pointer pe-2 pt-2 text-muted back-button"
                         aria-hidden="true"
                         onClick={() => navigate('/admin/users')}
                       >

app/javascript/components/admin/roles/EditRole.jsx

@@ -50,7 +50,7 @@ export default function EditRole() {
                       </Breadcrumb>
                     </Stack>
                     <Stack
-                      className="d-inline-block float-end cursor-pointer pe-2 pt-2 text-muted"
+                      className="d-inline-block float-end cursor-pointer pe-2 pt-2 text-muted back-button"
                       aria-hidden="true"
                       onClick={() => navigate('/admin/roles')}
                     >