Further improvements to "empty" views/modals

lib/views/git-tab-view.js

@@ -4,7 +4,6 @@ import cx from 'classnames';
 import {CompositeDisposable} from 'atom';
 
 import StagingView from './staging-view';
-import GitLogo from './git-logo';
 import CommitController from '../controllers/commit-controller';
 import RecentCommitsController from '../controllers/recent-commits-controller';
 import RefHolder from '../models/ref-holder';
@@ -89,11 +88,9 @@ export default class GitTabView extends React.Component {
     if (this.props.repository.isTooLarge()) {
       return (
         <div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
-          <div ref="noRepoMessage" className="github-Git no-repository">
-            <div className="large-icon">
-              <GitLogo />
-            </div>
-            <h3>Too many changes</h3>
+          <div ref="noRepoMessage" className="github-Git too-many-changes">
+            <div className="github-Git-LargeIcon icon icon-diff" />
+            <h1>Too many changes</h1>
             <div className="initialize-repo-description">
               The repository at <strong>{this.props.workingDirectoryPath}</strong> has too many changed files
               to display in Atom. Ensure that you have set up an appropriate <code>.gitignore</code> file.
@@ -105,11 +102,9 @@ export default class GitTabView extends React.Component {
       !isValidWorkdir(this.props.repository.getWorkingDirectoryPath())) {
       return (
         <div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
-          <div ref="noRepoMessage" className="github-Git no-repository">
-            <div className="large-icon">
-              <GitLogo />
-            </div>
-            <h3>Unsupported directory</h3>
+          <div ref="noRepoMessage" className="github-Git unsupported-directory">
+            <div className="github-Git-LargeIcon icon icon-alert" />
+            <h1>Unsupported directory</h1>
             <div className="initialize-repo-description">
               Atom does not support managing Git repositories in your home or root directories.
             </div>
@@ -129,9 +124,8 @@ export default class GitTabView extends React.Component {
       return (
         <div className="github-Git is-empty" tabIndex="-1" ref={this.props.refRoot.setter}>
           <div ref="noRepoMessage" className="github-Git no-repository">
-            <div className="large-icon">
-              <GitLogo />
-            </div>
+            <div className="github-Git-LargeIcon icon icon-repo" />
+            <h1>Create Repository</h1>
             <div className="initialize-repo-description">{message}</div>
             <button onClick={this.initializeRepo} disabled={inProgress} className="btn btn-primary">
               {inProgress ? 'Creating repository...' : 'Create repository'}

lib/views/github-login-view.js

@@ -10,7 +10,10 @@ export default class GithubLoginView extends React.Component {
   }
 
   static defaultProps = {
-    children: <p>Log in to GitHub to access PR information and more!</p>,
+    children:
+  <div className="initialize-repo-description">
+    <span>Log in to GitHub to access PR information and more!</span>
+  </div>,
     onLogin: token => {},
   }
 
@@ -44,8 +47,10 @@ export default class GithubLoginView extends React.Component {
   renderLogin() {
     return (
       <div className="github-GithubLoginView-Subview">
+        <div className="github-GitHub-LargeIcon icon icon-mark-github" />
+        <h1>Log in to GitHub</h1>
         {this.props.children}
-        <button onClick={this.handleLoginClick} className="btn btn-primary btn-lg icon icon-octoface">
+        <button onClick={this.handleLoginClick} className="btn btn-primary icon icon-octoface">
           Login
         </button>
       </div>
@@ -55,30 +60,34 @@ export default class GithubLoginView extends React.Component {
   renderTokenInput() {
     return (
       <form className="github-GithubLoginView-Subview" onSubmit={this.handleSubmitToken}>
-        <p>
-          Step 1: Visit <a href="https://github.atom.io/login">github.atom.io/login</a> to generate
-          an authentication token.
-        </p>
-        <p>
-          Step 2: Enter the token below:
-        </p>
+        <div className="github-GitHub-LargeIcon icon icon-mark-github" />
+        <h1>Enter Token</h1>
+        <ol>
+          <li>Visit <a href="https://github.atom.io/login">github.atom.io/login</a> to generate
+          an authentication token.</li>
+          <li>Enter the token below:</li>
+        </ol>
+
         <input
           type="text"
           className="input-text native-key-bindings"
           placeholder="Enter your token..."
           value={this.state.token}
           onChange={this.handleTokenChange}
         />
-        <div>
-          <button type="button" onClick={this.handleCancelTokenClick} className="btn icon inline-block-tight">
-            Cancel
-          </button>
-          <input
-            type="submit"
-            value="Login"
-            onClick={this.handleSubmitTokenClick} className="btn btn-primary icon icon-check inline-block-tight"
-          />
-        </div>
+        <ul>
+          <li>
+            <button type="button" onClick={this.handleCancelTokenClick} className="btn icon icon-remove-close">
+              Cancel
+            </button>
+          </li>
+          <li>
+            <button
+              type="submit" onClick={this.handleSubmitTokenClick} className="btn btn-primary icon icon-check">
+                Login
+            </button>
+          </li>
+        </ul>
       </form>
     );
   }

lib/views/github-tab-view.js

@@ -81,7 +81,8 @@ 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">
-        <div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
+        <div className="github-GitHub-LargeIcon icon icon-mark-github" />
+        <h1>No Remotes</h1>
         <div className="initialize-repo-description">
           <span>This repository does not have any remotes hosted at github.com.</span>
         </div>

lib/views/remote-selector-view.js

@@ -15,8 +15,8 @@ export default class RemoteSelectorView extends React.Component {
     // todo: ask Ash how to test this before merging.
     return (
       <div className="github-RemoteSelector">
-        <div className="github-GitHub-largeGitHubLogo icon icon-mark-github" />
-
+        <div className="github-GitHub-LargeIcon icon icon-mirror" />
+        <h1>Select a Remote</h1>
         <div className="initialize-repo-description">
           <span>This repository has multiple remotes hosted at github.com.
           Select a remote to see pull requests associated

styles/git-tab.less

@@ -17,31 +17,39 @@
   -webkit-user-select: none;
   cursor: default;
 
-  &.no-repository {
-    padding: @component-padding * 3;
-    text-align: center;
-  }
-
   &.is-loading {
     color: @text-color-subtle;
   }
 
-  &.no-repository {
+  &.no-repository,
+  &.too-many-changes,
+  &.unsupported-directory {
     display: flex;
     justify-content: center;
     font-size: 1.25em;
+    padding: @component-padding * 3;
+    text-align: center;
 
     > * {
       margin: @component-padding 0;
     }
 
-    .git-logo-path {
-      fill: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
+    h1 {
+      margin-bottom: @component-padding * 3;
     }
 
-    .btn.btn-primary {
+    button {
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
+
+  &-LargeIcon:before {
+    margin-right: 0;
+    margin-bottom: @component-padding * 5;
+    width: auto;
+    height: auto;
+    font-size: 8em;
+    color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
+  }
 }

styles/github-login-view.less

@@ -1,40 +1,47 @@
-.github-GithubLoginView-Container {
-  height: 100%;
-  display: flex;
-}
-
 .github-GithubLoginView {
-  height: 100%;
+  flex: 1;
   display: flex;
+  flex-direction: column;
+  font-size: 1.25em;
 
   .github-GithubLoginView-Subview {
     flex: 1;
     display: flex;
     flex-direction: column;
-    align-self: center;
-    align-items: center;
-    padding: 20px;
+    justify-content: center;
+    text-align: center;
+    padding: @component-padding * 3;
 
-    > button, > input {
-      margin: @component-padding;
+    > * {
+      margin: @component-padding 0;
     }
-  }
 
-  p {
-    text-align: center;
-    font-size: @font-size * 1.25;
-    margin: 0;
+    h1 {
+      margin-bottom: @component-padding * 3;
+    }
 
-    &:first-child {
-      margin-bottom: 20px;
+    button {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    a {
-      color: @text-color-info;
+    ol {
+      text-align: left;
+      padding: @component-padding 0;
+
+      a {
+        color: @text-color-info;
+      }
     }
-  }
 
-  input[type=text] {
-    width: 100%;
+    ul {
+      list-style: none;
+      padding-left: 0;
+
+      li:not(:last-child) {
+        margin-bottom: @component-padding;
+      }
+    }
   }
 }

styles/github-tab.less

@@ -33,27 +33,35 @@
     > * {
       margin: @component-padding 0;
     }
+
+    h1 {
+      margin-bottom: @component-padding * 3;
+    }
   }
 
   .github-RemoteSelector {
     ul {
       list-style: none;
       padding-left: 0;
+
+      li:not(:last-child) {
+        margin-bottom: @component-padding;
+      }
     }
 
     button {
       width: 100%;
-      margin-bottom: 10px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
 
-  &-largeGitHubLogo:before {
+  &-LargeIcon:before {
     margin-right: 0;
+    margin-bottom: @component-padding * 5;
     width: auto;
     height: auto;
-    font-size: 6em;
+    font-size: 8em;
     color: mix(@base-background-color, @text-color, 66%); // 2/3 of bg color
   }
 }