HAWKULAR-921

console/src/main/scripts/plugins/accounts/html/organization-join-modal.html

@@ -10,7 +10,7 @@ <h4 class="modal-title">Join Organization</h4>
       Are you sure you want to join the organization <strong>{{joinModal.joinRequest.organization.name}}</strong>?
     </p>
     <p>
-      A request will be sent to the owner of the organization for approval.
+      A request will be send to the owner of the organization for approval.<br/>
       Once it's approved, you'll be able to use Hawkular as this organization.
     </p>
   </div>

console/src/main/scripts/plugins/accounts/html/organization-memberships.html

@@ -61,8 +61,8 @@ <h2>Pending requests to join this organization</h2>
               <td>{{joinRequest.persona.name}}</td>
               <td align="right">
               <span ng-show="controller.joinRequestsToUpdate[joinRequest.id] !== PersistenceState.PERSISTING">
-                <button class="btn btn-primary" ng-click="controller.approveRequest(joinRequest)">Approve</button>
-                <button class="btn btn-danger" ng-click="controller.rejectRequest(joinRequest)">Decline</button>
+                <button class="btn btn-default" ng-click="controller.approveRequest(joinRequest)">Approve</button>
+                <button class="btn btn-danger" ng-click="controller.rejectRequest(joinRequest)">Reject</button>
               </span>
 
               <span ng-show="controller.joinRequestsToUpdate[joinRequest.id] === PersistenceState.PERSISTING">

console/src/main/scripts/plugins/accounts/html/organization-new.html

@@ -8,44 +8,35 @@ <h4 class="modal-title">Create Organization</h4>
 <div class="modal-body">
   <form role="form" class="form-horizontal">
     <div class="form-group">
-      <label for="name" class="col-md-4 control-label">Organization name</label>
+      <label for="name" class="col-sm-4 control-label">Organization name</label>
       <div class="col-md-6">
         <input type="text" class="form-control" id="name" ng-model="newModal.organizationNew.name" autofocus>
       </div>
     </div>
-
-    <div class="form-group">
-      <div class="col-md-4">
-        <input
-          type="radio"
-          class="form-control"
-          id="visibility_private"
-          ng-model="newModal.organizationNew.visibility"
-          value="PRIVATE"/>
-      </div>
-      <div class="col-md-6">
-        <label for="visibility_private">
-          Private: Will not be listed and users cannot actively try to join.
-        </label>
-      </div>
-    </div>
-
     <div class="form-group">
-      <div class="col-md-4">
-        <input
-          type="radio"
-          class="form-control"
-          id="visibility_apply"
-          ng-model="newModal.organizationNew.visibility"
-          value="APPLY"/>
+      <label class="col-sm-4 control-label">Organization type</label>
+      <div class="col-sm-6">
+        <div class="radio">
+          <label for="visibility_private">
+            <input
+              type="radio"
+              id="visibility_private"
+              ng-model="newModal.organizationNew.visibility"
+              value="PRIVATE" />
+            <strong>Private</strong>: Will not be listed and users cannot actively try to join it.
+          </label>
+        </div>
+        <div class="radio">
+          <label for="visibility_apply">
+            <input
+              type="radio"
+              id="visibility_apply"
+              ng-model="newModal.organizationNew.visibility"
+              value="APPLY" />
+            <strong>Public</strong>: Will be listed and users can send a request to join it.
+          </label>
+        </div>
       </div>
-      <div class="col-md-6">
-        <label for="visibility_apply">
-          Public: Users can send a request to join the organization. Will be listed in the public organization
-          directory.
-        </label>
-      </div>
-
     </div>
   </form>
 </div>

console/src/main/scripts/plugins/accounts/html/organizations-join.html

@@ -24,12 +24,11 @@ <h1 ng-show="!controller.loading">Public organizations</h1>
         </div>
         <h1>No organizations available.</h1>
         <p>
-          There are no organizations available for joining.<br/>
           If you are looking for a specific organization, this might mean that it's marked as 'Private'. In that case,
           you need to be actively invited by an administrator of that organization.
         </p>
         <div class="blank-slate-pf-main-action">
-          <a class="btn btn-lg" ng-href="/hawkular-ui/organizations">Back</a>
+          <a class="btn btn-default btn-lg" ng-href="/hawkular-ui/organizations">Back</a>
         </div>
       </div>
 
@@ -46,12 +45,9 @@ <h1>No organizations available.</h1>
             <td>{{organization.name}}</td>
             <td class="hk-actions-one">
               <button type="button"
-                      class="btn btn-link"
-                      tooltip-trigger
-                      tooltip-placement="top"
-                      tooltip="Join"
+                      class="btn btn-default"
                       ng-click="controller.joinRequest(organization)">
-                <i class="fa fa-sign-in"></i>
+                Join
               </button>
             </td>
           </tr>
