SAAS-1021: Billing page restyle

airtime_mvc/application/forms/BillingClient.php

@@ -162,7 +162,7 @@ class Application_Form_BillingClient extends Zend_Form
         $subscribe->setLabel(_('Subscribe to Sourcefabric newsletter'))
             ->setValue($subscribevalue)
             ->setBelongsTo('customfields')
-            ->setAttrib('class', 'input_text')
+            ->setAttrib('class', 'billing-details-checkbox')
             ->setRequired(true)
             ->addValidator($notEmptyValidator)
             ->addFilter('StringTrim');

airtime_mvc/application/views/scripts/billing/client.phtml

@@ -1,9 +1,9 @@
 <?php 
-$this->form->getElement("submit")->setAttrib("class", "right-align");
+$this->form->getElement("submit")->setAttrib("class", "btn right-floated");
 $this->form->getElement("country")->setAttrib("class", "right-align");
 $this->form->getElement("securityqid")->setAttrib("class", "right-align");
 ?>
-<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
+<div class="ui-widget prefpanel simple-formblock clearfix padded-strong">
 <H2>Billing Account Details</H2>
 <?php if (isset($this->errorMessage)) {?>
 <div class="errors"><?php echo $this->errorMessage ?></div>

airtime_mvc/application/views/scripts/billing/invoices.phtml

@@ -1,4 +1,4 @@
-<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
+<div class="ui-widget prefpanel clearfix padded-strong billing-panel">
 <H2>Invoices</H2>
 <?php 
 $topTextClass = "";
@@ -8,11 +8,11 @@ if (array_key_exists("planupdated", $_GET))
     $topTextClass = "status-good";
 }
 else {
-    $topText = _pro("Tip: To pay an invoice, click \"View Invoice\"<br> and look for the \"Checkout\" button.");
+    $topText = _pro("Tip: To pay an invoice, click \"View Invoice\" and look for the \"Checkout\" button.");
 }
     
 ?>
-<p style="text-align: center; padding-left: 20px;" class="<?=$topTextClass?>"><?=$topText?></p>
+<p class="<?=$topTextClass?>"><?=$topText?></p>
 <table id="invoices_table">
     <tr class="header">
         <th>Date Issued</th>

airtime_mvc/application/views/scripts/billing/upgrade.phtml

@@ -193,7 +193,7 @@ $(document).ready(function() {
 });
 </script>
 
-<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
+<div class="ui-widget prefpanel clearfix padded-strong billing-panel">
 <H2><?=_("Account Plans")?></H2>
 <H4><?=_("Upgrade today to get more listeners and storage space!")?></H4>
 <div>
