removed border, cleaned up css and fixed class naming

public/app/features/org/partials/orgUsers.html

@@ -8,14 +8,14 @@
     </label>
 
     <div ng-if="ctrl.pendingInvites.length" style="margin-left: 1rem">
-      <button class="btn toggle-btn-left toggle-btn-left--active" ng-if="!ctrl.showInvites">
+      <button class="btn toggle-btn active" ng-if="!ctrl.showInvites">
         Users
-      </button><button class="btn toggle-btn-right toggle-btn-right--inactive" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
+      </button><button class="btn toggle-btn" ng-if="!ctrl.showInvites" ng-click="ctrl.showInvites = true">
         Pending Invites ({{ctrl.pendingInvites.length}})
       </button>
-      <button class="btn toggle-btn-left toggle-btn-left--inactive" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
+      <button class="btn toggle-btn" ng-if="ctrl.showInvites" ng-click="ctrl.showInvites = false">
         Users
-      </button><button class="btn toggle-btn-right toggle-btn-right--active" ng-if="ctrl.showInvites">
+      </button><button class="btn toggle-btn active" ng-if="ctrl.showInvites">
         Pending Invites ({{ctrl.pendingInvites.length}})
       </button>
     </div>

public/sass/components/_buttons.scss

@@ -224,51 +224,24 @@ $btn-service-icon-width: 35px;
 //Toggle button
 
 .toggle-btn {
-  &-left {
+  background: $input-label-bg;
+  color: $text-color-weak;
+  box-shadow: $card-shadow;
+
+  &:nth-child(1) {
     border-radius: 2px 0 0 2px;
-    border-left: 1px solid #dae0e8;
-    border-top: 1px solid #dae0e8;
-    border-bottom: 1px solid #dae0e8;
     margin: 0;
-    box-shadow: $card-shadow;
-    &--active {
-      background-color: #fff;
-      //background-color: $btn-secondary-bg;
-      //color: #fff;
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
-      &:hover {
-        cursor: default;
-      }
-    }
-    &--inactive {
-      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
-      background: $input-label-bg;
-      color: $text-color-weak;
-    }
   }
-  &-right {
+  &:nth-child(2) {
     border-radius: 0 2px 2px 0;
-    border-right: 1px solid #dae0e8;
-    border-top: 1px solid #dae0e8;
-    border-bottom: 1px solid #dae0e8;
     margin-left: 0 !important;
-    box-shadow: $card-shadow;
-
-    &--active {
-      background-color: #fff;
-      //background-color: $btn-secondary-bg;
-      //color: #FFF;
-      background-color: lighten($input-label-bg, 5%);
-      color: $link-color;
-      &:hover {
-        cursor: default;
-      }
-    }
-    &--inactive {
-      //@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
-      background: $input-label-bg;
-      color: $text-color-weak;
+  }
+
+  &.active {
+    background-color: lighten($input-label-bg, 5%);
+    color: $link-color;
+    &:hover {
+      cursor: default;
     }
   }
 }