convert toolbar icons to svg

Author: jkup

img/toolbar/home_btn.svg

@@ -217,10 +217,7 @@ class LedgerTable extends ImmutableComponent {
   }
 
   getVerifiedIcon (synopsis) {
-    return <span className='verified fa-stack'>
-      <i className='fa fa-circle fa-stack-2x' />
-      <i className='fa fa-check fa-stack-1x' />
-    </span>
+    return <span className='verified' />
   }
 
   enabledForSite (synopsis) {

img/toolbar/verified_green_icon.svg

@@ -910,20 +910,30 @@ class Main extends ImmutableComponent {
               onDragOver={this.onDragOver}
               onDrop={this.onDrop}>
               <div className='backforward'>
-                <LongPressButton
-                  l10nId='backButton'
-                  className='back fa fa-angle-left'
-                  disabled={!activeFrame || !activeFrame.get('canGoBack')}
-                  onClick={this.onBack}
-                  onLongPress={this.onBackLongPress}
-                />
-                <LongPressButton
-                  l10nId='forwardButton'
-                  className='forward fa fa-angle-right'
-                  disabled={!activeFrame || !activeFrame.get('canGoForward')}
-                  onClick={this.onForward}
-                  onLongPress={this.onForwardLongPress}
-                />
+                <div className={cx({
+                  navigationButtonContainer: true,
+                  disabled: !activeFrame || !activeFrame.get('canGoBack')
+                })}>
+                  <LongPressButton
+                    l10nId='backButton'
+                    className='navigationButton backButton'
+                    disabled={!activeFrame || !activeFrame.get('canGoBack')}
+                    onClick={this.onBack}
+                    onLongPress={this.onBackLongPress}
+                  />
+                </div>
+                <div className={cx({
+                  navigationButtonContainer: true,
+                  disabled: !activeFrame || !activeFrame.get('canGoForward')
+                })}>
+                  <LongPressButton
+                    l10nId='forwardButton'
+                    className='navigationButton forwardButton'
+                    disabled={!activeFrame || !activeFrame.get('canGoForward')}
+                    onClick={this.onForward}
+                    onLongPress={this.onForwardLongPress}
+                  />
+                </div>
               </div>
               <NavigationBar
                 ref={(node) => { this.navBar = node }}

js/about/preferences.js

@@ -131,34 +131,38 @@ class NavigationBar extends ImmutableComponent {
           this.titleMode
           ? null
           : this.loading
-            ? <Button iconClass='fa-times'
-              l10nId='stopButton'
-              className='navbutton stop-button'
-              onClick={this.onStop} />
-            : <Button iconClass='fa-repeat'
-              l10nId='reloadButton'
-              className='navbutton reload-button'
-              onClick={this.onReload} />
+            ? <span className='navigationButtonContainer'>
+              <span data-l10n-id='stopButton'
+                className='navigationButton stopButton'
+                onClick={this.onStop} />
+            </span>
+            : <span className='navigationButtonContainer'>
+              <span data-l10n-id='reloadButton'
+                className='navigationButton reloadButton'
+                onClick={this.onReload} />
+            </span>
         }
         {
           !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-          ? <Button iconClass='fa-home'
-            l10nId='homeButton'
-            className='navbutton homeButton'
-            onClick={this.onHome} />
+          ? <span className='navigationButtonContainer'>
+            <span data-l10n-id='homeButton'
+              className='navigationButton homeButton'
+              onClick={this.onHome} />
+          </span>
           : null
         }
         {
           !this.titleMode
-          ? <Button iconClass={this.bookmarked ? 'fa-star' : 'fa-star-o'}
-            className={cx({
-              navbutton: true,
-              bookmarkButton: true,
-              removeBookmarkButton: this.bookmarked,
-              withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
-            })}
-            l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            onClick={this.onToggleBookmark} />
+          ? <span className='bookmarkButtonContainer'>
+            <span data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+              className={cx({
+                navigationButton: true,
+                bookmarkButton: true,
+                removeBookmarkButton: this.bookmarked,
+                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON)
+              })}
+              onClick={this.onToggleBookmark} />
+          </span>
           : null
         }
       </div>

js/components/main.js

@@ -5,16 +5,14 @@
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
 const Tabs = require('./tabs')
-const Button = require('./button')
 const PinnedTabs = require('./pinnedTabs')
 const contextMenus = require('../contextMenus')
 const windowStore = require('../stores/windowStore')
 
 class TabsToolbarButtons extends ImmutableComponent {
   render () {
     return <div className='tabsToolbarButtons'>
-      <Button iconClass='fa-bars'
-        l10nId='menuButton'
+      <span data-l10n-id='menuButton'
         className='navbutton menuButton'
         onClick={this.props.onMenu} />
     </div>

js/components/navigationBar.js

@@ -1196,7 +1196,7 @@ function mainTemplateInit (nodeProps, frame) {
 
 function onHamburgerMenu (location, e) {
   const menuTemplate = hamburgerTemplateInit(location, e)
-  const rect = e.target.getBoundingClientRect()
+  const rect = e.target.parentNode.getBoundingClientRect()
   windowActions.setContextMenuDetail(Immutable.fromJS({
     right: 0,
     top: rect.bottom + 2,

js/components/tabsToolbar.js

@@ -788,17 +788,12 @@ div.nextPaymentSubmission {
       }
 
       .verified{
-        left: -10px;
+        height: 20px;
+        width: 20px;
+        background: url('../../img/toolbar/verified_green_icon.svg') center no-repeat;
+        display: inline-block;
         position: absolute;
-        font-size: 10px;
-
-        .fa-circle {
-          color: #67B640;
-        }
-
-        .fa-check {
-          color: white;
-        }
+        left: -10px;
       }
 
       &.alignRight {

js/contextMenus.js

@@ -19,6 +19,14 @@ span.buttonSeparator {
   margin: 4px 3px 4px 3px;
 }
 
+span.menuButton {
+  background: url('../img/toolbar/menu_btn.svg') center no-repeat;
+  display: inline-block;
+  width: 20px;
+  height: 12px;
+  margin: 6px 4px 0 0;
+}
+
 a.browserButton,
 span.browserButton,
 .browserButton {
@@ -56,19 +64,17 @@ span.browserButton,
 
   &.newFrameButton {
     font-size: 0px;
-    width: 24px;
-    height: 100%;
-    opacity: 0.65;
-    background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
+    width: 10px;
+    height: 10px;
+    opacity: 0.5;
+    margin: 5px 0 0 5px;
+    background: url('../img/toolbar/newtab_btn.svg') center no-repeat;
     &:hover {
       opacity: 0.8;
+      background-color: black;
     }
   }
 
-  &.menuButton {
-    height: auto;
-  }
-
   &.primaryButton,
   &.actionButton,
   &.wideButton,