From b78d9534aae7b8e784b26f9870d08fc9b28fff61 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 8 Jul 2017 02:18:33 +0900
Subject: [PATCH 1/6] Fix layout

---
 browser/components/NoteItem.styl          |  6 ++--
 browser/components/NoteItemSimple.styl    |  4 +--
 browser/main/Detail/FolderSelect.styl     |  2 +-
 browser/main/Detail/MarkdownNoteDetail.js |  6 ++--
 browser/main/Detail/NoteDetailInfo.styl   |  3 +-
 browser/main/Detail/SnippetNoteDetail.js  |  2 +-
 browser/main/Detail/TagSelect.styl        |  6 ++--
 browser/main/NoteList/NoteList.styl       |  7 +++--
 browser/main/NoteList/index.js            | 34 ++++++++++++-----------
 browser/main/TopBar/TopBar.styl           |  8 ++++--
 browser/main/TopBar/index.js              |  4 +--
 11 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index 63ab6cf80..fc8f56a6d 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -66,7 +66,7 @@ $control-height = 30px
   color $ui-inactive-text-color
 
 .item-title
-  font-size 13px
+  font-size 14px
   position relative
   top -12px
   left 20px
@@ -96,7 +96,7 @@ $control-height = 30px
   padding-left 2px
 
 .item-bottom-tagList-item
-  font-size 10px
+  font-size 11px
   margin-right 8px
   padding 0
   height 20px
@@ -109,7 +109,7 @@ $control-height = 30px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 10px
+  font-size 11px
   padding-left 2px
   padding-bottom 2px
 
diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl
index 3210bbad7..155043847 100644
--- a/browser/components/NoteItemSimple.styl
+++ b/browser/components/NoteItemSimple.styl
@@ -7,7 +7,7 @@ $control-height = 30px
 
 .item-simple
   position relative
-  padding 0 25px
+  padding 0 20px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
@@ -40,7 +40,7 @@ $control-height = 30px
     background-color $ui-button--active-backgroundColor
 
 .item-simple-title
-  font-size 12px
+  font-size 13px
   height 40px
   box-sizing border-box
   line-height 24px
diff --git a/browser/main/Detail/FolderSelect.styl b/browser/main/Detail/FolderSelect.styl
index 567dd16d9..81c5c41a5 100644
--- a/browser/main/Detail/FolderSelect.styl
+++ b/browser/main/Detail/FolderSelect.styl
@@ -1,7 +1,7 @@
 .root
   position relative
   border solid 1px transparent
-  line-height 34px
+  line-height 26px
   vertical-align middle
   border-radius 2px
   transition 0.15s
