smaller storage name

Author: Rokt33r

browser/main/Detail/FolderSelect.js

@@ -213,7 +213,8 @@ class FolderSelect extends React.Component {
             <span styleName='search-optionList-item-name'
               style={{borderColor: option.folder.color}}
             >
-              {option.storage.name}/{option.folder.name}
+              {option.folder.name}
+              <span styleName='search-optionList-item-name-surfix'>in {option.storage.name}</span>
             </span>
           </div>
         )
@@ -258,7 +259,8 @@ class FolderSelect extends React.Component {
               <span styleName='idle-label-name'
                 style={{borderColor: currentOption.folder.color}}
               >
-                {currentOption.storage.name}/{currentOption.folder.name}
+                {currentOption.folder.name}
+                <span styleName='idle-label-name-surfix'>in {currentOption.storage.name}</span>
               </span>
             </div>
             <i styleName='idle-caret' className='fa fa-fw fa-caret-down'/>

browser/main/Detail/FolderSelect.styl

@@ -30,7 +30,10 @@
 .idle-label-name
   border-left solid 4px transparent
   padding 2px 5px
-
+.idle-label-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px
 .idle-caret
   absolute right top
   height 34px
@@ -79,3 +82,7 @@
 .search-optionList-item-name
   border-left solid 4px transparent
   padding 2px 5px
+.search-optionList-item-name-surfix
+  font-size 10px
+  color $ui-inactive-text-color
+  margin-left 5px

browser/main/NoteList/NoteList.styl

@@ -42,7 +42,11 @@
 .item-info-left-folder
   border-left 4px solid transparent
   padding 2px 5px
-
+  color $ui-text-color
+.item-info-left-folder-surfix
+  font-size 10px
+  margin-left 5px
+  color $ui-inactive-text-color
 .item-info-right
   float right
 

browser/main/NoteList/index.js

@@ -213,7 +213,7 @@ class NoteList extends React.Component {
     this.notes = notes
     // this.notes = this.getNotes()
 
-    let noteElements = notes
+    let noteList = notes
       .sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt))
       .map((note) => {
         let storage = _.find(storages, {key: note.storage})
@@ -244,7 +244,8 @@ class NoteList extends React.Component {
                 <span styleName='item-info-left-folder'
                   style={{borderColor: folder.color}}
                 >
-                  {storage.name}/{folder.name}
+                  {folder.name}
+                  <span styleName='item-info-left-folder-surfix'>in {storage.name}</span>
                 </span>
               </div>
 
@@ -277,7 +278,7 @@ class NoteList extends React.Component {
         onKeyDown={(e) => this.handleNoteListKeyDown(e)}
         style={this.props.style}
       >
-        {noteElements}
+        {noteList}
       </div>
     )
   }