modify: move star on left side

browser/main/Detail/MarkdownNoteDetail.js

@@ -214,6 +214,10 @@ class MarkdownNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -221,10 +225,6 @@ class MarkdownNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >

browser/main/Detail/NoteDetailInfo.styl

@@ -9,7 +9,23 @@ $info-height = 60px
 .info-left
   float left
   padding 0 5px
-  margin 18px 2px
+  margin 0px 2px
+
+.info-left-button
+  width 34px
+  height 34px
+  border-radius 17px
+  navButtonColor()
+  border $ui-border
+  font-size 14px
+  margin 13px 2px
+  padding 0
+  &:active
+    border-color $ui-button--focus-borderColor
+  &:hover .info-right-button-tooltip
+    opacity 1
+  &:focus
+    border-color $ui-button--focus-borderColor
 
 .info-right
   float right

browser/main/Detail/SnippetNoteDetail.js

@@ -522,6 +522,10 @@ class SnippetNoteDetail extends React.Component {
       >
         <div styleName='info'>
           <div styleName='info-left'>
+            <StarButton styleName='info-left-button'
+              onClick={(e) => this.handleStarButtonClick(e)}
+              isActive={note.isStarred}
+            />
             <TagSelect
               ref='tags'
               value={this.state.note.tags}
@@ -529,10 +533,6 @@ class SnippetNoteDetail extends React.Component {
             />
           </div>
           <div styleName='info-right'>
-            <StarButton styleName='info-right-button'
-              onClick={(e) => this.handleStarButtonClick(e)}
-              isActive={note.isStarred}
-            />
             <button styleName='info-right-button'
               onClick={(e) => this.handleContextButtonClick(e)}
             >

browser/main/Detail/StarButton.js

@@ -53,7 +53,6 @@ class StarButton extends React.Component {
             : 'fa fa-star-o'
           }
         />
-        <span styleName='tooltip'>Star Note</span>
       </button>
     )
   }

browser/main/Detail/StarButton.styl

@@ -14,14 +14,6 @@
     color $brand-color !important
   .icon
     transform rotate(-72deg)
+
 .icon
   transition transform 0.15s
-
-.tooltip
-  tooltip()
-  position fixed
-  top 45px
-  right 65px
-  padding 5px
-  opacity 0
-  border-radius 2px

browser/main/Detail/TagSelect.styl

@@ -1,4 +1,5 @@
 .root
+  display: inline
   position relative
   user-select none