From 5ed900c9bc48062bec363c5f6281365c39a34d6c Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Fri, 3 Apr 2015 17:47:39 -0400
Subject: [PATCH] Add new co-alert CSS styles and fix some other UI issues

---
 static/css/core-ui.css                        | 75 +++++++++++++++++++
 .../css/directives/ui/convert-user-to-org.css | 35 +++++++++
 static/directives/convert-user-to-org.html    |  8 +-
 static/directives/plan-manager.html           |  8 +-
 static/directives/plans-table.html            | 10 +--
 .../repo-view/repo-panel-settings.html        | 14 ++--
 static/partials/user-view.html                |  8 +-
 7 files changed, 135 insertions(+), 23 deletions(-)
 create mode 100644 static/css/directives/ui/convert-user-to-org.css

diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index 37cc03d69..214e79114 100644
--- a/static/css/core-ui.css
+++ b/static/css/core-ui.css
@@ -960,3 +960,78 @@
   margin-bottom: 10px;
 }
 
+.co-alert {
+  padding: 16px;
+  padding-left: 46px;
+  position: relative;
+  margin-bottom: 20px;
+  position: relative;
+  border: 1px solid #eee;
+}
+
+.co-alert.co-alert-success {
+  background: #F0FFF4;
+}
+
+.co-alert.co-alert-success:before {
+  font-family: FontAwesome;
+  content: "\f058";
+  position: absolute;
+  top: 11px;
+  left: 12px;
+  font-size: 22px;
+  color: #83D29C;
+}
+
+.co-alert.co-alert-info {
+  background: #F0FAFF;
+}
+
+.co-alert.co-alert-info:before {
+  font-family: FontAwesome;
+  content: "\f05a";
+  position: absolute;
+  top: 11px;
+  left: 12px;
+  font-size: 22px;
+  color: #83B7D2;
+}
+
+.co-alert.co-alert-warning {
+  background: #FFFBF0;
+}
+
+.co-alert.co-alert-warning:before {
+  font-family: FontAwesome;
+  content: "\f071";
+  position: absolute;
+  top: 11px;
+  left: 12px;
+  font-size: 22px;
+  color: #E4C212;
+}
+
+.co-alert.co-alert-danger {
+  background: #FFF0F0;
+}
+
+.co-alert.co-alert-danger:before {
+  font-family: core-icons;
+  content: "\f107";
+  position: absolute;
+  top: 11px;
+  left: 12px;
+  font-size: 22px;
+  color: red;
+}
+
+.co-alert.co-alert-danger:after {
+  font-family: FontAwesome;
+  content: "\f12a";
+  position: absolute;
+  top: 16px;
+  left: 20px;
+  font-size: 16px;
+  color: white;
+  z-index: 2;
+}
\ No newline at end of file
diff --git a/static/css/directives/ui/convert-user-to-org.css b/static/css/directives/ui/convert-user-to-org.css
new file mode 100644
index 000000000..c0cf59336
--- /dev/null
+++ b/static/css/directives/ui/convert-user-to-org.css
@@ -0,0 +1,35 @@
+.convert-user-to-org .convert-form h3 {
+  margin-bottom: 20px;
+}
+
+.convert-user-to-org #convertForm {
+  max-width: 700px;
+}
+
+.convert-user-to-org #convertForm .form-group {
+  margin-bottom: 20px;
+}
+
+.convert-user-to-org #convertForm input {
+  margin-bottom: 10px;
+  margin-left: 20px;
+}
+
+.convert-user-to-org #convertForm .existing-data {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.convert-user-to-org #convertForm .description {
+  margin-top: 10px;
+  display: block;
+  color: #888;
+  font-size: 12px;
+  margin-left: 20px;
+}
+
+.convert-user-to-org #convertForm .existing-data {
+  display: block;
+  padding-left: 20px;
+  margin-top: 10px;
+}
diff --git a/static/directives/convert-user-to-org.html b/static/directives/convert-user-to-org.html
index 8011ecf50..4dc143c20 100644
--- a/static/directives/convert-user-to-org.html
+++ b/static/directives/convert-user-to-org.html
@@ -2,7 +2,7 @@
   <!-- Step 0 -->
   <div class="panel" ng-show="convertStep == 0">
     <div class="panel-body" ng-show="user.organizations.length > 0">
-      <div class="alert alert-info">
+      <div class="co-alert co-alert-info">
         Cannot convert this account into an organization, as it is a member of {{user.organizations.length}} other
         organization{{user.organizations.length > 1 ? 's' : ''}}. Please leave
         {{user.organizations.length > 1 ? 'those organizations' : 'that organization'}} first.
@@ -10,7 +10,7 @@
     </div>
 
     <div class="panel-body" ng-show="user.organizations.length == 0">
-      <div class="alert alert-warning">
+      <div class="co-alert co-alert-warning">
         Note: Converting a user account into an organization <b>cannot be undone</b>
       </div>
 
@@ -20,8 +20,6 @@
 
   <!-- Step 1 -->
   <div class="convert-form" ng-show="convertStep == 1">
-    <h3>Convert to organization</h3>
-
     <form method="post" name="convertForm" id="convertForm" ng-submit="convertToOrg()">
       <div class="form-group">
         <label for="orgName">Organization Name</label>
@@ -88,7 +86,7 @@
           <h4 class="modal-title">Convert to organization?</h4>
         </div>
         <div class="modal-body">