diff --git a/browser/main/Detail/MarkdownNoteDetail.js b/browser/main/Detail/MarkdownNoteDetail.js
index c8d9f8f46..375af1f50 100644
--- a/browser/main/Detail/MarkdownNoteDetail.js
+++ b/browser/main/Detail/MarkdownNoteDetail.js
@@ -209,7 +209,7 @@ class MarkdownNoteDetail extends React.Component {
   }
 
   getToggleLockButton () {
-    return this.state.isLocked ? 'fa-lock' : 'fa-unlock-alt'
+    return this.state.isLocked ? 'fa-lock' : 'fa-unlock'
   }
 
   handleDeleteKeyDown (e) {
@@ -272,7 +272,7 @@ class MarkdownNoteDetail extends React.Component {
                 >
                   <i className={faClassName} styleName='lock-button' />
                   <span styleName='control-lockButton-tooltip'>
-                    {this.state.isLocked ? 'Unlock' : 'Lock'}
+                    {this.state.isLocked ? 'Lock' : 'Unlock'}
                   </span>
                 </button>
               return (
@@ -285,7 +285,7 @@ class MarkdownNoteDetail extends React.Component {
             <button styleName='control-fullScreenButton'
               onMouseDown={(e) => this.handleFullScreenButton(e)}
             >
-              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+              <i className='fa fa-expand' styleName='fullScreen-button' />
             </button>
           </div>
         </div>
diff --git a/browser/main/Detail/NoteDetailInfo.styl b/browser/main/Detail/NoteDetailInfo.styl
index 97adfe5ce..62d0d79fe 100644
--- a/browser/main/Detail/NoteDetailInfo.styl
+++ b/browser/main/Detail/NoteDetailInfo.styl
@@ -25,7 +25,7 @@ $info-margin-under-border = 27px
   display inline-block
   padding 0 3px
   height 34px
-  line-height 34px
+  line-height 26px
   vertical-align middle
   border-radius 3px
 
@@ -35,6 +35,7 @@ $info-margin-under-border = 27px
   navButtonColor()
   color $ui-favorite-star-button-color
   font-size 14px
+  line-height 0
   margin 13px 2px
   padding 0
   border-radius 17px
diff --git a/browser/main/Detail/SnippetNoteDetail.js b/browser/main/Detail/SnippetNoteDetail.js
index ea3d60384..ac8572501 100644
--- a/browser/main/Detail/SnippetNoteDetail.js
+++ b/browser/main/Detail/SnippetNoteDetail.js
@@ -525,7 +525,7 @@ class SnippetNoteDetail extends React.Component {
             <button styleName='control-fullScreenButton'
               onMouseDown={(e) => this.handleFullScreenButton(e)}
             >
-              <i className='fa fa-arrows-alt' styleName='fullScreen-button' />
+              <i className='fa fa-expand' styleName='fullScreen-button' />
             </button>
           </div>
         </div>
diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl
index beb800195..e7974d141 100644
--- a/browser/main/Detail/TagSelect.styl
+++ b/browser/main/Detail/TagSelect.styl
@@ -2,6 +2,7 @@
   display inline-block
   top 19px
   user-select none
+  height 26px
   vertical-align middle
   width 300px
   overflow-x scroll
@@ -14,7 +15,6 @@
   display inline-block
   margin 1px 3px
   padding 0
-  vertical-align middle
   height 20px
   background-color alpha($ui-tag-backgroundColor, 10%)
   border-radius 3px
@@ -49,9 +49,9 @@
 
 .newTag
   display inline-block
-  margin 0 2px
+  margin 2px 0 15px 2px
   vertical-align middle
-  height 24px
+  height 18px
   box-sizing borde-box
   border none
   background-color transparent
diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl
index cc2be3d3a..892ad3d86 100644
--- a/browser/main/NoteList/NoteList.styl
+++ b/browser/main/NoteList/NoteList.styl
@@ -17,7 +17,7 @@ $control-height = 30px
 
 .control-sortBy
   flex 1
-  padding-left 25px
+  padding-left 22px
 
 .control-sortBy-select
   appearance: none;
@@ -28,11 +28,14 @@ $control-height = 30px
   background-color transparent
   outline none
   cursor pointer
-  font-size 10px
+  font-size 11px
   &:hover
     transition 0.2s
     color $ui-text-color
 
+.control-button-area
+  margin-right 12px
+
 .control-button
   width 25px
   padding 0
diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 59da9c9b6..412e7699c 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -439,22 +439,24 @@ class NoteList extends React.Component {
               <option value='ALPHABETICAL'>Alphabetical</option>
             </select>
           </div>
-          <button styleName={config.listStyle === 'DEFAULT'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
-          >
-            <i className='fa fa-th-large' />
-          </button>
-          <button styleName={config.listStyle === 'SMALL'
-              ? 'control-button--active'
-              : 'control-button'
-            }
-            onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
-          >
-            <i className='fa fa-list-ul' />
-          </button>
+          <div styleName="control-button-area">
+            <button styleName={config.listStyle === 'DEFAULT'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'DEFAULT')}
+            >
+              <i className='fa fa-th-large' />
+            </button>
+            <button styleName={config.listStyle === 'SMALL'
+                ? 'control-button--active'
+                : 'control-button'
+              }
+              onClick={(e) => this.handleListStyleButtonClick(e, 'SMALL')}
+            >
+              <i className='fa fa-list-ul' />
+            </button>
+          </div>
         </div>
         <div styleName='list'
           ref='list'
diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index 9ccdf9366..a34780f5f 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -26,6 +26,7 @@ $control-height = 34px
 .control-search-icon
   absolute top bottom left
   line-height 32px
+  padding-left 2px
   width 35px
   color $ui-inactive-text-color
   background-color $ui-noteList-backgroundColor
@@ -39,6 +40,9 @@ $control-height = 34px
     height 100%
     outline none
     border none
+    color $ui-text-color
+    font-size 16px
+    padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
@@ -92,9 +96,7 @@ $control-height = 34px
   width 32px
   height $control-height - 2
   navButtonColor()
-  border $ui-border
-  border-radius 32px
-  font-size 14px
+  font-size 16px
   line-height 28px
   padding 0
   &:active
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index fd3edbbfc..f79f46441 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -216,7 +216,7 @@ class TopBar extends React.Component {
                 ref='searchInput'
                 value={this.state.search}
                 onChange={(e) => this.handleSearchChange(e)}
-                placeholder='Search'
+                placeholder=''
                 type='text'
                 className='searchInput'
               />
@@ -232,7 +232,7 @@ class TopBar extends React.Component {
           </div>
           <button styleName='control-newPostButton'
             onClick={(e) => this.handleNewPostButtonClick(e)}>
-            <i className='fa fa-plus' />
+            <i className='fa fa-pencil-square-o' />
             <span styleName='control-newPostButton-tooltip'>
               Make a Note {OSX ? '⌘' : '^'} + n
             </span>

From f46a967b6e4f6d020af18d3d74608aaf8b689b23 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 8 Jul 2017 12:31:21 +0900
Subject: [PATCH 2/6] Fix an error

---
 browser/main/NoteList/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js
index 412e7699c..04f506dea 100644
--- a/browser/main/NoteList/index.js
+++ b/browser/main/NoteList/index.js
@@ -439,7 +439,7 @@ class NoteList extends React.Component {
               <option value='ALPHABETICAL'>Alphabetical</option>
             </select>
           </div>
-          <div styleName="control-button-area">
+          <div styleName='control-button-area'>
             <button styleName={config.listStyle === 'DEFAULT'
                 ? 'control-button--active'
                 : 'control-button'

From 5047bc94ebd719f0930e558b9be71b3ae0d2dc30 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 8 Jul 2017 15:58:40 +0900
Subject: [PATCH 3/6] Fix search area layout

---
 browser/main/TopBar/TopBar.styl | 14 +++++---------
 browser/main/TopBar/index.js    |  3 +--
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl
index a34780f5f..0a88d32ed 100644
--- a/browser/main/TopBar/TopBar.styl
+++ b/browser/main/TopBar/TopBar.styl
@@ -19,22 +19,17 @@ $control-height = 34px
 
 .control-search
   height 32px
+  width 1px
   flex 1
   background-color white
   position relative
 
-.control-search-icon
-  absolute top bottom left
-  line-height 32px
-  padding-left 2px
-  width 35px
-  color $ui-inactive-text-color
-  background-color $ui-noteList-backgroundColor
-
 .control-search-input
   display block
   absolute top bottom right
-  left 30px
+  width 100%
+  padding-left 12px
+  background-color $ui-noteList-backgroundColor
   input
     width 100%
     height 100%
@@ -134,6 +129,7 @@ body[data-theme="dark"]
     background-color $ui-dark-noteList-backgroundColor
 
   .control-search-input
+    background-color $ui-dark-noteList-backgroundColor
     input
       background-color $ui-dark-noteList-backgroundColor
       color $ui-dark-text-color
diff --git a/browser/main/TopBar/index.js b/browser/main/TopBar/index.js
index f79f46441..66478ecf0 100644
--- a/browser/main/TopBar/index.js
+++ b/browser/main/TopBar/index.js
@@ -205,7 +205,6 @@ class TopBar extends React.Component {
       >
         <div styleName='control'>
           <div styleName='control-search'>
-            <i styleName='control-search-icon' className='fa fa-search fa-fw' />
             <div styleName='control-search-input'
               onFocus={(e) => this.handleSearchFocus(e)}
               onBlur={(e) => this.handleSearchBlur(e)}
@@ -216,7 +215,7 @@ class TopBar extends React.Component {
                 ref='searchInput'
                 value={this.state.search}
                 onChange={(e) => this.handleSearchChange(e)}
-                placeholder=''
+                placeholder='Search'
                 type='text'
                 className='searchInput'
               />

From 8951dbf4ede85e78a242fcaa65792dbf2048ddef Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sat, 8 Jul 2017 16:05:45 +0900
Subject: [PATCH 4/6] Fix star position at NoteList

---
 browser/components/NoteItem.styl | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index fc8f56a6d..ba376f31b 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -115,8 +115,8 @@ $control-height = 30px
 
 .item-star
   position absolute
-  top 34px
-  left 5px
+  right 5px
+  bottom -2px
   width 34px
   height 34px
   color alpha($ui-favorite-star-button-color, 60%)

From 4b58054100dcdbdfe8cdff3dcb166ca63cba925a Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sun, 9 Jul 2017 12:46:46 +0900
Subject: [PATCH 5/6] Fix tag area layout at NoteItem

---
 browser/components/NoteItem.styl | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index ba376f31b..d2ebd1a12 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -92,8 +92,9 @@ $control-height = 30px
   flex 1
   overflow ellipsis
   line-height 20px
-  padding-top 2px
+  padding-top 7px
   padding-left 2px
+  margin-right 27px
 
 .item-bottom-tagList-item
   font-size 11px

From 4b9640e5a385a3e43da8161c1126cf59257e3377 Mon Sep 17 00:00:00 2001
From: Kazu Yokomizo <kaz@maisin.co>
Date: Sun, 9 Jul 2017 12:56:02 +0900
Subject: [PATCH 6/6] Fix star position at NoteList

---
 browser/components/NoteItem.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl
index d2ebd1a12..12f8b193e 100644
--- a/browser/components/NoteItem.styl
+++ b/browser/components/NoteItem.styl
@@ -117,7 +117,7 @@ $control-height = 30px
 .item-star
   position absolute
   right 5px
-  bottom -2px
+  bottom 0px
   width 34px
   height 34px
   color alpha($ui-favorite-star-button-color, 60%)