From f199bc61519af1849a1784c0b358e6bbd6125515 Mon Sep 17 00:00:00 2001
From: Jochen Klar <mail@jochenklar.de>
Date: Fri, 17 Jan 2025 16:13:30 +0100
Subject: [PATCH] Change contact badge to button

---
 .../main/question/QuestionContact.js          |  4 +--
 rdmo/projects/assets/scss/interview.scss      | 35 +++++++------------
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
index 75d747b33..32b3cd138 100644
--- a/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
+++ b/rdmo/projects/assets/js/interview/components/main/question/QuestionContact.js
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 
 const QuestionContact = ({ settings, question, values, fetchContact }) => {
   return settings.project_contact && (
-    <button className="btn btn-link badge badge-contact" title={gettext('Contact support.')}
+    <button className="btn btn-link btn-contact" title={gettext('Contact support.')}
             onClick={() => fetchContact({ question, values })}>
-      <i className="fa fa-question" aria-hidden="true"></i>
+      <i className="fa fa-commenting-o" aria-hidden="true"></i>
     </button>
   )
 }
diff --git a/rdmo/projects/assets/scss/interview.scss b/rdmo/projects/assets/scss/interview.scss
index 578294781..8e601ea3e 100644
--- a/rdmo/projects/assets/scss/interview.scss
+++ b/rdmo/projects/assets/scss/interview.scss
@@ -376,39 +376,28 @@
     }
 }
 
-.badge-optional,
-.badge-contact {
+.badge-optional {
     float: right;
     margin-top: 1px;
     margin-left: 5px;
-}
-
-.badge-optional {
     cursor: help;
     background-color: #efefef;
     color: #777;
 }
 
-.badge-contact {
-    background-color: $link-color;
-    color: white;
-
-    font-weight: normal;
+.btn-contact {
+    float: right;
+    opacity: 0.8;
+    line-height: 20px;
+    font-size: 14px;
 
-    &.btn.btn-link {
-        opacity: 0.8;
-        border: 0;
+    padding: 0;
 
-        &:hover {
-            opacity: 1;
-            background-color: $link-color-hover;
-            color: white;
-        }
-        &:focus {
-            outline: 0;
-            background-color: $link-color-hover;
-            color: white;
-        }
+    &:hover {
+        opacity: 1;
+    }
+    &:focus {
+        outline: 0;
     }
 }