Code Study: GitHub Desktop / ui / blank-slate.tsx

BlankSlateView refers to the section in red in the following screenshot. The app displays Blank Slate when no repo is discovered.

Blank Slate

<UiView id="blank-slate">
  <div className="blankslate-image" style={ImageStyle} />
  <div className="content">
    <div className="title">
      {__DARWIN__ ? 'No Repositories Found' : 'No repositories found'}
    </div>
    <div className="callouts">
      <div className="callout">
        <Octicon symbol={OcticonSymbol.plus} />
        <div>Create a new project and publish it to GitHub</div>
        <Button onClick={this.props.onCreate}>
          {__DARWIN__ ? 'Create New Repository' : 'Create new repository'}
        </Button>
      </div>
      <div className="callout">
        <Octicon symbol={OcticonSymbol.deviceDesktop} />
        <div>
          Add an existing project on your computer and publish it to
          GitHub
        </div>
        <Button onClick={this.props.onAdd}>
          {__DARWIN__
            ? 'Add a Local Repository'
            : 'Add a local repository'}
        </Button>
      </div>
      <div className="callout">
        <Octicon symbol={OcticonSymbol.repoClone} />
        <div>Clone an existing project from GitHub to your computer</div>
        <Button onClick={this.props.onClone}>
          {__DARWIN__ ? 'Clone a Repository' : 'Clone a repository'}
        </Button>
      </div>
    </div>
  </div>
  <p className="footer">
    Alternatively, you can drag and drop a local repository here to add
    it.
  </p>
</UiView>

Here is how app.tsx renders this BlankSlateView when no repository is discovered.

<BlankSlateView
  onCreate={this.showCreateRepository}
  onClone={this.showCloneRepo}
  onAdd={this.showAddLocalRepo}
/>
tags: GitHub Desktop - Electron - React