@@ -215,7 +215,7 @@ $(document).ready(function() {
             </td>
             <td>2 Streams
             </td>
-            <td>3 Streams
+            <td class="last-column">3 Streams
             </td>
         </tr> 
         <tr>
@@ -225,7 +225,7 @@ $(document).ready(function() {
             </td>
             <td>64kbps and 196kbps Stream Quality
             </td>
-            <td>64kbps, 128kbps, and 196kbps Stream Quality
+            <td class="last-column">64kbps, 128kbps, and 196kbps Stream Quality
             </td>
         </tr> 
         <tr class="august-promo">
@@ -241,7 +241,7 @@ $(document).ready(function() {
                 <span>100 Listeners per stream</span><br>
                 <div>200 Listeners per stream</div>
             </td>
-            <td>
+            <td class="last-column">
                 <span>500 Listeners per stream</span><br>
                 <div>1000 Listeners per stream</div>
             </td>
@@ -259,7 +259,7 @@ $(document).ready(function() {
                 <span>30GB Storage</span><br>
                 <div>60GB Storage</div>
             </td>
-            <td>
+            <td class="last-column">
                 <span>150GB Storage</span><br>
                 <div>300GB Storage</div>
             </td>
@@ -271,7 +271,7 @@ $(document).ready(function() {
             </td>
             <td>Live Chat, Ticket, Email, Forum Support
             </td>
-            <td>Live Chat, Ticket, Email, Forum Support
+            <td class="last-column">Live Chat, Ticket, Email, Forum Support
             </td>
         </tr> 
         <tr>
@@ -281,17 +281,17 @@ $(document).ready(function() {
             </td>
             <td>Save 15% if paid annually
             </td>
-            <td>Save 15% if paid annually
+            <td class="last-column">Save 15% if paid annually
             </td>
         </tr> 
-        <tr class="price">
+        <tr class="price last-row">
             <td id="hobbyist_grid_price">
             </td>
             <td id="starter_grid_price">
             </td>
             <td id="plus_grid_price">
             </td>
-            <td id="premium_grid_price">
+            <td class="last-column" id="premium_grid_price">
             </td>
         </tr> 
     </table>
@@ -416,7 +416,7 @@ echo($currentProduct["name"]);
         <b>Total:</b> <span id="total"></span>
     </div>
     
-    <input type="submit" value="Submit Order" id="atpro_submitorder"></input>
+    <input type="submit" class="btn right-floated" value="Submit Order" id="atpro_submitorder"></input>
     <div class="clearfix"></div>
 </form>
 </div>

airtime_mvc/public/css/billing.css

@@ -2,21 +2,20 @@
 
 .billing-panel
 {
-	width: 400px;
+	width: 500px;
-	margin: 0 auto;
 	margin-bottom: 30px;
 }
 
 .billing-panel h3
 {
-	color: #222;
+	/*color: #222;*/
 }
 
 .billing-panel h4
 {
     font-size: 1.25em;
     margin: 0px;
-    color: #333;
+    /*color: #333;*/
     font-weight: normal;
 }
 
@@ -24,16 +23,16 @@
 {
 	border: 0px solid #000;
 	margin: 0 auto;
-	color: #000;
+	/*color: #000;*/
 }
 
 #upgrade-downgrade label
 {
-	color: rgb(28,28,28);
+	/*color: rgb(28,28,28);*/
 }
 #upgrade-downgrade label.disabled
 {
-	color: rgb(108,108,108);
+	/*color: rgb(108,108,108);*/
 }
 
 #upgrade-downgrade dl
@@ -55,14 +54,14 @@
 {
 	border-spacing: 0px;
     border-collapse: separate;
-	border: 1px solid #777;
 	width: 680px;
-	margin-left: -140px;
+	/*border: 1px solid #777;*/
 	/*background-color: #555;*/
 	table-layout: fixed;
 	margin-top: 20px;
 	margin-bottom: 20px;
 	box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
+	color: #000;
 }
 
 .pricing-grid .august-promo div {
@@ -80,17 +79,33 @@
 
 .pricing-grid td, .pricing-grid th
 {
-	border-bottom: 1px solid #999;
+	border-bottom: 1px solid #5b5b5b;
-	border-right: 1px solid #bbb;
+	border-right: 1px solid #5b5b5b;
-	background-color: #ccc;
 	padding: 10px;
 }
 
+.pricing-grid td {
+	background: #2f2f2f;
+	color: #cdcdcd;
+}
+
+.pricing-grid .last-column {
+	border-right: none;
+}
+
+.pricing-grid .last-row td {
+	border-bottom: none;
+}
+
 .pricing-grid th
 {
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border: 0px;
+	color: #CDCDCD;
+	background-color:#ff5d1a;
+	background: -moz-linear-gradient(top, #dd4202 0, #ff5d1a 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dd4202), color-stop(100%, #ff5d1a));
 }
 
 
@@ -99,11 +114,8 @@
 	text-align: right;
     background-color: #ddd;
     font-weight: bold;
-}
+	background-color: #2f2f2f;
-
+	color: #cdcdcd;
-#current_plan
-{
-	text-align: center;
 }
 
 #plantype
@@ -146,6 +158,7 @@
 	border: 1px solid #777;
 	background: #ccc;
 	padding: 5px;
+	color: #000;
 }
 #total_box
 {
@@ -189,7 +202,6 @@
 
 #invoices_table
 {
-	margin: 0 auto;
     border-spacing: 0px;
     border-collapse: separate;
     border: 1px solid #777;
@@ -197,12 +209,17 @@
     table-layout: fixed;
     margin-top: 20px;
     margin-bottom: 35px;
-    background: #ccc;
+	width: 500px;
 }
 
 #invoices_table tbody tr th
 {
 	border: 0px;
+	color: #efefef;
+	background: #5E5E5E;
+	background-color: #5E5E5E;
+	border-top: 1px solid #9d9d9d;
+
 }
 
 #invoices_table .header
@@ -210,6 +227,7 @@
     box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
 }
 
+
 #invoices_table tr
 {
     border: 1px solid #555;
@@ -221,11 +239,15 @@
 }
 
 /** This form is the separate one on the Billing Account Details page (BillingClient.php) */
+#clientdetails_form {
+	width: 500px;
+}
+
 #clientdetails_form dt {
     float: left;
     clear: both;
     width: 50%;
-    margin-bottom: 10px;
+    /*margin-bottom: 10px;*/
 }
 #clientdetails_form dd {
 	float: left;
@@ -251,3 +273,7 @@
 	margin-top:10px;
 	background: url('images/august_aweomse_promo_banner.png') no-repeat;
 }
+
+.billing-details-checkbox {
+	width: auto;
+}

airtime_mvc/public/css/styles.css

@@ -1203,7 +1203,7 @@ input[type="checkbox"] {
 }
 
 #pref_form dt, #pref_form dd,
-#pref_form textarea {
+#pref_form textarea, #clientdetails_form dd {
     display:block;
     float:none;
     margin-left:0;