Dark mode: icons ens input (#14133)

* Dark mode ens input on send page icons convert to font-awesome

* Updating for close in dark mode

app/images/check-green-solid.svg

@@ -1,6 +0,0 @@
-<svg fill="none" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
-    <g clip-rule="evenodd" fill-rule="evenodd">
-        <path d="M.833 10a9.167 9.167 0 1118.334 0A9.167 9.167 0 01.833 10z" fill="#28a745"/>
-        <path d="M14.426 6.702a.833.833 0 010 1.179l-5.173 5.417a.833.833 0 01-1.178 0l-2.5-2.5a.833.833 0 111.178-1.179l1.91 1.91 4.584-4.827a.833.833 0 011.179 0z" fill="#fff"/>
-    </g>
-</svg>

app/images/qr-blue.svg

@@ -1,5 +0,0 @@
-<svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <g clip-rule="evenodd" fill="#037dd6" fill-rule="evenodd">
-        <path d="M16.32 8H8.64v8h7.68zM8.64 6c-1.06 0-1.92.895-1.92 2v8c0 1.105.86 2 1.92 2h7.68c1.06 0 1.92-.895 1.92-2V8c0-1.105-.86-2-1.92-2zM16.32 1c0-.552.43-1 .96-1h3.84C22.71 0 24 1.343 24 3v4c0 .552-.43 1-.96 1s-.96-.448-.96-1V3c0-.552-.43-1-.96-1h-3.84c-.53 0-.96-.448-.96-1zM23.04 16c.53 0 .96.448.96 1v4c0 1.657-1.29 3-2.88 3h-3.84c-.53 0-.96-.448-.96-1s.43-1 .96-1h3.84c.53 0 .96-.448.96-1v-4c0-.552.43-1 .96-1zM7.68 23c0 .552-.43 1-.96 1H2.88C1.29 24 0 22.657 0 21v-4c0-.552.43-1 .96-1s.96.448.96 1v4c0 .552.43 1 .96 1h3.84c.53 0 .96.448.96 1zM.96 8C.43 8 0 7.552 0 7V3c0-1.657 1.29-3 2.88-3h3.84c.53 0 .96.448.96 1s-.43 1-.96 1H2.88c-.53 0-.96.448-.96 1v4c0 .552-.43 1-.96 1z"/>
-    </g>
-</svg>

ui/pages/send/send-content/add-recipient/ens-input.component.js

@@ -96,10 +96,16 @@ export default class EnsInput extends Component {
             'ens-input__wrapper--valid': hasSelectedAddress,
           })}
         >
-          <div
+          <i
-            className={classnames('ens-input__wrapper__status-icon', {
+            className={classnames('ens-input__wrapper__status-icon', 'fa', {
-              'ens-input__wrapper__status-icon--valid': hasSelectedAddress,
+              'fa-check-circle': hasSelectedAddress,
+              'fa-search': !hasSelectedAddress,
             })}
+            style={{
+              color: hasSelectedAddress
+                ? 'var(--color-success-default)'
+                : 'var(--color-icon-muted)',
+            }}
           />
           {hasSelectedAddress ? (
             <>
@@ -113,10 +119,18 @@ export default class EnsInput extends Component {
                   </div>
                 )}
               </div>
-              <div
+              <button
-                className="ens-input__wrapper__action-icon ens-input__wrapper__action-icon--erase"
                 onClick={this.props.onReset}
-              />
+                className="ens-input__wrapper__action-icon-button"
+              >
+                <i
+                  className="fa fa-times"
+                  style={{
+                    color: 'var(--color-icon-default)',
+                  }}
+                  title={t('close')}
+                />
+              </button>
             </>
           ) : (
             <>
@@ -133,10 +147,7 @@ export default class EnsInput extends Component {
                 data-testid="ens-input"
               />
               <button
-                className={classnames('ens-input__wrapper__action-icon', {
+                className="ens-input__wrapper__action-icon-button"
-                  'ens-input__wrapper__action-icon--erase': userInput,
-                  'ens-input__wrapper__action-icon--qrcode': !userInput,
-                })}
                 onClick={() => {
                   if (userInput) {
                     this.props.onReset();
@@ -144,7 +155,20 @@ export default class EnsInput 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>
             </>
           )}
         </div>

ui/pages/send/send.scss

@@ -175,20 +175,7 @@
     }
 
     &__status-icon {
-      @extend %bg-contain;
+      margin: 4px 8px 4px 4px;
-
-      background-image: url('/images/search-black.svg');
-      width: 1.125rem;
-      height: 1.125rem;
-      margin: 0.25rem 0.5rem 0.25rem 0.25rem;
-
-      [data-theme='dark'] & {
-        background-image: url('/images/search.svg');
-      }
-
-      &--valid {
-        background-image: url('/images/check-green-solid.svg');
-      }
     }
 
     &__input {
@@ -206,36 +193,21 @@
       }
     }
 
-    &__action-icon {
+    &__action-icon-button {
-      @extend %bg-contain;
+      background: none;
-
+      border: none;
-      cursor: pointer;
+      padding: 0 8px;
-
+      height: 24px;
-      &--erase {
+      font-size: 16px;
-        background-image: url('/images/close-gray.svg');
+      display: flex;
-        background-color: unset;
+      align-items: center;
-        width: 0.75rem;
+      justify-content: center;
-        height: 0.75rem;
-        margin: 0 0.25rem;
-      }
-
-      &--qrcode {
-        background-image: url('/images/qr-blue.svg');
-        background-color: unset;
-        width: 1.5rem;
-        height: 1.5rem;
-        margin: 0 0.25rem;
-      }
     }
 
     &--valid {
       border-color: var(--color-primary-default);
 
       .ens-input__wrapper {
-        &__status-icon {
-          background-image: url('/images/check-green-solid.svg');
-        }
-
         &__input {
           @extend %col-nowrap;