@@ -66,8 +62,7 @@ <h1>No organizations available.</h1>
       </div>
       <h1>Only users can join organizations.</h1>
       <p>
-        You are logged in as an organization.
-        At the moment, only users can join organizations. To join an organization, switch to your user account.
+        You are logged in as an organization. To join an organization, switch to your user account.
       </p>
     </div>
   </div>

console/src/main/scripts/plugins/accounts/html/organizations.html

@@ -22,8 +22,9 @@ <h1>No organizations created.</h1>
           <button class="btn btn-primary btn-lg" type="button" role="button" ng-click="controller.showCreateForm()">
             Create Organization
           </button>
-          or
-          <a class="btn-default btn-lg" href="/hawkular-ui/organizations/join" role="button">
+        </div>
+        <div class="blank-slate-pf-secondary-action">
+          <a class="btn btn-default" href="/hawkular-ui/organizations/join" role="button">
             Join an organization
           </a>
         </div>
@@ -33,12 +34,12 @@ <h1>No organizations created.</h1>
         <button class="btn btn-primary" type="button" role="button" ng-click="controller.showCreateForm()">
           Create Organization
         </button>
-        <a class="btn-default btn-lg" href="/hawkular-ui/organizations/join" role="button">
+        <a class="btn btn-default" href="/hawkular-ui/organizations/join" role="button">
           Join an organization
         </a>
       </div>
 
-      <div ng-show="controller.joinRequests.length && !controller.loading">
+      <div class="hk-organizations-list" ng-show="controller.joinRequests.length && !controller.loading">
         <h2>Your join requests</h2>
         <div class="hk-table-container">
           <table class="table table-bordered hk-table-clean">
@@ -60,7 +61,7 @@ <h2>Your join requests</h2>
         </div>
       </div>
 
-      <div ng-show="controller.organizations.length && !controller.loading">
+      <div class="hk-organizations-list" ng-show="controller.organizations.length && !controller.loading">
         <h2>Your organization memberships</h2>
         <div class="hk-table-container">
           <table class="table table-bordered hk-table-clean">

console/src/main/scripts/plugins/accounts/less/accounts.less

@@ -77,8 +77,19 @@ body.inactivity-modal-open .modal:not(.time-out-dialog)
 
 // Organizations screen
 
-.hk-organizations .text-right .btn-primary {
-  margin-bottom: @grid-gutter-width/4;
+.hk-organizations {
+
+  .hk-heading h1 {
+    margin-bottom: @grid-gutter-width/2;
+  }
+
+  .text-right .btn {
+    margin-bottom: @grid-gutter-width/4;
+  }
+}
+
+.hk-organizations-list {
+  margin-bottom: @grid-gutter-width/4*3;
 }
 
 // Organization memberships screen

console/src/main/scripts/plugins/metrics/less/metrics.less

@@ -2481,20 +2481,20 @@ body {
 }
 
 .hk-sidebar {
-  position: absolute;
-  top: 0;
-  left: 0;
+  background-color: white;
   bottom: 0;
+  left: 0;
   min-height: 100%;
+  position: absolute;
+  top: 0;
   width: 20em;
 
   @media (max-width: @screen-xs-max) {
     display: none;
   }
 
   > div {
-    background: #3a3f43;
-    color: white;
+    background-color: white;
     padding: 2em;
   }
 
@@ -2503,33 +2503,42 @@ body {
     font-style: italic;
   }
 
-  .btn-link:hover,
-  a:hover {
-    color: @link-color;
-  }
-
   .pficon-close {
     font-size: ceil(@font-size-base - 2);
   }
 
   .hk-filter-v-block {
     padding: 1.5em 0;
 
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    h4 {
+      margin: 0;
+    }
+
     + .hk-filter-v-block {
-      border-top: 1px solid #888;
+      border-top: 1px solid @table-border-color;
     }
 
     .radio,
     .checkbox {
       margin-left: 1.5em;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
     .hk-label-heading {
-      color: white;
       font-weight: bold;
 
       .fa {
-        color: white;
         font-size: @font-size-base;
       }
     }
@@ -2539,13 +2548,33 @@ body {
       margin-top: 1em;
 
       a.selected {
-        color: white;
+        color: @link-hover-color;
         font-weight: bold;
       }
     }
   }
 }
 
+.hk-filters-selected {
+
+  .hk-filter-selected {
+
+     + .hk-filter-selected {
+      margin-top: 5px;
+    }
+
+    .btn {
+      margin-left: 5px;
+    }
+  }
+
+  .hk-dropdown-footer {
+    background-color: #f5f5f5;
+    margin: 10px -14px -10px;
+    padding: 10px 15px;
+  }
+}
+
 .hk-content-sidebar {
   @media (min-width: @screen-sm-min) {
     margin-left: 20em;
@@ -2903,7 +2932,6 @@ section {
   }
 }
 
-
 // Tokens screen
 
 .hk-tokens .row-cards-pf {