Refactor IssueishPaneItemView

lib/containers/issueish-pane-item-container.js

@@ -91,43 +91,56 @@ export class IssueishPaneItemView extends React.Component {
       pullRequest: issueish.__typename === 'PullRequest' ? issueish : null,
     };
     return (
-      <div className="github-PrPaneItem native-key-bindings">
-        <div className="github-PrPaneItem-container">
-          <div className="issueish-badge-and-link">
-            <IssueishBadge type={issueish.__typename} state={issueish.state} />
-            <span className="issueish-link">
-              <a href={issueish.url}>{repo.owner.login}/{repo.name}#{issueish.number}</a>
-            </span>
-            {isPr && <span className="pr-build-status-icon">
-              <PrStatusesContainer pullRequest={issueish} displayType="check" />
-            </span>}
-            <span className="refresh-button">
+      <div className="github-IssueishPaneItemView native-key-bindings">
+        <div className="github-IssueishPaneItemView-container">
+
+          <header className="github-IssueishPaneItemView-header">
+            <div className="github-IssueishPaneItemView-headerGroup">
+              <IssueishBadge className="github-IssueishPaneItemView-headerBadge"
+                type={issueish.__typename}
+                state={issueish.state}
+              />
+              <a className="github-IssueishPaneItemView-headerLink"
+                href={issueish.url}>{repo.owner.login}/{repo.name}#{issueish.number}
+              </a>
+              {isPr && <span className="github-IssueishPaneItemView-headerStatus">
+                <PrStatusesContainer pullRequest={issueish} displayType="check" />
+              </span>}
+            </div>
+            <div className="github-IssueishPaneItemView-headerGroup">
               <Octicon
                 icon="repo-sync"
-                className={cx({refreshing: this.state.refreshing})}
+                className={cx('github-IssueishPaneItemView-headerRefreshButton', {refreshing: this.state.refreshing})}
                 onClick={this.handleRefreshClick}
               />
-            </span>
-          </div>
-          <div className="issueish-avatar-and-title">
-            <a className="author-avatar-link" href={issueish.author.url}>
-              <img className="author-avatar" src={issueish.author.avatarUrl} title={issueish.author.login} />
-            </a>
-            <h3 className="issueish-title">{issueish.title}</h3>
-          </div>
+            </div>
+            <div className="github-IssueishPaneItemView-headerGroup is-fullWidth">
+              <a className="github-IssueishPaneItemView-avatar" href={issueish.author.url}>
+                <img className="github-IssueishPaneItemView-avatarImage"
+                  src={issueish.author.avatarUrl}
+                  title={issueish.author.login}
+                />
+              </a>
+              <h3 className="github-IssueishPaneItemView-title">{issueish.title}</h3>
+            </div>
+          </header>
+
           <GithubDotcomMarkdown
             html={issueish.bodyHTML || '<em>No description provided.</em>'}
             switchToIssueish={this.props.switchToIssueish}
           />
-          <div className="reactions">
+
+          <div className="github-IssueishPaneItemView-reactions">
             {issueish.reactionGroups.map(group => (
               group.users.totalCount > 0
-                ? <span className={cx('reaction-group', group.content.toLowerCase())} key={group.content}>
+                ? <span className={cx('github-IssueishPaneItemView-reactionsGroup', group.content.toLowerCase())}
+                  key={group.content}>
                   {reactionTypeToEmoji[group.content]} &nbsp; {group.users.totalCount}
                 </span>
                 : null
             ))}
           </div>
+
           {isPr ?
             <PrTimelineContainer
               {...childProps}
@@ -138,9 +151,11 @@ export class IssueishPaneItemView extends React.Component {
               switchToIssueish={this.props.switchToIssueish}
             />
           }
-          {isPr && <div className="pr-build-statuses">
+
+          {isPr && <div className="github-IssueishPaneItemView-buildStatus">
             <PrStatusesContainer pullRequest={issueish} />
           </div>}
+
         </div>
       </div>
     );

lib/containers/pr-statuses-container.js

@@ -10,11 +10,11 @@ import PeriodicRefresher from '../periodic-refresher';
 import {RelayConnectionPropType} from '../prop-types';
 
 export const stateToIconAndStyle = {
-  EXPECTED: {category: 'PENDING', icon: 'primitive-dot', style: 'status-warning'},
-  PENDING: {category: 'PENDING', icon: 'primitive-dot', style: 'status-warning'},
-  SUCCESS: {category: 'SUCCESS', icon: 'check', style: 'status-success'},
-  ERROR: {category: 'FAILURE', icon: 'alert', style: 'status-error'},
-  FAILURE: {category: 'FAILURE', icon: 'x', style: 'status-error'},
+  EXPECTED: {category: 'PENDING', icon: 'primitive-dot', style: 'github-PrStatuses--warning'},
+  PENDING: {category: 'PENDING', icon: 'primitive-dot', style: 'github-PrStatuses--warning'},
+  SUCCESS: {category: 'SUCCESS', icon: 'check', style: 'github-PrStatuses--success'},
+  ERROR: {category: 'FAILURE', icon: 'alert', style: 'github-PrStatuses--error'},
+  FAILURE: {category: 'FAILURE', icon: 'x', style: 'github-PrStatuses--error'},
 };
 
 export function category(state) {

lib/views/issueish-badge.js

@@ -22,7 +22,7 @@ export default function IssueishBadge({type, state, ...others}) {
 
   const {className, ...otherProps} = others;
   return (
-    <span className={cx('issueish-badge', 'badge', state.toLowerCase(), className)} {...otherProps}>
+    <span className={cx(className, 'github-IssueishBadge', state.toLowerCase())} {...otherProps}>
       <Octicon icon={icon} />
       {state.toLowerCase()}
     </span>

styles/github-dotcom-markdown.less

@@ -0,0 +1,56 @@
+// This styles Markdown used in issueish panes.
+
+.github-DotComMarkdownHtml {
+  a {
+    color: @text-color-info;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  hr {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-top: 1px solid @text-color;
+    width: 100%
+  }
+
+  ul {
+    margin-left: -10px;
+  }
+
+  ol {
+    margin-left: -20px;
+  }
+
+  li {
+    font-size: .9em;
+    padding-top: .1em;
+    padding-bottom: .1em;
+
+    li {
+      font-size: 1em;
+    }
+  }
+
+  blockquote {
+    font-size: .9em;
+    padding: .4em .8em;
+    color: @text-color-subtle;
+    border-left: 2px solid @base-border-color;
+  }
+
+  pre > code {
+    white-space: pre;
+  }
+
+  // indent task lists
+  .task-list-item {
+    list-style: none;
+    .task-list-item-checkbox {
+      position: absolute;
+      margin-left: -20px;
+    }
+  }
+}

styles/issueish-badge.less

@@ -0,0 +1,39 @@
+@import 'variables';
+
+// Issueish Badge
+// Shows the [Open], [Closed], [Merged] state
+
+.github-IssueishBadge {
+  @space: .4em;
+
+  display: inline-block;
+  padding: @space/1.5  @space;
+  font-size: .9em;
+  font-weight: 500;
+  line-height: 1;
+  text-transform: capitalize;
+  border-radius: @component-border-radius;
+  white-space: nowrap;
+
+  .icon::before {
+    font-size: inherit;
+    width: auto;
+    height: auto;
+    margin-right: @space/2;
+  }
+
+  &.open {
+    color: contrast(@gh-background-color-green, black, white, 50%);
+    background-color: @gh-background-color-green;
+  }
+
+  &.closed {
+    color: contrast(@gh-background-color-red, black, white, 50%);
+    background-color: @gh-background-color-red;
+  }
+
+  &.merged {
+    color: contrast(@gh-background-color-purple, black, white, 50%);
+    background-color: @gh-background-color-purple;
+  }
+}