Simplify styles for the remote translations message

Instead of adding all the styles of a callout and then overwriting half
of them, we can simply add the half we need.

app/assets/stylesheets/layout.scss

@@ -989,9 +989,7 @@ form {
   }
 
   &.primary {
-    background-color: $info-bg;
+    @include info-colors;
-    border-color: $info-border;
-    color: $color-info;
   }
 
   &.warning {

app/assets/stylesheets/layout/remote_translations_button.scss

@@ -1,22 +1,18 @@
 .remote-translations-button {
+  @include info-colors;
+  font-size: $small-font-size;
   text-align: center;
+  padding: rem-calc(6);
 
-  &.callout {
+  [type="submit"] {
+    @include brand-color;
+    background: none;
     border: 0;
-    margin: 0;
+    cursor: pointer;
-    overflow: visible;
+    font-weight: bold;
-    padding: rem-calc(6);
 
-    [type="submit"] {
+    &:hover {
-      @include brand-color;
+      text-decoration: underline;
-      background: none;
-      border: 0;
-      cursor: pointer;
-      font-weight: bold;
-
-      &:hover {
-        text-decoration: underline;
-      }
     }
   }
 }

app/assets/stylesheets/mixins/colors.scss

@@ -94,6 +94,12 @@
   @include text-color($anchor-color-hover, anchor-color-hover);
 }
 
+@mixin info-colors {
+  background-color: $info-bg;
+  border-color: $info-border;
+  color: $color-info;
+}
+
 %brand-background {
   @include brand-background;
 }

app/components/layout/remote_translations_button_component.html.erb

@@ -1,4 +1,4 @@
-<div class="remote-translations-button callout primary">
+<div class="remote-translations-button">
   <% if display_remote_translation_button? %>
     <%= form_tag remote_translations_path do %>
       <%= hidden_field_tag :remote_translations, remote_translations.to_json %>