fix: center the question submit button's checkmark

CSS lets us stack backgrounds on top of one another, so let's do that instead of making it an inline image.
adroitwhiz · Mar 7, 2024 · 1682cdd · 1682cdd
1 parent 753b5b5
commit 1682cdd
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 17 deletions.
diff --git a/src/components/question/question.css b/src/components/question/question.css
@@ -34,7 +34,10 @@
     border-radius: 100%;
 
     color: white;
-    background: $looks-secondary;
+    background: url('./icon--enter.svg'), $looks-secondary;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
 }
 
 [dir="ltr"] .question-submit-button {
@@ -62,11 +65,3 @@
 .question-input > input:focus {
     box-shadow: 0px 0px 0px 3px $looks-transparent;
 }
-
-.question-submit-button-icon {
-    width: calc(2rem - $space);
-    height: calc(2rem - $space);
-    position: relative;
-    right: -7px;
-    left: -7px;
-}
diff --git a/src/components/question/question.jsx b/src/components/question/question.jsx
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import styles from './question.css';
 import Input from '../forms/input.jsx';
-import enterIcon from './icon--enter.svg';
 
 const QuestionComponent = props => {
     const {
@@ -29,13 +28,7 @@ const QuestionComponent = props => {
                     <button
                         className={styles.questionSubmitButton}
                         onClick={onClick}
-                    >
-                        <img
-                            className={styles.questionSubmitButtonIcon}
-                            draggable={false}
-                            src={enterIcon}
-                        />
-                    </button>
+                    />
                 </div>
             </div>
         </div>