Visual tweaks to Github's Remote Selector & No Remote views

lib/views/github-tab-view.js

@@ -81,7 +81,10 @@ export default class GitHubTabView extends React.Component {
     // TODO: display a view that lets you create a repository on GitHub
     return (
       <div className="github-GitHub-noRemotes">
-        This repository does not have any remotes hosted at github.com.
+        <div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
+        <div className="initialize-repo-description">
+          <span>This repository does not have any remotes hosted at github.com.</span>
+        </div>
       </div>
     );
   }

lib/views/remote-selector-view.js

@@ -15,11 +15,14 @@ export default class RemoteSelectorView extends React.Component {
     // todo: ask Ash how to test this before merging.
     return (
       <div className="github-RemoteSelector">
-        <p>
-          This repository has multiple remotes hosted at github.com.
+        <div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
+
+        <div className="initialize-repo-description">
+          <span>This repository has multiple remotes hosted at github.com.
           Select a remote to see pull requests associated
-          with the <strong>{currentBranch.getName()}</strong> branch.
-        </p>
+          with the <strong>{currentBranch.getName()}</strong> branch:</span>
+        </div>
+
         <ul>
           {Array.from(remotes, remote => (
             <li key={remote.getName()}>

styles/github-tab.less

@@ -1,3 +1,5 @@
+@import "variables";
+
 .github-StubItem-github,
 .github-GitHub-root {
   flex: 1;
@@ -9,33 +11,49 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
+  -webkit-user-select: none;
+  cursor: default;
 
   &-content {
     flex: 1;
     display: flex;
     flex-direction: column;
   }
 
-  &-noRemotes {
-    margin: 10px;
-    font-size: @font-size * 1.25;
-  }
-
+  &-noRemotes,
   .github-RemoteSelector {
-    font-size: @font-size * 1.25;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 1.25em;
+    text-align: center;
+    padding: @component-padding * 3;
 
-    p {
-      text-align: center;
-      margin: 10px;
+    > * {
+      margin: @component-padding 0;
     }
+  }
 
+  .github-RemoteSelector {
     ul {
       list-style: none;
-      padding-left: 1em;
+      padding-left: 0;
     }
 
     button {
+      width: 100%;
       margin-bottom: 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
+
+  &-largeGitHubLogo:before {
+    margin-right: 0;
+    width: auto;
+    height: auto;
+    font-size: 6em;
+    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
+  }
 }