From f14dabea4751a696d66e7aa73981c40c7f424a1b Mon Sep 17 00:00:00 2001
From: Jon Kuperman <jon.kuperman@gmail.com>
Date: Tue, 18 Oct 2016 01:48:12 -0700
Subject: [PATCH 1/2] convert toolbar icons to svg

---
 img/toolbar/home_btn.svg            |   2 +-
 img/toolbar/verified_green_icon.svg |   1 +
 js/about/preferences.js             |   5 +-
 js/components/longPressButton.js    |   4 +-
 js/components/main.js               |  46 ++++++----
 js/components/navigationBar.js      |  46 +++++-----
 js/components/tabsToolbar.js        |   4 +-
 js/contextMenus.js                  |  10 ++-
 less/about/preferences.less         |  15 ++--
 less/button.less                    |  27 ++++--
 less/navigationBar.less             | 127 ++++++++++++++++++++++------
 test/lib/selectors.js               |   4 +-
 12 files changed, 193 insertions(+), 98 deletions(-)
 create mode 100644 img/toolbar/verified_green_icon.svg

diff --git a/img/toolbar/home_btn.svg b/img/toolbar/home_btn.svg
index 26a56e679d6..6dd31081229 100644
--- a/img/toolbar/home_btn.svg
+++ b/img/toolbar/home_btn.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.02 14.5"><defs><style>.cls-1{fill:#6d6e70;}</style></defs><title>home_btn</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M8.49,1.65a1.42,1.42,0,0,1,.75.21,19.91,19.91,0,0,1,2.07,2.25V2.86l1.8-.06V5.65l2.24,2.11h-2v5.08H9.82V9H7.16v3.81H3.59V7.76H1.65L7.65,2a1.18,1.18,0,0,1,.84-.32M8.49,0h0a2.85,2.85,0,0,0-2,.79l-6,5.78A1.65,1.65,0,0,0,1.65,9.42h.28v3.43A1.65,1.65,0,0,0,3.59,14.5H7.16a1.65,1.65,0,0,0,1.33-.67,1.65,1.65,0,0,0,1.33.67h3.59a1.65,1.65,0,0,0,1.65-1.65V9.42h.3A1.65,1.65,0,0,0,16.5,6.56L14.78,4.93V2.81a1.65,1.65,0,0,0-1.65-1.65h-.05l-1.8.06-.26,0A6.19,6.19,0,0,0,10.19.5,3.08,3.08,0,0,0,8.49,0Z"/></g></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.7 15.3"><defs><style>.cls-1{fill:#6d6e70;}</style></defs><title>home_btn2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M19.27,8.25l-3.9-3.44V1H12.64V2.41L9.9,0,8.42,1.31h0L.39,8.4a1.15,1.15,0,0,0,0,1.73l.5.44,2.58-2V15.3H5.32V6.68l4.6-4.05L14.86,7V15.3h1.85V8.83l2.16,1.68.4-.35A1.27,1.27,0,0,0,19.27,8.25Z"/></g></g></svg>
\ No newline at end of file
diff --git a/img/toolbar/verified_green_icon.svg b/img/toolbar/verified_green_icon.svg
new file mode 100644
index 00000000000..7ef9da025e1
--- /dev/null
+++ b/img/toolbar/verified_green_icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.51 71.8"><defs><style>.cls-1{fill:#72bf44;}.cls-2{fill:#fff;}</style></defs><title>verified_green_icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M.07,18.06,30.68,0,61.51,18.06V53.42L31.12,71.8.1,53.86S-.1,34.62.07,18.06Z"/><polygon class="cls-2" points="17.54 29.53 13.01 34.06 29.43 50.45 52.42 27.59 47.19 22.71 29.37 40.88 17.54 29.53"/></g></g></svg>
\ No newline at end of file
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 5a6794d1b6d..070c3c2c760 100644
--- a/js/about/preferences.js
+++ b/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) {
diff --git a/js/components/longPressButton.js b/js/components/longPressButton.js
index 47eaefb64ff..2de74c58a13 100644
--- a/js/components/longPressButton.js
+++ b/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)
   }
 
diff --git a/js/components/main.js b/js/components/main.js
index 4b152d9d0f7..5fdcb1eaeb3 100644
--- a/js/components/main.js
+++ b/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 }}
diff --git a/js/components/navigationBar.js b/js/components/navigationBar.js
index 3ca34bbed68..cd559efa2e1 100644
--- a/js/components/navigationBar.js
+++ b/js/components/navigationBar.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>
diff --git a/js/components/tabsToolbar.js b/js/components/tabsToolbar.js
index 07b758a68e8..cc0b4854b72 100644
--- a/js/components/tabsToolbar.js
+++ b/js/components/tabsToolbar.js
@@ -5,7 +5,6 @@
 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')
