Merge pull request #5526 from brave/polishfest-one

numerous small adjustments to buttons and some other style fixes

js/components/main.js

@@ -932,6 +932,7 @@ class Main extends ImmutableComponent {
               <div className='backforward'>
                 <div className={cx({
                   navigationButtonContainer: true,
+                  nav: true,
                   disabled: !activeFrame || !activeFrame.get('canGoBack')
                 })}>
                   <LongPressButton
@@ -944,6 +945,7 @@ class Main extends ImmutableComponent {
                 </div>
                 <div className={cx({
                   navigationButtonContainer: true,
+                  nav: true,
                   disabled: !activeFrame || !activeFrame.get('canGoForward')
                 })}>
                   <LongPressButton

less/about/newtab.less

@@ -112,19 +112,19 @@ ul {
           color: @statsBlue;
         }
         &.timeSaved {
-          color: @statsGray;
+          color: @statsLightGray;
         }
 
         .text {
           display: inline;
-          color: @statsGray;
+          color: @statsLightGray;
           font-size: 20px;
           line-height: 24px;
         }
       }
 
       .statsText {
-        font-size: 14px;
+        font-size: 13px;
         color: #fff;
       }
     }

less/button.less

@@ -72,16 +72,16 @@ span.browserButton,
 
   &.newFrameButton {
     font-size: 0px;
-    width: 10px;
+    width: 12px;
     max-height: 14px;
     position: relative;
-    top: 8px;
+    top: 7px;
     left: 2px;
     -webkit-mask-image: url('../img/toolbar/newtab_btn.svg');
     -webkit-mask-repeat: no-repeat;
     background-color: @buttonColor;
     &:hover {
-      opacity: 0.8;
+      opacity: 1.0;
       background-color: black;
     }
   }

less/forms.less

@@ -602,7 +602,7 @@
 }
 
 .bookmarkFormFooter {
-  background: @gray;
+  background: @black10;
   padding: 10px 30px;
 
   span {

less/navigationBar.less

@@ -43,15 +43,15 @@
 
   #navigator {
     .homeButton {
-      margin: 0 3px 4px 3px;
+      margin: 0 3px 1px 3px;
     }
 
     .stopButton {
-      margin: 0 3px 6px 3px;
+      margin: 0 3px 2px 3px;
     }
 
     .reloadButton {
-      margin: 0 3px 3px 3px;
+      margin: 0 3px 0px 3px;
     }
   }
 
@@ -477,15 +477,18 @@
 
     .backButton,
     .forwardButton {
-      width: @navbarButtonWidth;
+    width: 20px;
+    margin-top: 5px;
     }
 
     .backButton {
-      padding-right: @navbarButtonSpacing;
+    padding-right:4px;
+    margin-left: 4px;
     }
 
     .forwardButton {
-      padding-left: @navbarButtonSpacing;
+    padding-left: 4px;
+    margin-left: 6px;
     }
   }
 
@@ -524,6 +527,10 @@
 
     .extensionButton {
       -webkit-app-region: no-drag;
+    background-size: contain;
+    height: 17px;
+    margin: 4px 4px 0 0;
+    opacity: 0.85;
     }
 
     .braveMenu {
@@ -545,7 +552,7 @@
         opacity: 0.4;
       }
       &.leftOfCaptionButton {
-        margin-right: 1px;
+        margin-right: 3px;
       }
     }
 
@@ -562,64 +569,72 @@
   display: inline-block;
   width: 12px;
   height: 14px;
-  margin: 0 6px;
+  margin: 0 7px 0 0;
 }
 
 .navigationButtonContainer {
   border-radius: @borderRadius;
-  height: 28px;
-  margin: 0 3px;
+  height: 24px;
+  width: 26px;
+  margin-left: -3px;
+  margin-right: 6px;
+
+  &.nav {
+  margin-left: 4px;
+  margin-right: 1px;
+  width: 34px;
+  }
 
   &:last-child {
     margin-right: 8px;
   }
 
   &:not(.disabled):hover {
     background: white;
-    box-shadow: 1px 1px 1px #EEE;
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
   }
 }
 
 .backButton,
 .forwardButton {
-  height: 16px;
-  margin: 6px 0 0 0;
+  height: 15px;
+  width: 30px;
+  margin-top: 5px;
 }
 
 .backButton {
   background: url('../img/toolbar/back_btn.svg') center no-repeat;
+  margin-left: 4px;
 }
 
 .forwardButton {
   background: url('../img/toolbar/forward_btn.svg') center no-repeat;
+  margin-left: 4px;
 }
 
 #navigator {
   .stopButton {
     background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
     margin: 0 3px 3px 3px;
     padding: 0 6px;
-    height: 9px;
+    height: 12px;
     position: relative;
     top: 3px;
   }
 
   .reloadButton {
     background: url('../img/toolbar/reload_btn.svg') center no-repeat;
-    margin: 0 3px 1px 3px;
-    padding: 0 6px;
+    margin: 0 3px -1px 3px;
+    padding: 0 4px;
     position: relative;
-    top: 3px;
   }
 
   .homeButton {
     background: url('../img/toolbar/home_btn.svg') center no-repeat;
     width: 14px;
     height: 13px;
-    margin: 0 3px 2px 3px;
     padding: 0 6px;
     position: relative;
-    top: 3px;
   }
 
   .bookmarkButton {
@@ -628,6 +643,7 @@
     width: 14px;
     height: 14px;
     margin-bottom: 2px;
+    margin-left: 6px;
 
     &.removeBookmarkButton {
       background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
@@ -638,6 +654,7 @@
 .navigatorWrapper {
   justify-content: space-between;
   align-items: center;
+  margin-top: 1px;
   height: @navbarHeight;
   box-sizing: border-box;
 

less/variables.less

@@ -156,6 +156,7 @@
 @statsRed: #fe521d;
 @statsBlue: #0796fa;
 @statsGray: @chromeText;
+@statsLightGray: #999999;
 
 @defaultIconBackground: #F7F7F7;