Fix layout

BoostIO · kazup01 · Jul 9, 2017 · Jul 7, 2017 · Jul 8, 2017 · Jul 8, 2017
commit b78d9534aae7b8e784b26f9870d08fc9b28fff61
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>