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;
-    border-color: $info-border;
-    color: $color-info;
+    @include info-colors;
   }
 
   &.warning {

app/assets/stylesheets/layout/remote_translations_button.scss

@@ -1,10 +1,7 @@
 .remote-translations-button {
+  @include info-colors;
+  font-size: $small-font-size;
   text-align: center;
-
-  &.callout {
-    border: 0;
-    margin: 0;
-    overflow: visible;
   padding: rem-calc(6);
 
   [type="submit"] {
@@ -18,5 +15,4 @@
       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 %>