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 className="callouts">
      <div className="callout">
        <Octicon symbol={} />
        <div>Create a new project and publish it to GitHub</div>
        <Button onClick={this.props.onCreate}>
          {__DARWIN__ ? 'Create New Repository' : 'Create new repository'}
      <div className="callout">
        <Octicon symbol={OcticonSymbol.deviceDesktop} />
          Add an existing project on your computer and publish it to
        <Button onClick={this.props.onAdd}>
            ? 'Add a Local Repository'
            : 'Add a local repository'}
      <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'}
  <p className="footer">
    Alternatively, you can drag and drop a local repository here to add

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

tags: GitHub Desktop - Electron - React