-          <div class="alert alert-danger">You will not be able to login to this account once converted</div>
+          <div class="co-alert co-alert-danger">You will not be able to login to this account once converted!</div>
           <div>Are you <b>absolutely sure</b> you would like to convert this account to an organization? Once done, there is no going back.</div>
         </div>
         <div class="modal-footer">
diff --git a/static/directives/plan-manager.html b/static/directives/plan-manager.html
index 72a28dc7c..18d87b55a 100644
--- a/static/directives/plan-manager.html
+++ b/static/directives/plan-manager.html
@@ -3,23 +3,23 @@
   <div class="quay-spinner 3x" ng-show="planLoading"></div>
 
   <!-- Alerts -->
-  <div class="alert alert-danger" ng-show="limit == 'over' && !planLoading">
+  <div class="co-alert co-alert-danger" ng-show="limit == 'over' && !planLoading">
     You are using more private repositories than your plan allows. Please
     upgrade your subscription to avoid disruptions in your <span ng-show="organization">organization's</span> service.
   </div>
 
-  <div class="alert alert-warning" ng-show="limit == 'at' && !planLoading">
+  <div class="co-alert co-alert-warning" ng-show="limit == 'at' && !planLoading">
     You are at your current plan's number of allowed private repositories. It might be time to think about
     upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
   </div>
 
-  <div class="alert alert-success" ng-show="limit == 'near' && !planLoading">
+  <div class="co-alert co-alert-info" ng-show="limit == 'near' && !planLoading">
     You are nearing the number of allowed private repositories. It might be time to think about
     upgrading your subscription to avoid future disruptions in your <span ng-show="organization">organization's</span> service.
   </div>
 
   <!-- Trial info -->
-  <div class="alert alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
+  <div class="co-alert co-alert-success" ng-show="subscription.trialEnd != null" style="font-size: 125%">
     Free trial until <strong>{{ parseDate(subscription.trialEnd)  | date }}</strong>
   </div>
 
diff --git a/static/directives/plans-table.html b/static/directives/plans-table.html
index d4badb3c6..da6c42e4e 100644
--- a/static/directives/plans-table.html
+++ b/static/directives/plans-table.html
@@ -16,12 +16,12 @@
   </ul>
 
   <div class="hidden-xs">
-    <table class="table table-hover plans-table-table" ng-show="plans">
+    <table class="co-table plans-table-table" ng-show="plans">
       <thead>
-        <th>Plan</th>
-        <th>Private Repositories</th>
-        <th style="min-width: 85px">Price</th>
-        <th></th>
+        <td>Plan</td>
+        <td>Private Repositories</td>
+        <td style="min-width: 85px">Price</td>
+        <td></td>
       </thead>
 
       <tr ng-repeat="plan in plans" ng-class="currentPlan == plan ? 'active' : ''">
diff --git a/static/directives/repo-view/repo-panel-settings.html b/static/directives/repo-view/repo-panel-settings.html
index d28236a01..ce64d7e66 100644
--- a/static/directives/repo-view/repo-panel-settings.html
+++ b/static/directives/repo-view/repo-panel-settings.html
@@ -49,11 +49,15 @@
 
         <!-- Delete Repository -->
         <div class="panel-body panel-section">
-          <div>Deleting a repository <b>cannot be undone</b>. Here be dragons!</div>
-          <button class="btn btn-danger" ng-click="askDelete()">
-            <i class="fa fa-trash"></i>
-            Delete Repository
-          </button>
+          <div class="co-alert co-alert-danger">
+            <button class="btn btn-danger" style="float: right; margin-top: -7px;"
+                    ng-click="askDelete()">
+              <i class="fa fa-trash"></i>
+              Delete Repository
+            </button>
+
+            Deleting a repository <b>cannot be undone</b>. Here be dragons!
+          </div>
         </div>
 
         <!-- Build Status Badge -->
diff --git a/static/partials/user-view.html b/static/partials/user-view.html
index ed68b9870..bcdb8bca9 100644
--- a/static/partials/user-view.html
+++ b/static/partials/user-view.html
@@ -95,7 +95,7 @@
             <div class="co-panel-heading"><i class="fa fa-envelope-o"></i> E-mail Address</div>
             <div class="panel-body" style="padding-top: 5px;">
 
-              <div class="alert alert-success" ng-show="changeEmailInfo.state == 'sent'">
+              <div class="co-alert co-alert-success" ng-show="changeEmailInfo.state == 'sent'">
                 An e-mail has been sent to {{ sentEmail }} to verify the change.
               </div>
 
@@ -145,11 +145,11 @@
                   <div class="panel-title">Generate Encrypted Password</div>
 
                   <div class="panel-body">
-                    <div class="alert alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
+                    <div class="co-alert co-alert-info" ng-if="!Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
                       Due to Docker storing passwords entered on the command line in <strong>plaintext</strong>, it is highly recommended to use the button below to generate an an encrypted version of your password.
                     </div>
 
-                    <div class="alert alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
+                    <div class="co-alert co-alert-warning" ng-if="Features.REQUIRE_ENCRYPTED_BASIC_AUTH">
                       This installation is set to <strong>require</strong> encrypted passwords when
                       using the Docker command line interface. To generate an encrypted password, click the button below.
                     </div>
@@ -171,7 +171,7 @@
                   </span>
 
                   <div class="panel-body">
-                    <div class="alert alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>
+                    <div class="co-alert co-alert-warning">Note: Changing your password will also invalidate any generated encrypted passwords.</div>
 
 
                     <form class="form-change col-md-6" id="changePasswordForm" name="changePasswordForm" ng-submit="changePassword(); changePasswordForm.$setPristine()"