Remove group styles and adjust group modal layout

app/assets/stylesheets/base.css.scss

@@ -16,7 +16,6 @@ body {
 @import "scss/panel";
 @import "scss/user";
 @import "scss/notifications";
-@import "scss/groups";
 
 .j2-page {
   padding-top: 30px;

app/assets/stylesheets/scss/groups.scss

@@ -1,14 +0,0 @@
-.groups--list .list-group-item-heading {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  line-height: 1.3;
-}
-
-.groups--list .list-group-item {
-  padding: 5px 7px;
-}
-
-a[role="tab"] {
-  outline: 0px none;
-  border: none !important;
-}

app/views/modal/_group.haml

@@ -7,7 +7,7 @@
           %span{"aria-hidden" => "true"} ×
           %span.sr-only= t 'views.actions.close'
       %div{role: "tabpanel"}
-        %ul.nav.nav-tabs{role: "tablist"}
+        %ul.nav.nav-tabs.mt-1{role: "tablist"}
           %li.nav-item{role: "presentation"}
             %a.nav-link.active{href: "#grouplist", aria: {controls: "grouplist"}, data: {toggle: "tab"}, role: "tab"}
               = t 'views.modal.group.tabs.main'
@@ -17,7 +17,7 @@
 
         .tab-content
           .tab-pane.active{role:"tabpanel", id: "grouplist"}
-            %ul.list-group.groups--list
+            %ul.list-group
               - current_user.groups.each do |group|
                 = render 'modal/group/item', group: group, user: @user
           .tab-pane{role:"tabpanel", id: "create"}

app/views/modal/group/_item.haml

@@ -1,10 +1,12 @@
 %li.list-group-item{id: "group-#{group.name}"}
   .media
-    .pull-left.j2-table
-      %input.input--center{type: :checkbox, name: 'gm-group-check', data: { group: group.name, user: user.screen_name }, checked: user.member_of?(group), autocomplete: 'off'}
+    .pull-left
+      .custom-control.custom-checkbox
+        %input.custom-control-input{type: :checkbox, id: "groupCheck#{group.id}", name: 'gm-group-check', data: { group: group.name, user: user.screen_name }, checked: user.member_of?(group), autocomplete: 'off'}
+        %label.custom-control-label{for: "groupCheck#{group.id}"}
     .media-body
       .list-group-item-heading= group.display_name
-      .list-group-item-text.text-muted.j2-up
+      .list-group-item-text.text-muted
         %span{id: "#{group.name}-members"}= group.members.count
         = t 'views.modal.group.members'
         ·