From fb2b88b10a25bcf735d60e6f6cff36ab353aa6f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Mon, 30 Jan 2023 15:38:57 +0100
Subject: [PATCH] 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            |  4 +---
 .../layout/remote_translations_button.scss    | 24 ++++++++-----------
 app/assets/stylesheets/mixins/colors.scss     |  6 +++++
 ...ote_translations_button_component.html.erb |  2 +-
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 788d8d975..c638900e3 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/layout/remote_translations_button.scss b/app/assets/stylesheets/layout/remote_translations_button.scss
index e9f725ec5..9af0e765c 100644
--- a/app/assets/stylesheets/layout/remote_translations_button.scss
+++ b/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;
-    overflow: visible;
-    padding: rem-calc(6);
+    cursor: pointer;
+    font-weight: bold;
 
-    [type="submit"] {
-      @include brand-color;
-      background: none;
-      border: 0;
-      cursor: pointer;
-      font-weight: bold;
-
-      &:hover {
-        text-decoration: underline;
-      }
+    &:hover {
+      text-decoration: underline;
     }
   }
 }
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index d40c9b9a4..9454d55d2 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/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;
 }
diff --git a/app/components/layout/remote_translations_button_component.html.erb b/app/components/layout/remote_translations_button_component.html.erb
index 9447e6d5a..99a590def 100644
--- a/app/components/layout/remote_translations_button_component.html.erb
+++ b/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 %>