Merge pull request #5173 from brave/svg-conversion

convert toolbar icons to svg

js/about/preferences.js

@@ -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) {

js/components/longPressButton.js

@@ -21,12 +21,12 @@ class LongPressButton extends ImmutableComponent {
     }
 
     const self = this
-    const rect = e.target.getBoundingClientRect()
+    const target = e.target
     const LONG_PRESS_MILLISECONDS = 300
 
     this.longPressTimer = setTimeout(function () {
       self.isLocked = true
-      self.props.onLongPress(rect)
+      self.props.onLongPress(target)
     }, LONG_PRESS_MILLISECONDS)
   }
 

js/components/main.js

@@ -579,12 +579,12 @@ class Main extends ImmutableComponent {
     this.onNav(e, 'canGoForward', 'forward', this.activeFrame.goForward)
   }
 
-  onBackLongPress (rect) {
-    contextMenus.onBackButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), rect)
+  onBackLongPress (target) {
+    contextMenus.onBackButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
   }
 
-  onForwardLongPress (rect) {
-    contextMenus.onForwardButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), rect)
+  onForwardLongPress (target) {
+    contextMenus.onForwardButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
   }
 
   onBraveMenu () {
@@ -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/components/navigationBar.js

@@ -125,40 +125,44 @@ class NavigationBar extends ImmutableComponent {
           withHomeButton={getSetting(settings.SHOW_HOME_BUTTON)}
           />
         : null
-        }
-      <div className='startButtons'>
-        {
-          this.titleMode
-          ? null
-          : this.loading
-            ? <Button iconClass='fa-times'
-              l10nId='stopButton'
-              className='navbutton stop-button'
+      }
+      {
+        this.titleMode
+        ? null
+        : this.loading
+          ? <span className='navigationButtonContainer'>
+            <span data-l10n-id='stopButton'
+              className='navigationButton stopButton'
               onClick={this.onStop} />
-            : <Button iconClass='fa-repeat'
-              l10nId='reloadButton'
-              className='navbutton reload-button'
+          </span>
+          : <span className='navigationButtonContainer'>
+            <span data-l10n-id='reloadButton'
+              className='navigationButton reloadButton'
               onClick={this.onReload} />
-        }
-        {
-          !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
-          ? <Button iconClass='fa-home'
-            l10nId='homeButton'
-            className='navbutton homeButton'
+          </span>
+      }
+      {
+        !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
+        ? <span className='navigationButtonContainer'>
+          <span data-l10n-id='homeButton'
+            className='navigationButton homeButton'
             onClick={this.onHome} />
-          : null
-        }
+        </span>
+        : null
+      }
+      <div className='startButtons'>
         {
           !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/tabsToolbar.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/contextMenus.js

@@ -1196,10 +1196,10 @@ 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,
+    top: rect.bottom,
     template: menuTemplate
   }))
 }
@@ -1346,7 +1346,8 @@ function onMoreBookmarksMenu (activeFrame, allBookmarkItems, overflowItems, e) {
   }))
 }
 
-function onBackButtonHistoryMenu (activeFrame, history, rect) {
+function onBackButtonHistoryMenu (activeFrame, history, target) {
+  const rect = target.parentNode.getBoundingClientRect()
   const menuTemplate = []
 
   if (activeFrame && history && history.entries.length > 0) {
@@ -1389,7 +1390,8 @@ function onBackButtonHistoryMenu (activeFrame, history, rect) {
   }))
 }
 
-function onForwardButtonHistoryMenu (activeFrame, history, rect) {
+function onForwardButtonHistoryMenu (activeFrame, history, target) {
+  const rect = target.parentNode.getBoundingClientRect()
   const menuTemplate = []
 
   if (activeFrame && history && history.entries.length > 0) {

less/about/preferences.less

@@ -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 {

less/button.less

@@ -19,6 +19,15 @@ 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;
+  cursor: default;
+}
+
 a.browserButton,
 span.browserButton,
 .browserButton {
@@ -56,19 +65,21 @@ 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;
+    max-height: 14px;
+    opacity: 0.5;
+    position: relative;
+    top: 8px;
+    left: 2px;
+    -webkit-mask-image: url('../img/toolbar/newtab_btn.svg');
+    -webkit-mask-repeat: no-repeat;
+    background-color: @buttonColor;
     &:hover {
       opacity: 0.8;
+      background-color: black;
     }
   }
 
-  &.menuButton {
-    height: auto;
-  }
-
   &.primaryButton,
   &.actionButton,
   &.wideButton,