@@ -13,8 +12,7 @@ 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>
diff --git a/js/contextMenus.js b/js/contextMenus.js
index 537bfef08af..8ce402c69be 100644
--- a/js/contextMenus.js
+++ b/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) {
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 9f3f8cffcab..9ca6839c9ef 100644
--- a/less/about/preferences.less
+++ b/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 {
diff --git a/less/button.less b/less/button.less
index e6c66a5caba..94bc8a4d34a 100644
--- a/less/button.less
+++ b/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,
diff --git a/less/navigationBar.less b/less/navigationBar.less
index d5bcc760ea1..8dc585c64c5 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -41,8 +41,31 @@
     top: -1px;
   }
 
+  #navigator {
+    .homeButton {
+      margin: 0 3px 3px 3px;
+    }
+
+    .stopButton {
+      margin: 0 3px 4px 3px;
+    }
+
+    .reloadButton {
+      margin: 0 3px 2px 3px;
+    }
+  }
+
   #urlInput { width: 100%; }
 
+  #navigator {
+    &:not(.titleMode) {
+      .bookmarkButtonContainer {
+        margin-top: 4px;
+        line-height: 24px;
+      }
+    }
+  }
+
   // changes to ensure window can be as small as 480px wide
   // and still be useable and have the caption buttons intact
   @media (max-width: @breakpointExtensionButtonPadding) {
@@ -431,19 +454,18 @@
   .backforward {
     display: flex;
 
-    .back,
-    .forward {
+    .backButton,
+    .forwardButton {
       width: @navbarButtonWidth;
     }
 
-    .back {
+    .backButton {
       padding-right: @navbarButtonSpacing;
     }
 
-    .forward {
+    .forwardButton {
       padding-left: @navbarButtonSpacing;
     }
-
   }
 
   // Navigation bar at the center
@@ -510,6 +532,77 @@
   }
 }
 
+.navigationButton {
+  background-color: @buttonColor;
+  display: inline-block;
+  width: 12px;
+  height: 14px;
+  margin: 0 6px;
+}
+
+.navigationButtonContainer {
+  border-radius: @borderRadius;
+  height: 28px;
+  margin: 0 3px;
+
+  &:last-child {
+    margin-right: 8px;
+  }
+
+  &:not(.disabled):hover {
+    background: white;
+    box-shadow: 1px 1px 1px #EEE;
+  }
+}
+
+.backButton,
+.forwardButton {
+  height: 16px;
+  margin: 6px 0 0 0;
+}
+
+.backButton {
+  background: url('../img/toolbar/back_btn.svg') center no-repeat;
+}
+
+.forwardButton {
+  background: url('../img/toolbar/forward_btn.svg') center no-repeat;
+}
+
+#navigator {
+  .stopButton {
+    background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
+    margin: 0 3px 3px 3px;
+    padding: 0 6px;
+    height: 9px;
+  }
+
+  .reloadButton {
+    background: url('../img/toolbar/reload_btn.svg') center no-repeat;
+    margin: 0 3px 1px 3px;
+    padding: 0 6px;
+  }
+
+  .homeButton {
+    background: url('../img/toolbar/home_btn.svg') center no-repeat;
+    width: 14px;
+    height: 13px;
+    margin: 0 3px 2px 3px;
+    padding: 0 6px;
+  }
+
+  .bookmarkButton {
+    background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    width: 14px;
+    height: 14px;
+    margin-bottom: 1px;
+
+    &.removeBookmarkButton {
+      background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
+    }
+  }
+}
 
 .navigatorWrapper {
   justify-content: space-between;
@@ -537,18 +630,6 @@
         opacity: 0.85;
         -webkit-app-region: no-drag;
       }
-
-      &:not([disabled]):hover {
-        color: @buttonColor;
-        opacity: 1.0;
-        background-color: white;
-      }
-    }
-
-    .back,
-    .forward {
-      font-size: 28px;
-      text-align: center;
     }
   }
 }
@@ -617,22 +698,23 @@
   }
 
   &:not(.titleMode) {
-    .urlbarForm, .browserButton {
+    .urlbarForm, .browserButton, .bookmarkButtonContainer {
       animation: fadeIn .6s;
       opacity: 0;
       animation-fill-mode: forwards;
     }
 
-    .bookmarkButton {
+    .bookmarkButtonContainer {
       border: 1px solid #CBCBCB;
+      border-radius: @borderRadius;
       border-right: none;
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       box-sizing: border-box;
       height: 25px;
       line-height: 25px;
-      margin-top: 2px;
       margin-right: -2px;
+      display: inline-block;
     }
   }
 
@@ -763,11 +845,6 @@
     }
   }
 
