1 files changed, 36 insertions, 32 deletions

diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index 2f6c08f123e..ff87cf8f866 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -4,20 +4,22 @@
 = render 'admin/users/head'
 
 - if @user.groups.any?
-  .card
-    .card-header= _('Groups')
-    %ul.hover-list
-      - @user.group_members.includes(:source).each do |group_member| # rubocop: disable CodeReuse/ActiveRecord
-        - group = group_member.group
-        %li.group_member
-          %strong= link_to group.name, admin_group_path(group)
-          – access to
-          #{pluralize(group.projects.count, 'project')}
-          .float-right
-            %span.light.vertical-align-middle= group_member.human_access
-            - unless group_member.owner?
-              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), confirm_btn_variant: 'danger', testid: 'remove-user' }, aria: { label: _('Remove') }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
-                = sprite_icon('remove', size: 16, css_class: 'gl-icon')
+  = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0 gl-px-0'}) do |c|
+    - c.header do
+      = _('Groups')
+    - c.body do
+      %ul.hover-list
+        - @user.group_members.includes(:source).each do |group_member| # rubocop: disable CodeReuse/ActiveRecord
+          - group = group_member.group
+          %li.group_member
+            %strong= link_to group.name, admin_group_path(group)
+            – access to
+            #{pluralize(group.projects.count, 'project')}
+            .float-right
+              %span.light.vertical-align-middle= group_member.human_access
+              - unless group_member.owner?
+                = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), confirm_btn_variant: 'danger', testid: 'remove-user' }, aria: { label: _('Remove') }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
+                  = sprite_icon('remove', size: 16, css_class: 'gl-icon')
 
 .row
   .col-md-6
@@ -28,23 +30,25 @@
 
 
   .col-md-6
-    .card
-      .card-header= _('Joined projects (%{projects_count})') % { projects_count: @joined_projects.count }
-      %ul.hover-list
-        - @joined_projects.sort_by(&:full_name).each do |project|
-          - member = project.team.find_member(@user.id)
-          %li.project_member
-            .list-item-name
-              = link_to admin_project_path(project), class: dom_class(project) do
-                = project.full_name
+    = render Pajamas::CardComponent.new(card_options: { class: 'gl-mb-5' }, body_options: { class: 'gl-py-0 gl-px-0'}) do |c|
+      - c.header do
+        = _('Joined projects (%{projects_count})') % { projects_count: @joined_projects.count }
+      - c.body do
+        %ul.hover-list
+          - @joined_projects.sort_by(&:full_name).each do |project|
+            - member = project.team.find_member(@user.id)
+            %li.project_member
+              .list-item-name
+                = link_to admin_project_path(project), class: dom_class(project) do
+                  = project.full_name
 
-            - if member
-              .float-right
-                - if member.owner?
-                  %span.light= _('Owner')
-                - else
-                  %span.light.vertical-align-middle= member.human_access
+              - if member
+                .float-right
+                  - if member.owner?
+                    %span.light= _('Owner')
+                  - else
+                    %span.light.vertical-align-middle= member.human_access
 
-                  - if member.respond_to? :project
-                    = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member), confirm_btn_variant: 'danger' }, aria: { label: _('Remove') }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from project') do
-                      = sprite_icon('remove', size: 16, css_class: 'gl-icon')
+                    - if member.respond_to? :project
+                      = link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member), confirm_btn_variant: 'danger' }, aria: { label: _('Remove') }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from project') do
+                        = sprite_icon('remove', size: 16, css_class: 'gl-icon')