Update Phortune UI elements

Summary:
Ref T2787. Update some of the UI elements used by Phortune. Mostly gets rid of the old blue headers.

Also adds some sweet art.

Test Plan: Poked aroudn Phortune.

Reviewers: btrahan, chad

Reviewed By: chad

Subscribers: epriestley

Maniphest Tasks: T2787

Differential Revision: https://secure.phabricator.com/D9915

resources/celerity/map.php

@@ -8,7 +8,7 @@ return array(
   'names' =>
   array(
     'core.pkg.css' => 'c2c68e64',
-    'core.pkg.js' => '2b9e8efd',
+    'core.pkg.js' => '80884e9b',
     'darkconsole.pkg.js' => 'df001cab',
     'differential.pkg.css' => '4a93db37',
     'differential.pkg.js' => '7528cfc9',
@@ -84,6 +84,7 @@ return array(
     'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49',
     'rsrc/css/application/pholio/pholio.css' => '47dffb9c',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
+    'rsrc/css/application/phortune/phortune.css' => '012360a6',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
     'rsrc/css/application/policy/policy-edit.css' => '05cca26a',
@@ -216,7 +217,7 @@ return array(
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadCompositeSource.js' => '503e17fd',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadOnDemandSource.js' => '8b3fd187',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadPreloadedSource.js' => '54f314a0',
-    'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadSource.js' => '210aa43b',
+    'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadSource.js' => 'fcba4ecc',
     'rsrc/externals/javelin/lib/control/typeahead/source/TypeaheadStaticSource.js' => '316b8fa1',
     'rsrc/externals/raphael/g.raphael.js' => '40dde778',
     'rsrc/externals/raphael/g.raphael.line.js' => '40da039e',
@@ -308,6 +309,11 @@ return array(
     'rsrc/image/people/mckinley.png' => 'fb8f16ce',
     'rsrc/image/people/taft.png' => 'd7bc402c',
     'rsrc/image/people/washington.png' => '40dd301c',
+    'rsrc/image/phortune/balanced.png' => 'f6ba2691',
+    'rsrc/image/phortune/paypal.png' => '9747cb33',
+    'rsrc/image/phortune/stripe.png' => 'bfedc2ce',
+    'rsrc/image/phortune/test.png' => '0235d8a7',
+    'rsrc/image/phortune/wepay.png' => 'b37163ce',
     'rsrc/image/phrequent_active.png' => 'a466a8ed',
     'rsrc/image/phrequent_inactive.png' => 'bfc15a69',
     'rsrc/image/search-white.png' => '64cc0d45',
@@ -357,7 +363,7 @@ return array(
     'rsrc/js/application/countdown/timer.js' => '361e3ed3',
     'rsrc/js/application/dashboard/behavior-dashboard-async-panel.js' => '469c0d9e',
     'rsrc/js/application/dashboard/behavior-dashboard-move-panels.js' => '82439934',
-    'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '880fa5ac',
+    'rsrc/js/application/dashboard/behavior-dashboard-query-panel-select.js' => '453c5375',
     'rsrc/js/application/dashboard/behavior-dashboard-tab-panel.js' => 'd4eecc63',
     'rsrc/js/application/differential/ChangesetViewManager.js' => 'd2907473',
     'rsrc/js/application/differential/DifferentialInlineCommentEditor.js' => 'f2441746',
@@ -564,7 +570,7 @@ return array(
     'javelin-behavior-dark-console' => '357b6e9b',
     'javelin-behavior-dashboard-async-panel' => '469c0d9e',
     'javelin-behavior-dashboard-move-panels' => '82439934',
-    'javelin-behavior-dashboard-query-panel-select' => '880fa5ac',
+    'javelin-behavior-dashboard-query-panel-select' => '453c5375',
     'javelin-behavior-dashboard-tab-panel' => 'd4eecc63',
     'javelin-behavior-device' => '03d6ed07',
     'javelin-behavior-differential-add-reviewers-and-ccs' => 'e10f8e18',
@@ -683,7 +689,7 @@ return array(
     'javelin-typeahead-normalizer' => 'aa93c7b0',
     'javelin-typeahead-ondemand-source' => '8b3fd187',
     'javelin-typeahead-preloaded-source' => '54f314a0',
-    'javelin-typeahead-source' => '210aa43b',
+    'javelin-typeahead-source' => 'fcba4ecc',
     'javelin-typeahead-static-source' => '316b8fa1',
     'javelin-uri' => '6eff08aa',
     'javelin-util' => 'a23de73d',
@@ -762,6 +768,7 @@ return array(
     'pholio-inline-comments-css' => '8e545e49',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
+    'phortune-css' => '012360a6',
     'phrequent-css' => 'ffc185ad',
     'phriction-document-css' => '7d7f0071',
     'phui-action-header-view-css' => '83e2cc86',
@@ -997,13 +1004,6 @@ return array(
       0 => 'javelin-util',
       1 => 'javelin-magical-init',
     ),
-    '210aa43b' =>
-    array(
-      0 => 'javelin-install',
-      1 => 'javelin-util',
-      2 => 'javelin-dom',
-      3 => 'javelin-typeahead-normalizer',
-    ),
     '2290aeef' =>
     array(
       0 => 'javelin-install',
@@ -1180,6 +1180,11 @@ return array(
       1 => 'javelin-dom',
       2 => 'phabricator-prefab',
     ),
+    '453c5375' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-dom',
+    ),
     '469c0d9e' =>
     array(
       0 => 'javelin-behavior',
@@ -1499,11 +1504,6 @@ return array(
     array(
       0 => 'javelin-install',
     ),
-    '880fa5ac' =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-dom',
-    ),
     '88236f00' =>
     array(
       0 => 'javelin-behavior',
@@ -2132,6 +2132,13 @@ return array(
       2 => 'javelin-vector',
       3 => 'javelin-magical-init',
     ),
+    'fcba4ecc' =>
+    array(
+      0 => 'javelin-install',
+      1 => 'javelin-util',
+      2 => 'javelin-dom',
+      3 => 'javelin-typeahead-normalizer',
+    ),
     42126667 =>
     array(
       0 => 'javelin-behavior',

src/applications/phortune/application/PhabricatorApplicationPhortune.php

@@ -41,9 +41,6 @@ final class PhabricatorApplicationPhortune extends PhabricatorApplication {
           '' => 'PhortuneAccountListController',
           'edit/(?:(?P<id>\d+)/)?' => 'PhortuneAccountEditController',
         ),
-        'stripe/' => array(
-          'testpaymentform/' => 'PhortuneStripeTestPaymentFormController',
-        ),
         'product/' => array(
           '' => 'PhortuneProductListController',
           'view/(?P<id>\d+)/' => 'PhortuneProductViewController',

src/applications/phortune/controller/PhortuneAccountBuyController.php

@@ -82,11 +82,17 @@ final class PhortuneAccountBuyController
         pht('Qty.'),
         pht('Total'),
       ));
+    $table->setColumnClasses(
+      array(
+        'wide',
+        'right',
+        'right',
+        'right',
+      ));
 
-    $panel = new AphrontPanelView();
-    $panel->setNoBackground(true);
-    $panel->appendChild($table);
-
+    $cart_box = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Your Cart'))
+      ->appendChild($table);
 
     $title = pht('Buy Stuff');
 
@@ -167,12 +173,19 @@ final class PhortuneAccountBuyController
           ->setValue($one_time_options));
     }
 
+    $payment_box = id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('Choose Payment Method'))
+      ->appendChild($form)
+      ->appendChild($provider_form);
+
+    $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->addTextCrumb($title);
+
     return $this->buildApplicationPage(
       array(
-        $panel,
-        $form,
-        phutil_tag('br', array()),
-        $provider_form,
+        $crumbs,
+        $cart_box,
+        $payment_box,
       ),
       array(
         'title'   => $title,

src/applications/phortune/controller/PhortuneAccountViewController.php

@@ -79,20 +79,16 @@ final class PhortuneAccountViewController extends PhortuneController {
     $request = $this->getRequest();
     $user = $request->getUser();
 
-    $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Payment Methods'));
-
     $id = $account->getID();
-    $add_uri = $this->getApplicationURI($id.'/paymentmethod/edit/');
 
-    $actions = id(new PhabricatorActionListView())
-      ->setUser($user)
-      ->setObjectURI($request->getRequestURI())
-      ->addAction(
-        id(new PhabricatorActionView())
-          ->setName(pht('Add Payment Method'))
-          ->setIcon('fa-plus')
-          ->setHref($add_uri));
+    $header = id(new PHUIHeaderView())
+      ->setHeader(pht('Payment Methods'))
+      ->addActionLink(
+        id(new PHUIButtonView())
+          ->setTag('a')
+          ->setHref($this->getApplicationURI($id.'/paymentmethod/edit/'))
+          ->setText(pht('Add Payment Method'))
+          ->setIcon(id(new PHUIIconView())->setIconFont('fa-plus')));
 
     $list = id(new PHUIObjectItemListView())
       ->setUser($user)
@@ -129,11 +125,9 @@ final class PhortuneAccountViewController extends PhortuneController {
       $list->addItem($item);
     }
 
-    return array(
-      $header,
-      $actions,
-      $list,
-    );
+    return id(new PHUIObjectBoxView())
+      ->setHeader($header)
+      ->appendChild($list);
   }
 
   private function buildPurchaseHistorySection(PhortuneAccount $account) {
@@ -143,10 +137,8 @@ final class PhortuneAccountViewController extends PhortuneController {
     $header = id(new PHUIHeaderView())
       ->setHeader(pht('Purchase History'));
 
-    return array(
-      $header,
-
-    );
+    return id(new PHUIObjectBoxView())
+      ->setHeader($header);
   }
 
   private function buildAccountHistorySection(PhortuneAccount $account) {
@@ -170,8 +162,11 @@ final class PhortuneAccountViewController extends PhortuneController {
       ->setTransactions($xactions)
       ->setMarkupEngine($engine);
 
+    $box = id(new PHUIObjectBoxView())
+      ->setHeader($header);
+
     return array(
-      $header,
+      $box,
       $xaction_view,
     );
   }

src/applications/phortune/controller/PhortunePaymentMethodEditController.php

@@ -37,7 +37,20 @@ final class PhortunePaymentMethodEditController
       foreach ($providers as $provider) {
         $choices[] = $this->renderSelectProvider($provider);
       }
-      return $this->buildResponse($choices, $account_uri);
+
+      $content = phutil_tag(
+        'div',
+        array(
+          'class' => 'phortune-payment-method-list',
+        ),
+        $choices);
+
+      return $this->newDialog()
+        ->setRenderDialogAsDiv(true)
+        ->setTitle(pht('Add Payment Method'))
+        ->appendParagraph(pht('Choose a payment method to add:'))
+        ->appendChild($content)
+        ->addCancelButton($account_uri);
     }
 
     $provider = $providers[$provider_key];
@@ -111,14 +124,21 @@ final class PhortunePaymentMethodEditController
           ->setValue(pht('Add Payment Method'))
           ->addCancelButton($account_uri));
 
-    if ($errors) {
-      $errors = id(new AphrontErrorView())
-        ->setErrors($errors);
-    }
+    $box = id(new PHUIObjectBoxView())
+      ->setHeaderText($provider->getPaymentMethodDescription())
+      ->setForm($form);
 
-    return $this->buildResponse(
-      array($errors, $form),
-      $account_uri);
+    $crumbs = $this->buildApplicationCrumbs();
+    $crumbs->addTextCrumb(pht('Add Payment Method'));
+
+    return $this->buildApplicationPage(
+      array(
+        $crumbs,
+        $box,
+      ),
+      array(
+        'title' => $provider->getPaymentMethodDescription(),
+      ));
   }
 
   private function renderSelectProvider(
@@ -128,20 +148,21 @@ final class PhortunePaymentMethodEditController
     $user = $request->getUser();
 
     $description = $provider->getPaymentMethodDescription();
-    $icon = $provider->getPaymentMethodIcon();
+    $icon_uri = $provider->getPaymentMethodIcon();
     $details = $provider->getPaymentMethodProviderDescription();
 
-    $button = phutil_tag(
-      'button',
-      array(
-        'class' => 'grey',
-      ),
-      array(
-        $description,
-        phutil_tag('br'),
-        $icon,
-        $details,
-      ));
+    $this->requireResource('phortune-css');
+
+    $icon = id(new PHUIIconView())
+      ->setImage($icon_uri)
+      ->addClass('phortune-payment-icon');
+
+    $button = id(new PHUIButtonView())
+      ->setSize(PHUIButtonView::BIG)
+      ->setColor(PHUIButtonView::GREY)
+      ->setIcon($icon)
+      ->setText($description)
+      ->setSubtext($details);
 
     $form = id(new AphrontFormView())
       ->setUser($user)
@@ -151,28 +172,6 @@ final class PhortunePaymentMethodEditController
     return $form;
   }
 
-  private function buildResponse($content, $account_uri) {
-    $request = $this->getRequest();
-
-    $title = pht('Add Payment Method');
-    $header = id(new PHUIHeaderView())
-      ->setHeader($title);
-
-    $crumbs = $this->buildApplicationCrumbs();
-    $crumbs->addTextCrumb(pht('Account'), $account_uri);
-    $crumbs->addTextCrumb(pht('Payment Methods'), $request->getRequestURI());
-
-    return $this->buildApplicationPage(
-      array(
-        $crumbs,
-        $header,
-        $content,
-      ),
-      array(
-        'title' => $title,
-      ));
-  }
-
   private function processClientErrors(
     PhortunePaymentProvider $provider,
     $client_errors_raw) {

src/applications/phortune/controller/PhortuneProductListController.php

@@ -24,9 +24,6 @@ final class PhortuneProductListController extends PhabricatorController {
         ->setHref($this->getApplicationURI('product/edit/'))
         ->setIcon('fa-plus-square'));
 
-    $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Product List'));
-
     $product_list = id(new PHUIObjectItemListView())
       ->setUser($user)
       ->setNoDataString(pht('No products.'));
@@ -51,7 +48,6 @@ final class PhortuneProductListController extends PhabricatorController {
     return $this->buildApplicationPage(
       array(
         $crumbs,
-        $header,
         $product_list,
         $pager,
       ),

webroot/rsrc/css/application/phortune/phortune.css

@@ -0,0 +1,17 @@
+/**
+ * @provides phortune-css
+ */
+
+.phortune-payment-icon {
+  width: 34px;
+  height: 34px;
+}
+
+.phortune-payment-method-list {
+  margin: 8px 24px 0;
+}
+
+.phortune-payment-method-list button {
+  margin: 4px 0;
+  width: 100%;
+}