-  span.navbutton.removeBookmarkButton {
-    color: @braveOrange;
-    opacity: 1;
-  }
-
   .urlbarIcon {
     color: @focusUrlbarOutline;
     left: 14px;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index c4ae44c7868..0de4928bdbc 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -44,8 +44,8 @@ module.exports = {
   fpSwitch: '.fingerprintingProtectionSwitch .switchMiddle',
   noScriptSwitch: '.noScriptSwitch .switchMiddle',
   noScriptNavButton: '#navigator .noScript',
-  backButton: '.backforward .back',
-  forwardButton: '.backforward .forward',
+  backButton: '.backforward .backButton',
+  forwardButton: '.backforward .forwardButton',
   clearBrowsingDataPanel: '.clearBrowsingDataPanel',
   clearBrowsingDataButton: '.clearBrowsingDataButton',
   securityTab: '[data-l10n-id="security"]',

From 35196bcb6e74cd835cc600904c5051025f679a74 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Mon, 7 Nov 2016 00:48:23 -0700
Subject: [PATCH 2/2] Tweaks for SVG updates - move star up 1px - make
 reload/stop/home the same size (on hover) as back/forward   - move
 reload/stop/home out of `startButtons` and into `navigator`   - change
 reload/stop/home to pos relative, move down 3 px

Changes tested on Windows
---
 js/components/navigationBar.js | 48 +++++++++++++++++-----------------
 less/navigationBar.less        | 14 +++++++---
 2 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/js/components/navigationBar.js b/js/components/navigationBar.js
index cd559efa2e1..ca71045d1d4 100644
--- a/js/components/navigationBar.js
+++ b/js/components/navigationBar.js
@@ -125,32 +125,32 @@ class NavigationBar extends ImmutableComponent {
           withHomeButton={getSetting(settings.SHOW_HOME_BUTTON)}
           />
         : null
-        }
-      <div className='startButtons'>
-        {
-          this.titleMode
-          ? null
-          : this.loading
-            ? <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)
+      }
+      {
+        this.titleMode
+        ? null
+        : this.loading
           ? <span className='navigationButtonContainer'>
-            <span data-l10n-id='homeButton'
-              className='navigationButton homeButton'
-              onClick={this.onHome} />
+            <span data-l10n-id='stopButton'
+              className='navigationButton stopButton'
+              onClick={this.onStop} />
           </span>
-          : null
-        }
+          : <span className='navigationButtonContainer'>
+            <span data-l10n-id='reloadButton'
+              className='navigationButton reloadButton'
+              onClick={this.onReload} />
+          </span>
+      }
+      {
+        !this.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
+        ? <span className='navigationButtonContainer'>
+          <span data-l10n-id='homeButton'
+            className='navigationButton homeButton'
+            onClick={this.onHome} />
+        </span>
+        : null
+      }
+      <div className='startButtons'>
         {
           !this.titleMode
           ? <span className='bookmarkButtonContainer'>
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 8dc585c64c5..361757f33f9 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -43,15 +43,15 @@
 
   #navigator {
     .homeButton {
-      margin: 0 3px 3px 3px;
+      margin: 0 3px 4px 3px;
     }
 
     .stopButton {
-      margin: 0 3px 4px 3px;
+      margin: 0 3px 6px 3px;
     }
 
     .reloadButton {
-      margin: 0 3px 2px 3px;
+      margin: 0 3px 3px 3px;
     }
   }
 
@@ -575,12 +575,16 @@
     margin: 0 3px 3px 3px;
     padding: 0 6px;
     height: 9px;
+    position: relative;
+    top: 3px;
   }
 
   .reloadButton {
     background: url('../img/toolbar/reload_btn.svg') center no-repeat;
     margin: 0 3px 1px 3px;
     padding: 0 6px;
+    position: relative;
+    top: 3px;
   }
 
   .homeButton {
@@ -589,6 +593,8 @@
     height: 13px;
     margin: 0 3px 2px 3px;
     padding: 0 6px;
+    position: relative;
+    top: 3px;
   }
 
   .bookmarkButton {
@@ -596,7 +602,7 @@
     -webkit-mask-repeat: no-repeat;
     width: 14px;
     height: 14px;
-    margin-bottom: 1px;
+    margin-bottom: 2px;
 
     &.removeBookmarkButton {
       background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;