New Icons: Replace instance of fa-qr-code icon (#17474)

* New Icons: Replace instance of fa-qr-code icon * Update ui/pages/send/send-content/add-recipient/domain-input.component.js Co-authored-by: George Marshall <[email protected]> --------- Co-authored-by: George Marshall <[email protected]>
MetaMask · Jan 31, 2023 · d057410 · d057410
1 parent edb2c9e
commit d057410
Showing 1 changed file with 12 additions and 15 deletions.
diff --git a/ui/pages/send/send-content/add-recipient/domain-input.component.js b/ui/pages/send/send-content/add-recipient/domain-input.component.js
@@ -8,6 +8,11 @@ import {
   isBurnAddress,
   isValidHexAddress,
 } from '../../../../../shared/modules/hexstring-utils';
+import {
+  ButtonIcon,
+  ICON_NAMES,
+} from '../../../../components/component-library';
+import { COLORS } from '../../../../helpers/constants/design-system';
 
 export default class DomainInput extends Component {
   static contextTypes = {
@@ -147,7 +152,7 @@ export default class DomainInput extends Component {
                 autoFocus
                 data-testid="ens-input"
               />
-              <button
+              <ButtonIcon
                 className="ens-input__wrapper__action-icon-button"
                 onClick={() => {
                   if (userInput) {
@@ -156,20 +161,12 @@ export default class DomainInput extends Component {
                     this.props.scanQrCode();
                   }
                 }}
-              >
-                <i
-                  className={classnames('fa', {
-                    'fa-times': userInput,
-                    'fa-qrcode': !userInput,
-                  })}
-                  title={t(userInput ? 'close' : 'scanQrCode')}
-                  style={{
-                    color: userInput
-                      ? 'var(--color-icon-default)'
-                      : 'var(--color-primary-default)',
-                  }}
-                />
-              </button>
+                iconName={
+                  userInput ? ICON_NAMES.CLOSE : ICON_NAMES.SCAN_BARCODE
+                }
+                ariaLabel={t(userInput ? 'close' : 'scanQrCode')}
+                color={userInput ? COLORS.ICON_DEFAULT : COLORS.PRIMARY_DEFAULT}
+              />
             </>
           )}
         </div>