Update Setup Issue UI

Summary: Slightly cleaner layout

Test Plan: review setup issues resolved and unresolved in local config. fake a fatal.

Reviewers: epriestley

Reviewed By: epriestley

Spies: Korvin

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

resources/celerity/map.php

@@ -48,7 +48,7 @@ return array(
     'rsrc/css/application/config/config-options.css' => 'd55ed093',
     'rsrc/css/application/config/config-page.css' => 'c1d5121b',
     'rsrc/css/application/config/config-template.css' => '8f18fa41',
-    'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
+    'rsrc/css/application/config/setup-issue.css' => '7dae7f18',
     'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
     'rsrc/css/application/conpherence/color.css' => 'abb4c358',
     'rsrc/css/application/conpherence/durable-column.css' => '89ea6bef',
@@ -896,7 +896,7 @@ return array(
     'releeph-preview-branch' => 'b7a6f4a5',
     'releeph-request-differential-create-dialog' => '8d8b92cd',
     'releeph-request-typeahead-css' => '667a48ae',
-    'setup-issue-css' => 'f794cfc3',
+    'setup-issue-css' => '7dae7f18',
     'sprite-login-css' => '396f3c3a',
     'sprite-tokens-css' => '9cdfd599',
     'syntax-default-css' => '9923583c',

src/applications/config/view/PhabricatorSetupIssueView.php

@@ -148,7 +148,6 @@ final class PhabricatorSetupIssueView extends AphrontView {
         array(
           'href' => '/config/issue/'.$issue->getIssueKey().'/',
           'class' => 'button button-grey',
-          'style' => 'float: right',
         ),
         pht('Reload Page'));
     }
@@ -194,14 +193,24 @@ final class PhabricatorSetupIssueView extends AphrontView {
       array(
         'class' => 'setup-issue-head',
       ),
-      array($name, $status));
+      $name);
+
+    $body = phutil_tag(
+      'div',
+      array(
+        'class' => 'setup-issue-body',
+      ),
+      array(
+        $status,
+        $description,
+      ));
 
     $tail = phutil_tag(
       'div',
       array(
         'class' => 'setup-issue-tail',
       ),
-      array($actions));
+      $actions);
 
     $issue = phutil_tag(
       'div',
@@ -210,7 +219,7 @@ final class PhabricatorSetupIssueView extends AphrontView {
       ),
       array(
         $head,
-        $description,
+        $body,
         $tail,
       ));
 

webroot/rsrc/css/application/config/setup-issue.css

@@ -6,15 +6,15 @@
 }
 
 .setup-issue-shell {
-  max-width: 760px;
+  max-width: 880px;
   margin: 16px auto;
 }
 
 .setup-issue {
   background: #fff;
-  border: 1px solid #BFCFDA;
+  border: 1px solid #e4e5e6;
-  padding: 8px;
+  padding: 0;
-  border-radius: 3px;
+  border-radius: 5px;
 }
 
 .setup-issue p {
@@ -24,29 +24,30 @@
 .setup-issue table {
   width: 100%;
   border-collapse: collapse;
-  border: 1px solid #BFCFDA;
+  border: 1px solid #e2e2e2;
 }
 
 .setup-issue table th {
   text-align: right;
   width: 30%;
   background: #F8F9FC;
-  border: 1px solid #BFCFDA;
+  border: 1px solid #e2e2e2;
   padding: 8px;
 }
 
 .setup-issue table td {
-  border: 1px solid #BFCFDA;
+  border: 1px solid #e2e2e2;
   padding: 8px;
   word-break: break-word;
 }
 
 .setup-issue pre {
   width: auto;
-  border: 1px solid #BFCFDA;
+  border: 1px solid #e2e2e2;
-  padding: 10px 2%;
+  padding: 12px;
   background: #F8F9FC;
   overflow-x: auto;
+  border-radius: 3px;
 }
 
 .setup-issue tt {
@@ -60,51 +61,51 @@
 }
 
 .setup-issue-instructions {
-  font-size: 14px;
+  font-size: 13px;
-  padding: 12px 0;
+  padding: 16px;
   line-height: 20px;
-  background: #fff;
+  background: rgba(71,87,120,0.08);
-  border-bottom: 1px solid #BFCFDA;
+  border-radius: 3px;
-  margin: 0 12px;
 }
 
 .setup-fatal .setup-issue-instructions {
-  color: #c0392b;
+  color: #af1404;
   background: #f4dddb;
-  padding: 12px;
-  margin: 0 0 12px;
-  border-bottom: 1px solid #c0392b;
 }
 
 .setup-issue-name {
-  color: #464C5C;
-  padding: 4px 8px 12px;
-  border-bottom: 1px solid #BFCFDA;
   font-size: 15px;
   font-weight: bold;
+  color: #6B748C;
+  border-bottom: 1px solid #e2e2e2;
+  overflow: hidden;
+  padding: 16px;
+  line-height: 24px;
 }
 
-.setup-issue-tail {
+.setup-issue-body {
-  margin-top: 12px;
+  padding: 16px 16px 0 16px;
 }
 
 .setup-issue-status {
-  margin: 12px 4px 0;
+  margin: 0 0 16px 0;
   padding: 12px;
   background: #FDF5D4;
-  color: #bc7837;
+  color: #ab8206;
-  border: 1px solid #bc7837;
   border-radius: 3px;
 }
 
 .setup-issue-actions {
-  padding: 8px 12px;
+  padding: 12px;
-  border-top: 1px solid #dfdfdf;
+  background-color: #f5f5f5;
-  background-color: #f7f7f7;
+  border-bottom-right-radius: 5px;
-  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 5px;
-  border-bottom-left-radius: 3px;
   overflow: hidden;
-  margin: 0 -8px -8px -8px;
+  text-align: right;
+}
+
+.setup-issue-actions .button {
+  margin-left: 8px;
 }
 
 .setup-issue-next {
@@ -112,14 +113,17 @@
   border: 1px solid #BFCFDA;
   background: #daeaf3;
   text-align: center;
-  font-size: 16px;
   margin: 12px 0;
   color: #2980b9;
   border-radius: 3px;
 }
 
 .setup-issue-config {
-  padding: 8px 12px;
+  padding: 12px 0;
+}
+
+.setup-issue-config + .setup-issue-config {
+  padding-top: 0;
 }
 
 .setup-issue ul {
@@ -134,3 +138,12 @@
   text-align: right;
   color: #74777D;
 }
+
+.phui-two-column-view .setup-issue-background {
+  padding: 0;
+}
+
+.phui-two-column-view .setup-issue-shell {
+  width: auto;
+  margin: 0;
+}