Change contact badge to button

rdmorganiser · Jan 17, 2025 · f199bc6 · f199bc6
1 parent c821947
commit f199bc6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 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
@@ -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
@@ -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;
     }
 }