PR improvements

lib/views/issueish-detail-view.js

@@ -97,6 +97,15 @@ export class BareIssueishDetailView extends React.Component {
         <div className="github-IssueishDetailView-container">
 
           <header className="github-IssueishDetailView-header">
+            <div className="github-IssueishDetailView-headerGroup is-fullWidth">
+              <a className="github-IssueishDetailView-avatar" href={issueish.author.url}>
+                <img className="github-IssueishDetailView-avatarImage"
+                  src={issueish.author.avatarUrl}
+                  title={issueish.author.login}
+                />
+              </a>
+              <h3 className="github-IssueishDetailView-title">{issueish.title}</h3>
+            </div>
             <div className="github-IssueishDetailView-headerGroup">
               <IssueishBadge className="github-IssueishDetailView-headerBadge"
                 type={issueish.__typename}
@@ -116,17 +125,12 @@ export class BareIssueishDetailView extends React.Component {
                 onClick={this.handleRefreshClick}
               />
             </div>
-            <div className="github-IssueishDetailView-headerGroup is-fullWidth">
-              <a className="github-IssueishDetailView-avatar" href={issueish.author.url}>
-                <img className="github-IssueishDetailView-avatarImage"
-                  src={issueish.author.avatarUrl}
-                  title={issueish.author.login}
-                />
-              </a>
-              <h3 className="github-IssueishDetailView-title">{issueish.title}</h3>
-            </div>
           </header>
 
+          {isPr && <div className="github-IssueishDetailView-buildStatus">
+            <PrStatusesView pullRequest={issueish} displayType="full" />
+          </div>}
+
           <GithubDotcomMarkdown
             html={issueish.bodyHTML || '<em>No description provided.</em>'}
             switchToIssueish={this.props.switchToIssueish}
@@ -154,10 +158,6 @@ export class BareIssueishDetailView extends React.Component {
             />
           }
 
-          {isPr && <div className="github-IssueishDetailView-buildStatus">
-            <PrStatusesView pullRequest={issueish} displayType="full" />
-          </div>}
-
         </div>
       </div>
     );

lib/views/pr-status-context-view.js

@@ -28,7 +28,7 @@ export class BarePrStatusContextView extends React.Component {
           <Octicon icon={icon} className={style} />
         </span>
         <span className="github-PrStatuses-list-item-context">
-          <strong>{context}</strong><br />{description}
+          <strong>{context}</strong> {description}
         </span>
         <span className="github-PrStatuses-list-item-details-link">
           <a href={targetUrl}>Details</a>

styles/github-dotcom-markdown.less

@@ -1,31 +1,82 @@
+@import "variables";
+
 // This styles Markdown used in issueish panes.
 
+@margin: 1.5em;
+
 .github-DotComMarkdownHtml {
-  a {
-    color: @text-color-info;
+
+  & > *:last-child {
+    margin-bottom: 0;
   }
 
-  p {
-    line-height: 1.5;
+  // Headings --------------------
+
+  h1, h2, h3, h4, h5, h6 {
+    line-height: 1.2;
+    margin-top: @margin;
+    margin-bottom: @margin/3;
+    color: @text-color-highlight;
   }
 
-  hr {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    border-top: 1px solid @text-color;
-    width: 100%
+  h1 { font-size: 1.5em; font-weight: 400; }
+  h2 { font-size: 1.3em; font-weight: 400; }
+  h3 { font-size: 1.2em; font-weight: 500; }
+  h4 { font-size: 1.1em; font-weight: 600; }
+  h5 { font-size: 1em;   font-weight: 600; }
+  h6 { font-size: .9em;  font-weight: 600; }
+
+  h2 {
+    padding-bottom: .25em;
+    margin-bottom: @margin/2;
+    border-bottom: 1px solid @base-border-color;
   }
 
-  ul {
-    margin-left: -10px;
+
+  // Emphasis --------------------
+
+  strong {
+    color: @text-color-highlight;
   }
 
-  ol {
-    margin-left: -20px;
+  del {
+    color: @text-color-subtle;
+  }
+
+
+  // Link --------------------
+
+  a,
+  a code {
+    color: @text-color-info;
+  }
+
+
+  // Images --------------------
+
+  img {
+    max-width: 100%;
+  }
+
+
+  // Paragraph --------------------
+
+  & > p {
+    margin-top: 0;
+    margin-bottom: @margin;
+  }
+
+
+  // List --------------------
+
+  & > ul,
+  & > ol {
+    margin-bottom: @margin;
+    padding-left: 2em;
   }
 
   li {
-    font-size: .9em;
+    // font-size: .9em;
     padding-top: .1em;
     padding-bottom: .1em;
 
@@ -34,23 +85,85 @@
     }
   }
 
+  .task-list-item {
+    // indent task lists
+    list-style: none;
+    .task-list-item-checkbox {
+      position: absolute;
+      margin-left: -20px;
+    }
+  }
+
+  // Blockquotes --------------------
+
   blockquote {
-    font-size: .9em;
-    padding: .4em .8em;
+    margin: @margin 0;
+    padding: .25em 1em;
+    font-size: inherit;
     color: @text-color-subtle;
-    border-left: 2px solid @base-border-color;
+    border-color: @base-border-color;
+    border-width: 3px;
   }
 
-  pre > code {
-    white-space: pre;
+
+  // HR --------------------
+
+  hr {
+    margin: @margin*1.5 25%;
+    border-top: 1px solid @base-border-color;
+    background: none;
   }
 
-  // indent task lists
-  .task-list-item {
-    list-style: none;
-    .task-list-item-checkbox {
-      position: absolute;
-      margin-left: -20px;
+
+  // Table --------------------
+
+  table {
+    margin: @margin 0;
+  }
+
+  th {
+    color: @text-color-highlight;
+  }
+
+  th,
+  td {
+    padding: .66em 1em;
+    border: 1px solid @base-border-color;
+  }
+
+
+  // Code --------------------
+
+  pre,
+  code {
+    color: @text-color-highlight;
+    background-color: @background-color-highlight;
+
+  }
+
+  pre {
+    margin: @margin 0;
+
+    & > code {
+      white-space: pre;
     }
   }
+
+  .highlight {
+    margin: @margin 0;
+    pre {
+      margin: 0;
+    }
+  }
+
+
+  // KBD --------------------
+
+  kbd {
+    color: @text-color-highlight;
+    border: 1px solid @base-border-color;
+    border-bottom: 2px solid darken(@base-border-color, 6%);
+    background-color: @background-color-highlight;
+  }
+
 }