Fix note detail layout

browser/main/Detail/DetailVars.styl

@@ -3,7 +3,7 @@
  */
 
 // Margin on the left side and the right side for NoteDetail component.
-$note-detail-left-margin = 25px
-$note-detail-right-margin = 25px
+$note-detail-left-margin = 50px
+$note-detail-right-margin = 80px
 
 $note-detail-box-shadow = 2px 0 15px -8px #b1b1b1 inset

browser/main/Detail/InfoButton.js

@@ -8,7 +8,7 @@ const InfoButton = ({
   <button styleName='control-infoButton'
     onClick={onClick}
   >
-    <i className='fa fa-info infoButton' styleName='info-button' />
+    <i className='fa fa-info-circle infoButton' styleName='info-button' />
   </button>
 )
 

browser/main/Detail/InfoButton.styl

@@ -1,5 +1,5 @@
 .control-infoButton
-  float right
+  top 10px
   topBarButtonLight()
 
 .control-infoPanel

browser/main/Detail/MarkdownNoteDetail.js

@@ -302,10 +302,6 @@ class MarkdownNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -325,6 +321,15 @@ class MarkdownNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
+        <InfoButton
+          onClick={(e) => this.handleInfoButtonClick(e)}
+        />
+
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
         {(() => {
           const faClassName = `fa ${this.getToggleLockButton()}`
           const lockButtonComponent =
@@ -341,15 +346,14 @@ class MarkdownNoteDetail extends React.Component {
             this.state.isLockButtonShown ? lockButtonComponent : ''
           )
         })()}
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
+                  onMouseDown={(e) => this.handleFullScreenButton(e)}>
           <i className='fa fa-window-maximize' styleName='fullScreen-button' />
         </button>
-        <InfoButton
-          onClick={(e) => this.handleInfoButtonClick(e)}
-        />
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
+
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/MarkdownNoteDetail.styl

@@ -11,6 +11,7 @@
   padding-bottom 3px
 
 .control-lockButton
+  top 120px
   topBarButtonLight()
 
 .control-lockButton-tooltip
@@ -26,8 +27,7 @@
   transition 0.1s
 
 .control-fullScreenButton
-  float right
-  padding 0 0 2px 0
+  top 80px
   topBarButtonLight()
 
 .body

browser/main/Detail/NoteDetailInfo.styl

@@ -1,6 +1,6 @@
 @import('DetailVars')
 
-$info-height = 60px
+$info-height = 40px
 $info-margin-under-border = 27px
 
 .info
@@ -15,6 +15,7 @@ $info-margin-under-border = 27px
   float left
   padding 0 5px
   margin 0px 2px
+
 .info-left-top
   display inline-block
   height $info-height
@@ -28,6 +29,7 @@ $info-margin-under-border = 27px
   align-items center
   justify-content center
   border-radius 3px
+
 .info-left-button
   width 34px
   height 34px
@@ -48,7 +50,7 @@ $info-margin-under-border = 27px
 
 .info-right
   position absolute
-  right 0
+  right -35px
   top 0
   background $ui-noteDetail-backgroundColor
   bottom 1px

browser/main/Detail/SnippetNoteDetail.js

@@ -583,10 +583,6 @@ class SnippetNoteDetail extends React.Component {
 
     const detailTopBar = <div styleName='info'>
       <div styleName='info-left'>
-        <StarButton styleName='info-left-button'
-          onClick={(e) => this.handleStarButtonClick(e)}
-          isActive={note.isStarred}
-        />
         <div styleName='info-left-top'>
           <FolderSelect styleName='info-left-top-folderSelect'
             value={this.state.note.storage + '-' + this.state.note.folder}
@@ -603,15 +599,21 @@ class SnippetNoteDetail extends React.Component {
         />
       </div>
       <div styleName='info-right'>
-        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
-        <button styleName='control-fullScreenButton'
-          onMouseDown={(e) => this.handleFullScreenButton(e)}
-        >
-          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
-        </button>
         <InfoButton
           onClick={(e) => this.handleInfoButtonClick(e)}
         />
+  
+        <StarButton
+          onClick={(e) => this.handleStarButtonClick(e)}
+          isActive={note.isStarred}
+        />
+
+        <button styleName='control-fullScreenButton'
+          onMouseDown={(e) => this.handleFullScreenButton(e)}>
+          <i className='fa fa-window-maximize' styleName='fullScreen-button' />
+        </button>
+
+        <TrashButton onClick={(e) => this.handleTrashButtonClick(e)} />
         <InfoPanel
           storageName={currentOption.storage.name}
           folderName={currentOption.folder.name}

browser/main/Detail/SnippetNoteDetail.styl

@@ -66,8 +66,7 @@
       color white
 
 .control-fullScreenButton
-  float right
-  padding 0 0 2px 0
+  top 80px
   topBarButtonLight()
 
 body[data-theme="white"]

browser/main/Detail/StarButton.styl

@@ -1,28 +1,9 @@
 .root
-  left 7px
-  top 0
-  padding 0
-  color alpha($ui-favorite-star-button-color, 60%)
-  &:hover
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
-  &:active
-    transition 0.15s
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-    color $ui-favorite-star-button-color
+  top 45px
+  topBarButtonLight()
 
 .root--active
   @extend .root
-  color $ui-favorite-star-button-color
-  &:hover
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
-  &:active
-    transition 0.15s
-    color $ui-favorite-star-button-color
-    background-color alpha($ui-button--active-backgroundColor, 40%)
 
 .icon
   transition transform 0.15s

browser/main/Detail/TrashButton.styl

@@ -1,5 +1,5 @@
 .control-trashButton
-  float right
+  top 120px
   topBarButtonLight()
 
 .trashButton

browser/styles/index.styl

@@ -180,19 +180,20 @@ modal()
   border-radius $modal-border-radius
 
 topBarButtonLight()
+  position absolute
   width 34px
   height 34px
   border-radius 17px
   font-size 14px
-  margin 15px 7px
   border none
-  color $ui-button-color
+  color alpha($ui-button-color, 0.3)
   fill $ui-button-color
   background-color transparent
   &:active
     border-color $ui-button--active-backgroundColor
   &:hover
-    background-color alpha($ui-button--hover-backgroundColor, 60%)
+    transition 0.4s
+    color $ui-button-color
     .control-lockButton-tooltip
       opacity 1