From 856979b455114e092a747c38922cea9c99776c11 Mon Sep 17 00:00:00 2001
From: sota1235 <sota1235@gmail.com>
Date: Thu, 29 Dec 2016 18:46:11 +0900
Subject: [PATCH] modify: add border line on NoteList component

---
 browser/main/NoteList/NoteItem.js   | 36 +++++++++++++++--------------
 browser/main/NoteList/NoteItem.styl |  9 +++++++-
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/browser/main/NoteList/NoteItem.js b/browser/main/NoteList/NoteItem.js
index 0293e34a..df1bded5 100644
--- a/browser/main/NoteList/NoteItem.js
+++ b/browser/main/NoteList/NoteItem.js
@@ -51,27 +51,29 @@ const NoteItem = ({ isActive, note, dateDisplay, handleNoteClick, handleNoteCont
     onClick={e => handleNoteClick(e, `${note.storage}-${note.key}`)}
     onContextMenu={e => handleNoteContextMenu(e, `${note.storage}-${note.key}`)}
   >
-    <div styleName='item-bottom-time'>{dateDisplay}</div>
+    <div styleName='item-wrapper'>
+      <div styleName='item-bottom-time'>{dateDisplay}</div>
 
-    <div styleName='item-title'>
-      {note.title.trim().length > 0
-        ? note.title
-        : <span styleName='item-title-empty'>Empty</span>
-      }
-    </div>
-
-    <div styleName='item-bottom'>
-      <div styleName='item-bottom-tagList'>
-        {note.tags.length > 0
-          ? TagElementList(note.tags)
-          : ''
+      <div styleName='item-title'>
+        {note.title.trim().length > 0
+          ? note.title
+          : <span styleName='item-title-empty'>Empty</span>
         }
       </div>
-    </div>
 
-    {note.isStarred ?
-      <i styleName='item-star' className='fa fa-star' /> : ''
-    }
+      <div styleName='item-bottom'>
+        <div styleName='item-bottom-tagList'>
+          {note.tags.length > 0
+            ? TagElementList(note.tags)
+            : ''
+          }
+        </div>
+      </div>
+
+      {note.isStarred ?
+        <i styleName='item-star' className='fa fa-star' /> : ''
+      }
+    </div>
   </div>
 )
 
diff --git a/browser/main/NoteList/NoteItem.styl b/browser/main/NoteList/NoteItem.styl
index fdfe18b9..a07670de 100644
--- a/browser/main/NoteList/NoteItem.styl
+++ b/browser/main/NoteList/NoteItem.styl
@@ -7,7 +7,7 @@ $control-height = 30px
 
 .item
   position relative
-  padding 20px 25px
+  padding 0 25px
   user-select none
   cursor pointer
   background-color $ui-noteList-backgroundColor
@@ -26,6 +26,10 @@ $control-height = 30px
       background-color transparent
       color white
 
+.item-wrapper
+  padding 20px 0
+  border-bottom $ui-border
+
 .item--active
   @extend .item
   background-color $ui-active-color
@@ -115,6 +119,9 @@ body[data-theme="dark"]
     &:hover
       background-color alpha($ui-active-color, 20%)
 
+  .item-wrapper
+    border-color $ui-dark-borderColor
+
   .item--active
     @extend .item
     border-color $ui-dark-borderColor