Use the new unlock icon in the button

Author: smashwilson

lib/views/git-tab-header-view.js

@@ -22,6 +22,11 @@ export default class GitTabHeaderView extends React.Component {
   }
 
   render() {
+    const lockIcon = this.props.contextLocked ? 'lock' : 'unlock';
+    const lockToggleTitle = this.props.contextLocked ?
+      'Change repository with the dropdown' :
+      'Follow the active pane item';
+
     return (
       <header className="github-Project">
         {this.renderCommitter()}
@@ -33,8 +38,9 @@ export default class GitTabHeaderView extends React.Component {
         </select>
         <button className="github-Project-lock btn btn-small"
           onClick={this.props.handleLockToggle}
-          disabled={this.props.changingLock}>
-          <Octicon icon={this.props.contextLocked ? 'lock' : 'globe'} />
+          disabled={this.props.changingLock}
+          title={lockToggleTitle}>
+          <Octicon icon={lockIcon} />
         </button>
       </header>
     );

lib/views/github-tab-header-view.js

@@ -20,6 +20,11 @@ export default class GithubTabHeaderView extends React.Component {
   }
 
   render() {
+    const lockIcon = this.props.contextLocked ? 'lock' : 'unlock';
+    const lockToggleTitle = this.props.contextLocked ?
+      'Change repository with the dropdown' :
+      'Follow the active pane item';
+
     return (
       <header className="github-Project">
         {this.renderUser()}
@@ -29,11 +34,11 @@ export default class GithubTabHeaderView extends React.Component {
           onChange={this.props.handleWorkDirChange}>
           {this.renderWorkDirs()}
         </select>
-        <button
-          className="github-Project-lock btn btn-small"
+        <button className="github-Project-lock btn btn-small"
+          onClick={this.props.handleLockToggle}
           disabled={this.props.changingLock}
-          onClick={this.props.handleLockToggle}>
-          <Octicon icon={this.props.contextLocked ? 'lock' : 'globe'} />
+          title={lockToggleTitle}>
+          <Octicon icon={lockIcon} />
         </button>
       </header>
     );

styles/project.less

@@ -18,8 +18,38 @@
   }
 
   &-lock.btn {
+    width: 40px;
+    height: 20px;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: baseline;
+
     border: none;
     background-color: transparent;
     background-image: none;
+
+    &:active, &:hover {
+      background-color: transparent;
+      background-image: none;
+    }
+  }
+
+  .icon {
+    padding: 0;
+    margin: 0;
+    line-height: 1em;
+    fill: @text-color;
+
+    &:hover {
+      fill: @text-color-highlight;
+    }
+
+    &.icon-unlock {
+      width: 21px;
+      height: 17px;
+      padding-left: 1px;
+    }
   }
 }

test/views/git-tab-header-view.test.js

@@ -69,7 +69,7 @@ describe('GitTabHeaderView', function() {
     it('renders unlocked when the lock is disengaged', function() {
       const wrapper = build({contextLocked: false});
 
-      assert.isTrue(wrapper.exists('Octicon[icon="globe"]'));
+      assert.isTrue(wrapper.exists('Octicon[icon="unlock"]'));
     });
 
     it('calls handleLockToggle when the lock is clicked', function() {

test/views/github-tab-header-view.test.js

@@ -65,7 +65,7 @@ describe('GithubTabHeaderView', function() {
     it('renders unlocked when the lock is disengaged', function() {
       const wrapper = build({contextLocked: false});
 
-      assert.isTrue(wrapper.exists('Octicon[icon="globe"]'));
+      assert.isTrue(wrapper.exists('Octicon[icon="unlock"]'));
     });
 
     it('calls handleLockToggle when the lock is clicked', function() {