Added new icons

brave · Feb 3, 2017 · e8d7e2e · e8d7e2e
1 parent b244e67
commit e8d7e2e
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 31 deletions.
diff --git a/img/toolbar/add_BM_folder_btn.svg b/img/toolbar/add_BM_folder_btn.svg
diff --git a/img/toolbar/add_bookmark_btn.svg b/img/toolbar/add_bookmark_btn.svg
diff --git a/img/toolbar/bookmarks_export.svg b/img/toolbar/bookmarks_export.svg
diff --git a/img/toolbar/bookmarks_import.svg b/img/toolbar/bookmarks_import.svg
diff --git a/js/about/bookmarks.js b/js/about/bookmarks.js
@@ -451,6 +451,8 @@ class AboutBookmarks extends React.Component {
         <div data-l10n-id='bookmarkManager' className='sectionTitle' />
         <div className='headerActions'>
           <div className='searchWrapper'>
+            <span data-l10n-id='importBrowserData' className='importBrowserData' onClick={this.importBrowserData} />
+            <span data-l10n-id='exportBookmarks' className='exportBookmarks' onClick={this.exportBookmarks} />
             <input type='text' className='searchInput' ref='bookmarkSearch' id='bookmarkSearch' value={this.state.search} onChange={this.onChangeSearch} data-l10n-id='bookmarkSearch' />
             {
               this.state.search
@@ -465,8 +467,6 @@ class AboutBookmarks extends React.Component {
         <div className='folderView'>
           <div className='columnHeader'>
             <span data-l10n-id='folders' />
-            <span data-l10n-id='importBrowserData' className='fa fa-upload importBrowserData' onClick={this.importBrowserData} />
-            <span data-l10n-id='exportBookmarks' className='fa fa-download exportBookmarks' onClick={this.exportBookmarks} />
             <span data-l10n-id='addBookmarkFolder' className='addBookmarkFolder' onClick={this.addBookmarkFolder} />
           </div>
           <BookmarkFolderList

diff --git a/less/about/bookmarks.less b/less/about/bookmarks.less
@@ -47,22 +47,6 @@
         padding-left: 10px;
         -webkit-user-select: none;
         cursor: default;
-
-        .importBrowserData,
-        .exportBookmarks {
-          color: @buttonColor;
-          float: right;
-          font-size: 20px;
-          margin: 0;
-
-          &:hover {
-            color: #000;
-          }
-        }
-
-        .exportBookmarks {
-          margin: 1px 7px 0 0;
-        }
       }
 
       > .bookmarkFolderList {
@@ -153,27 +137,51 @@
   padding-left: 12px;
 }
 
-.addBookmarkFolder {
+.addBookmarkFolder,
+.addBookmark {
   background-color: @buttonColor;
-  -webkit-mask-image: url('../../img/toolbar/add_BM_folder_btn.svg');
   -webkit-mask-repeat: no-repeat;
-  margin-right: 7px;
   width: 24px;
   height: 26px;
   float: right;
+  margin-right: 7px;
 }
-.addBookmarkFolder:hover {
-  background-color: #000;
+
+.addBookmarkFolder {
+  -webkit-mask-image: url('../../img/toolbar/add_BM_folder_btn.svg');
 }
+
 .addBookmark {
-  background-color: @buttonColor;
   -webkit-mask-image: url('../../img/toolbar/add_bookmark_btn.svg');
-  -webkit-mask-repeat: no-repeat;
-  margin-right: 7px;
   width: 20px;
   height: 20px;
-  float: right;
 }
-.addBookmark:hover {
-  background-color: #000;
+
+.addBookmark,
+.addBookmarkFolder,
+.importBrowserData,
+.exportBookmarks {
+  &:hover {
+    background-color: #000;
+  }
+}
+
+.exportBookmarks,
+.importBrowserData {
+  background-color: @buttonColor;
+  -webkit-mask-repeat: no-repeat;
+  width: 43px;
+  height: 22px;
+  display: inline-block;
+  vertical-align: top;
+  margin: 7px 10px 5px 0;
+}
+
+
+.importBrowserData {
+  -webkit-mask-image: url('../../img/toolbar/bookmarks_import.svg');
+}
+
+.exportBookmarks {
+  -webkit-mask-image: url('../../img/toolbar/bookmarks_export.svg');
 }