Merge pull request #690 from BoostIO/update-layout

Fix layout

Author: kazup01

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
@@ -92,11 +92,12 @@ $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 10px
+  font-size 11px
   margin-right 8px
   padding 0
   height 20px
@@ -109,14 +110,14 @@ $control-height = 30px
 
 .item-bottom-time
   color $ui-inactive-text-color
-  font-size 10px
+  font-size 11px
   padding-left 2px
   padding-bottom 2px
 
 .item-star
   position absolute
-  top 34px
-  left 5px
+  right 5px
+  bottom 0px
   width 34px
   height 34px
   color alpha($ui-favorite-star-button-color, 60%)

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

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

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>

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

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>

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

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

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'

browser/main/TopBar/TopBar.styl

@@ -19,26 +19,25 @@ $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
-  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%
     outline none
     border none
+    color $ui-text-color
+    font-size 16px
+    padding-bottom 2px
     background-color $ui-noteList-backgroundColor
 
 .control-search-optionList
@@ -92,9 +91,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
@@ -132,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