Polish sectionTitle

app/renderer/about/bookmarks/bookmarks.js

@@ -7,6 +7,9 @@ const React = require('react')
 const Immutable = require('immutable')
 const ipc = window.chrome.ipcRenderer
 
+const cx = require('../../../../js/lib/classSet')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 // Components
 const {AboutPageSectionTitle} = require('../../components/common/sectionTitle')
 const BookmarkFolderList = require('./bookmarkFolderList')
@@ -133,7 +136,10 @@ class Bookmarks extends React.Component {
 
   render () {
     return <div className='siteDetailsPage bookmarksManager' onClick={this.onClick}>
-      <div className='siteDetailsPageHeader'>
+      <div className={cx({
+        siteDetailsPageHeader: true,
+        [css(styles.bookmarksManager__header)]: true
+      })}>
         <AboutPageSectionTitle data-l10n-id='bookmarkManager' />
         <div className='headerActions'>
           <div className='searchWrapper'>
@@ -163,7 +169,8 @@ class Bookmarks extends React.Component {
             isRoot
             selectedFolderId={this.state.selectedFolderId}
             search={this.state.search}
-            bookmarkOrder={this.state.bookmarkOrder} />
+            bookmarkOrder={this.state.bookmarkOrder}
+          />
         </div>
         <div className='organizeView'>
           <BookmarksList
@@ -176,11 +183,20 @@ class Bookmarks extends React.Component {
             allBookmarkFolders={this.state.bookmarkFolders}
             sortable={false}
             draggable={!this.state.search}
-            selectedFolderId={this.state.selectedFolderId} />
+            selectedFolderId={this.state.selectedFolderId}
+          />
         </div>
       </div>
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  bookmarksManager__header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  }
+})
+
 module.exports = <Bookmarks />

app/renderer/components/common/sectionTitle.js

@@ -90,7 +90,8 @@ const styles = StyleSheet.create({
   },
 
   aboutPageSectionTitle: {
-    display: 'inline-block'
+    display: 'block',
+    whiteSpace: 'nowrap'
   },
   aboutPageSectionSubTitle: {
     fontSize: '16px',

js/about/history.js

@@ -12,7 +12,7 @@ const settings = require('../constants/settings')
 const aboutActions = require('./aboutActions')
 const getSetting = require('../settings').getSetting
 const SortableTable = require('../../app/renderer/components/common/sortableTable')
-const Button = require('../../app/renderer/components/common/button')
+const BrowserButton = require('../../app/renderer/components/common/browserButton')
 const {makeImmutable} = require('../../app/common/state/immutableUtil')
 const historyUtil = require('../../app/common/lib/historyUtil')
 
@@ -208,7 +208,10 @@ class AboutHistory extends React.Component {
   }
   render () {
     return <div className='siteDetailsPage' onClick={this.onClick}>
-      <div className='siteDetailsPageHeader'>
+      <div className={cx({
+        siteDetailsPageHeader: true,
+        [css(styles.history__header)]: true
+      })}>
         <AboutPageSectionTitle data-l10n-id='history' />
         <div className='headerActions'>
           <div className='searchWrapper'>
@@ -219,7 +222,7 @@ class AboutHistory extends React.Component {
               : <span className='fa fa-search searchInputPlaceholder' />
             }
           </div>
-          <Button className='primaryButton'
+          <BrowserButton primaryColor
             l10nId='clearBrowsingDataNow'
             testId='clearBrowsingDataButton'
             onClick={this.clearBrowsingDataNow}
@@ -247,6 +250,12 @@ class AboutHistory extends React.Component {
 }
 
 const styles = StyleSheet.create({
+  history__header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+
   subTitleMargin: {
     marginLeft: globalStyles.spacing.aboutPageSectionPadding
   }

less/about/bookmarks.less

@@ -6,7 +6,6 @@
 
 .siteDetailsPage {
   display: flex;
-  padding: 0;
   flex-direction: column;
   height: 100%;
   min-height: 100vh;
@@ -16,26 +15,10 @@
     width: 100%;
   }
 
-  .siteDetailsPageHeader {
-    display: flex;
-    padding: 24px;
-    justify-content: space-between;
-
-    .headerActions {
-      float: none;
-      align-items: center;
-
-      input.searchInput {
-        margin-right: 0 !important;
-      }
-    }
-  }
-
   .siteDetailsPageContent {
     display: flex;
     flex-wrap: wrap;
     height: 100%;
-    margin: 0;
     flex: 1;
 
     .folderView {

less/about/siteDetails.less

@@ -10,7 +10,6 @@ body {
   background: @veryLightGray;
 }
 
-
 .siteDetailsPage {
   margin: 0;
   padding-top: 24px;
@@ -19,8 +18,6 @@ body {
     padding: 0 @aboutPageSectionPadding;
 
     .headerActions {
-      float: right;
-
       .searchWrapper {
         display: inline-block;