Make the account settings view a tiny bit nicer looking

endpoints/api.py

@@ -401,6 +401,7 @@ def get_subscription():
   if user.stripe_id:
     private_repos = model.get_private_repo_count(user.username)
     cus = stripe.Customer.retrieve(user.stripe_id)
+    if cus.subscription:
       return jsonify(subscription_view(cus.subscription, private_repos))
   
   abort(404)

static/css/quay.css

@@ -638,6 +638,20 @@ p.editable:hover i {
   border: inherit;
 }
 
+.user-admin .panel-plan {
+  text-align: center;
+}
+
+.user-admin .plan-description {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
+.user-admin .used-description {
+  font-size: 1.2em;
+  margin-bottom: 10px;
+}
+
 /* Overrides for the markdown editor. */
 
 .wmd-panel .btn-toolbar {

static/partials/user-admin.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container user-admin">
   <div class="loading" ng-show="planLoading || planChanging">
     <div class="spin"></div>
   </div>
@@ -17,8 +17,8 @@
             Subscribed
           </span>
         </div>
-        <div class="panel-body">
+        <div class="panel-body panel-plan">
-          {{ plan.privateRepos }} Private Repositories<br>
+          <div class="plan-description"><b>{{ plan.privateRepos }}</b> Private Repositories</div>
           <button class="btn btn-primary" ng-hide="subscription" ng-click="subscribe(plan.stripeId)">Subscribe</button>
           <button class="btn" ng-show="subscription && (subscription.plan != plan.stripeId)" ng-click="changeSubscription(plan.stripeId)">Change</button>
           <button class="btn btn-danger" ng-show="subscription.plan == plan.stripeId" ng-click="cancelSubscription()">Cancel</button>      
@@ -33,9 +33,11 @@
           Plan Usage
         </div>
         <div class="panel-body">
-          <b>{{ subscription.usedPrivateRepos }}</b> of {{ subscribedPlan.privateRepos }} private repositories used
+	  <div class="used-description">
+            <b>{{ subscription.usedPrivateRepos }}</b> of <b>{{ subscribedPlan.privateRepos }}</b> private repositories used
+	  </div>
           <div class="progress">
-            <div class="progress-bar" role="progressbar" aria-valuenow="{{ subscription.usedPrivateRepos }}" aria-valuemin="0" aria-valuemax="{{ subscribedPlan.privateRepos }}" style="width: {{ planUsagePercent }}%;">
+            <div ng-class="'progress-bar ' + (planUsagePercent > 90 ? 'progress-bar-danger' : '')" role="progressbar" aria-valuenow="{{ subscription.usedPrivateRepos }}" aria-valuemin="0" aria-valuemax="{{ subscribedPlan.privateRepos }}" style="width: {{ planUsagePercent }}%;">
             </div>
           </div>
         </div>

templates/index.html

@@ -70,7 +70,7 @@
               <b class="caret"></b>
             </a>
             <ul class="dropdown-menu">
-              <li><a href="#/user">User Settings</a></li>
+              <li><a href="#/user">Account Settings</a></li>
               <li><a href="/signout">Sign out</a></li>
             </ul>
           </li>