Fix css for user groups [SCI-12196]

app/controllers/navigations_controller.rb

@@ -63,6 +63,8 @@ class NavigationsController < ApplicationController
     links = [
       {
         name: I18n.t('users.settings.sidebar.teams'), url: teams_path
+      }, {
+        name: I18n.t('users.settings.sidebar.groups'), url: users_settings_team_user_groups_path(current_team)
       }, {
         name: I18n.t('users.settings.sidebar.account_nav.addons'), url: addons_path
       }

app/javascript/vue/user_groups/modal/add_member.vue

@@ -21,6 +21,7 @@
                 :option-renderer="usersRenderer"
                 :label-renderer="usersRenderer"
                 :multiple="true"
+                :searchable="true"
                 :placeholder="i18n.t('user_groups.show.add_members_modal.select_members_placeholder')"
               />
             </div>

app/javascript/vue/user_groups/modal/create_group.vue

@@ -32,6 +32,7 @@
                 :withCheckboxes="true"
                 :option-renderer="usersRenderer"
                 :label-renderer="usersRenderer"
+                :searchable="true"
                 :multiple="true"
                 :placeholder="i18n.t('user_groups.index.create_modal.select_members_placeholder')"
               />

app/services/toolbars/user_group_memberships_service.rb

@@ -32,7 +32,7 @@ module Toolbars
       {
         name: 'delete',
         label: 'Remove',
-        icon: 'sn-icon sn-icon-delete',
+        icon: 'sn-icon sn-icon-close',
         path: destroy_multiple_users_settings_team_user_group_user_group_memberships_path(@team, @user_group, membership_ids: @memberships.pluck(:id)),
         type: :emit
       }

app/views/users/settings/teams/_header.html.erb

@@ -17,8 +17,8 @@
     </h1>
   </div>
 </div>
-<div class="flex items-center gap-4 p-2 mb-4 bg-white">
-  <%= link_to t("users.settings.teams.navigation.details"), team_path(@team), class: "p-2.5 hover:no-underline #{ @active_tab == :details ? "text-sn-blue" : "text-sn-grey" }"%>
+<div class="flex items-center gap-4 p-2 mb-4 bg-white rounded-lg">
+  <%= link_to t("users.settings.teams.navigation.details"), team_path(@team), class: "p-2.5 hover:no-underline #{ 'disabled' unless can_read_team?(@team) } #{ @active_tab == :details ? "text-sn-blue" : "text-sn-grey" }"%>
   <%= link_to t("users.settings.teams.navigation.members"), members_users_settings_team_path(@team), class: "p-2.5 hover:no-underline #{ @active_tab == :members ? "text-sn-blue" : "text-sn-grey" }"%>
   <%= link_to t("users.settings.teams.navigation.groups"), users_settings_team_user_groups_path(@team), class: "p-2.5 hover:no-underline  #{ 'disabled' unless can_manage_team?(@team) } #{ @active_tab == :user_groups ? "text-sn-blue" : "text-sn-grey" }"%>
 </div>

app/views/users/settings/user_groups/show.html.erb

@@ -7,8 +7,8 @@
 
 <div class="content-pane flexible with-grey-background">
   <%= render partial: 'users/settings/teams/header' %>
-  <div class="flex items-center h-8 gap-4 p-4">
-    <%= link_to users_settings_team_user_groups_path, class: "hover:text-black text-black hover:no-underline" do %>
+  <div class="flex items-center h-8 gap-4 p-4 pl-0">
+    <%= link_to users_settings_team_user_groups_path, class: "btn btn-light btn-black icon-btn" do %>
       <i class="sn-icon sn-icon-arrow-left"></i>
     <% end %>
     <h3 class="m-0 flex gap-0.5 items-center">

config/locales/en.yml

@@ -3473,6 +3473,7 @@ en:
         account: "Account"
         teams: "Workspaces"
         webhooks: "Webhooks"
+        groups: "Groups"
         account_nav:
           profile: "My profile"
           preferences: "My preferences"