Restyle the billing invoices tab

static/css/directives/ui/billing-invoices.css

@@ -0,0 +1,25 @@
+
+.billing-invoices-element .invoice-title {
+  padding: 6px;
+  cursor: pointer;
+}
+
+.billing-invoices-element .invoice-status .success {
+  color: green;
+}
+
+.billing-invoices-element .invoice-status .pending {
+  color: steelblue;
+}
+
+.billing-invoices-element .invoice-status .danger {
+  color: red;
+}
+
+.billing-invoices-element .invoice-amount:before {
+  content: '$';
+}
+
+.billing-invoices-element .fa-download {
+  color: #aaa;
+}

static/css/directives/ui/prototype-manager.css

@@ -1,3 +1,8 @@
 .prototype-manager-element i.fa {
   margin-right: 4px;
+}
+
+.prototype-manager-element td {
+  padding: 10px !important;
+  vertical-align: middle !important;
 }

static/css/quay.css

@@ -3267,64 +3267,6 @@ p.editable:hover i {
   max-width: 100%;
 }
 
-.billing-invoices-element .invoice-title {
-  padding: 6px;
-  cursor: pointer;
-}
-
-.billing-invoices-element .invoice-status .success {
-  color: green;
-}
-
-.billing-invoices-element .invoice-status .pending {
-  color: steelblue;
-}
-
-.billing-invoices-element .invoice-status .danger {
-  color: red;
-}
-
-.billing-invoices-element .invoice-amount:before {
-  content: '$';
-}
-
-.billing-invoices-element .invoice-details {
-  margin-left: 10px;
-  margin-bottom: 10px;
-
-  padding: 4px;
-  padding-left: 6px;
-  border-left: 2px solid #eee !important;
-}
-
-.billing-invoices-element .invoice-details td {
-  border: 0px solid transparent !important;
-}
-
-.billing-invoices-element .invoice-details dl {
-  margin: 0px;
-}
-
-.billing-invoices-element .invoice-details dd {
-  margin-left: 10px;
-  padding: 6px;
-  margin-bottom: 10px;
-}
-
-.billing-invoices-element .invoice-title:hover {
-  color: steelblue;
-}
-
-.prototype-manager-element thead th {
-  padding: 4px;
-  color: #666;
-}
-
-.prototype-manager-element td {
-  padding: 10px !important;
-  vertical-align: middle !important;
-}
-
 .org-list h2 {
   margin-bottom: 20px;
 }

static/directives/billing-invoices.html

@@ -1,25 +1,23 @@
 <div class="billing-invoices-element">
-  <div ng-show="loading">
-    <div class="quay-spinner"></div>
-  </div>
+  <div class="cor-loader" ng-show="loading"></div>
 
   <div ng-show="!loading && !invoices">
     No invoices have been created
   </div>
 
   <div ng-show="!loading && invoices">
-    <table class="table">
+    <table class="co-table">
       <thead>
-        <th>Billing Date/Time</th>
-        <th>Amount Due</th>
-        <th>Status</th>
-        <th></th>
+        <td>Billing Date/Time</td>
+        <td>Amount Due</td>
+        <td>Status</td>
+        <td class="options-col"></td>
       </thead>
 
       <tbody class="invoice" ng-repeat="invoice in invoices">
         <tr class="invoice-title">
-          <td ng-click="toggleInvoice(invoice.id)"><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
-          <td ng-click="toggleInvoice(invoice.id)"><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
+          <td><span class="invoice-datetime">{{ invoice.date * 1000 | date:'medium' }}</span></td>
+          <td><span class="invoice-amount">{{ invoice.amount_due / 100 }}</span></td>
           <td>
             <span class="invoice-status">
               <span class="success" ng-show="invoice.paid">Paid - Thank you!</span>
@@ -28,24 +26,12 @@
               <span class="pending" ng-show="!invoice.paid && !invoice.attempted">Payment pending</span>
             </span>
           </td>
-          <td>
+          <td class="options-col">
             <a ng-show="invoice.paid" href="/receipt?id={{ invoice.id }}" download="receipt.pdf" target="_new">
               <i class="fa fa-download" data-title="Download Receipt" bs-tooltip="tooltip.title"></i>
             </a>
           </td>
         </tr>
-
-        <tr ng-class="invoiceExpanded[invoice.id] ? 'in' : 'out'" class="invoice-details panel-collapse collapse">
-          <td colspan="3">
-            <dl class="dl-normal">
-              <dt>Billing Period</dt>
-              <dd>
-                <span>{{ invoice.period_start * 1000 | date:'mediumDate' }}</span> -
-                <span>{{ invoice.period_end * 1000 | date:'mediumDate' }}</span>
-              </dd>
-            </dl>
-          </td>
-        </tr>
       </tbody>
     </table>
   </div>

static/js/directives/ui/billing-invoices.js

@@ -15,11 +15,6 @@ angular.module('quay').directive('billingInvoices', function () {
     },
     controller: function($scope, $element, $sce, ApiService) {
       $scope.loading = false;
-      $scope.invoiceExpanded = {};
-
-      $scope.toggleInvoice = function(id) {
-        $scope.invoiceExpanded[id] = !$scope.invoiceExpanded[id];
-      };
 
       var update = function() {
         var hasValidUser = !!$scope.user;