Merge pull request #6850 from mozilla/i6566

fix(styles): address the radius mismatch on the send button

Author: vladikoff

app/styles/_variables.scss

@@ -178,6 +178,7 @@ $small-font: 12px;
 $media-adjustment: 2px;
 
 //Border-Radius Variables
+$inner-button-border-radius: 1px;
 $small-border-radius: 2px;
 $big-border-radius: 4px;
 

app/styles/modules/_branding.scss

@@ -100,7 +100,7 @@
   position: relative;
 
   .sms-send {
-    border-radius: 0 $small-border-radius $small-border-radius 0;
+    border-radius: 0 $inner-button-border-radius $inner-button-border-radius 0;
     height: $input-height - 2px;
     min-width: 55px;
     padding: 0 7px;
@@ -115,13 +115,13 @@
     }
 
     html[dir='rtl'] & {
-      border-radius: $small-border-radius 0 0 $small-border-radius;
+      border-radius: $inner-button-border-radius 0 0 $inner-button-border-radius;
       border-right: 1px solid $input-border-color-default;
       left: 1px;
     }
 
     @include respond-to('small') {
-      border-radius: 0;
+      border-radius: 0 $inner-button-border-radius $inner-button-border-radius 0;
       height: 38px;
       line-height: 38px;
     }