diff --git a/browser/SnippetTab.js b/browser/SnippetTab.js
new file mode 100644
index 00000000..2b4f3ad6
--- /dev/null
+++ b/browser/SnippetTab.js
@@ -0,0 +1,131 @@
+import React from 'react'
+import CSSModules from 'browser/lib/CSSModules'
+import styles from './SnippetTab.styl'
+import context from 'browser/lib/context'
+
+class SnippetTab extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ isRenaming: false,
+ name: props.snippet.name
+ }
+ }
+
+ componentWillUpdate (nextProps) {
+ if (nextProps.snippet.name !== this.props.snippet.name) {
+ this.setState({
+ name: nextProps.snippet.name
+ })
+ }
+ }
+
+ handleClick (e) {
+ this.props.onClick(e)
+ }
+
+ handleContextMenu (e) {
+ context.popup([
+ {
+ label: 'Rename',
+ click: (e) => this.handleRenameClick(e)
+ }
+ ])
+ }
+
+ handleRenameClick (e) {
+ this.startRenaming()
+ }
+
+ handleNameInputBlur (e) {
+ this.handleRename()
+ }
+
+ handleNameInputChange (e) {
+ this.setState({
+ name: e.target.value
+ })
+ }
+
+ handleNameInputKeyDown (e) {
+ switch (e.keyCode) {
+ case 13:
+ this.handleRename()
+ break
+ case 27:
+ this.setState({
+ name: this.props.snippet.name,
+ isRenaming: false
+ })
+ break
+ }
+ }
+
+ handleRename () {
+ this.setState({
+ isRenaming: false
+ }, () => {
+ if (this.props.snippet.name !== this.state.name) {
+ this.props.onRename(this.state.name)
+ }
+ })
+ }
+
+ handleDeleteButtonClick (e) {
+ this.props.onDelete(e)
+ }
+
+ startRenaming () {
+ this.setState({
+ isRenaming: true
+ }, () => {
+ this.refs.name.focus()
+ this.refs.name.select()
+ })
+ }
+
+ render () {
+ let { isActive, snippet, isDeletable } = this.props
+ return (
+
+ {!this.state.isRenaming
+ ?
+ : this.handleNameInputChange(e)}
+ onBlur={(e) => this.handleNameInputBlur(e)}
+ onKeyDown={(e) => this.handleNameInputKeyDown(e)}
+ />
+ }
+ {isDeletable &&
+
+ }
+
+ )
+ }
+}
+
+SnippetTab.propTypes = {
+}
+
+export default CSSModules(SnippetTab, styles)
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index 65821962..0320b512 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -238,7 +238,15 @@ class MarkdownNoteDetail extends React.Component {
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 73062d8a..eeffd78a 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -60,9 +60,10 @@ $info-margin-under-border = 27px
border-radius 17px
font-size 14px
margin 13px 7px
- padding 0
+ padding-top 7px
border none
color $ui-button-color
+ fill $ui-button-color
background-color transparent
&:hover
opacity 1
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index 30760589..e5d1908e 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -548,7 +548,15 @@ class SnippetNoteDetail extends React.Component {