Dark Mode: more icon updates (#14064)

* Updating settings icons to use fontawesome and removing unused svgs

* Updating more icons to use font-awesome icons and removing unused svgs

app/images/address-book.svg

@@ -1 +0,0 @@
-<svg width="56" height="64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M54.5 20c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52V6c0-3.25-2.75-6-6-6H6C2.625 0 0 2.75 0 6v52c0 3.375 2.625 6 6 6h40c3.25 0 6-2.625 6-6v-6h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5c.75 0 1.5-.625 1.5-1.5v-5c0-.75-.75-1.5-1.5-1.5H52v-8h2.5zM26 16c4.375 0 8 3.625 8 8 0 4.5-3.625 8-8 8-4.5 0-8-3.5-8-8 0-4.375 3.5-8 8-8zm14 29.625C40 47 38.75 48 37.125 48H14.75c-1.5 0-2.75-1-2.75-2.375V43.25c0-4 3.75-7.25 8.375-7.25H21c1.5.75 3.125 1 5 1 1.75 0 3.375-.25 4.875-1h.625c4.625 0 8.5 3.25 8.5 7.25v2.375z" fill="#D6D9DC"/></svg>

app/images/alert-red.svg

@@ -1,9 +0,0 @@
-<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="8" cy="8" fill="#d0021b" r="8"/>
-        <g fill="#fff">
-            <rect height="7" rx="1" width="2" x="7" y="3"/>
-            <rect height="2" rx="1" width="2" x="7" y="11"/>
-        </g>
-    </g>
-</svg>

app/images/alert.svg

@@ -1,6 +0,0 @@
-<svg height="29" width="29" xmlns="http://www.w3.org/2000/svg">
-    <g fill="none" fill-rule="evenodd">
-        <circle cx="14.5" cy="14.5" fill="#605a1c" r="14.5"/>
-        <path d="M16 16.828h-2V7h2zM16 21h-2v-2h2z" fill="#fffcdb"/>
-    </g>
-</svg>

app/images/arrow-popout.svg

@@ -1,3 +0,0 @@
-<svg fill="none" height="10" width="10" xmlns="http://www.w3.org/2000/svg">
-    <path d="M8.676.642a.65.65 0 00-.072.006H4.793a.65.65 0 00-.57.975.65.65 0 00.57.322H7.12L.438 8.614a.647.647 0 00.286 1.096.65.65 0 00.632-.179L8.04 2.861v2.324a.648.648 0 00.977.57.648.648 0 00.322-.57V1.38a.647.647 0 00-.662-.737z" fill="#359bdd"/>
-</svg>

app/images/arrow-right.svg

@@ -1,3 +0,0 @@
-<svg height="21" width="25" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12.281.467a1.58 1.58 0 000 2.259l5.824 5.743H1.62a1.61 1.61 0 00-1.62 1.597v.001c0 .882.726 1.596 1.62 1.596h16.486l-5.824 5.745a1.58 1.58 0 000 2.258 1.637 1.637 0 002.29 0l9.734-9.6L14.571.467a1.637 1.637 0 00-2.29 0" fill="#5b5b5b" fill-rule="evenodd"/>
-</svg>

app/images/check_circle.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.75 8C15.75 3.75 12.25 0.25 8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8ZM7.09375 12.125C6.90625 12.3125 6.5625 12.3125 6.375 12.125L3.125 8.875C2.9375 8.6875 2.9375 8.34375 3.125 8.15625L3.84375 7.46875C4.03125 7.25 4.34375 7.25 4.53125 7.46875L6.75 9.65625L11.4375 4.96875C11.625 4.75 11.9375 4.75 12.125 4.96875L12.8438 5.65625C13.0312 5.84375 13.0312 6.1875 12.8438 6.375L7.09375 12.125Z" fill="#4CD964"/>
-</svg>

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js

@@ -4,11 +4,7 @@ import PropTypes from 'prop-types';
 const ConfirmPageContainerWarning = (props) => {
   return (
     <div className="confirm-page-container-warning">
-      <img
+      <i className="fa fa-info-circle confirm-page-container-warning__icon" />
-        className="confirm-page-container-warning__icon"
-        src="./images/alert.svg"
-        alt=""
-      />
       <div className="confirm-page-container-warning__warning">
         {props.warning}
       </div>

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import ConfirmPageContainerWarning from '.';
+
+export default {
+  title: 'Components/UI/ConfirmPageContainerWarning', // title should follow the folder structure location of the component. Don't use spaces.
+  id: __filename,
+  argTypes: {
+    warning: {
+      control: 'text',
+    },
+  },
+  args: {
+    warning: 'This is a warning',
+  },
+};
+
+export const DefaultStory = (args) => <ConfirmPageContainerWarning {...args} />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/index.scss

@@ -7,12 +7,13 @@
 
   &__icon {
     flex: 0 0 auto;
-    margin-right: 16px;
+    margin-right: 8px;
+    color: var(--color-warning-default);
   }
 
   &__warning {
     @include H7;
 
-    color: var(--color-warning-default);
+    color: var(--color-text-default);
   }
 }

ui/components/ui/error-message/error-message.component.js

@@ -7,11 +7,7 @@ const ErrorMessage = (props, context) => {
 
   return (
     <div className="error-message">
-      <img
+      <i className="fa fa-exclamation-circle error-message__icon" />
-        src="./images/alert-red.svg"
-        alt=""
-        className="error-message__icon"
-      />
       <div className="error-message__text">{error}</div>
     </div>
   );

ui/components/ui/error-message/index.scss

@@ -2,9 +2,9 @@
   @include H7;
 
   min-height: 32px;
-  border: 1px solid var(--Red-300);
+  border: 1px solid var(--color-error-default);
-  color: var(--ui-black);
+  color: var(--color-text-default);
-  background: var(--error-2);
+  background-color: var(--color-error-muted);
   border-radius: 8px;
   display: flex;
   justify-content: flex-start;
@@ -14,6 +14,7 @@
   &__icon {
     margin-right: 8px;
     flex: 0 0 auto;
+    color: var(--color-error-default);
   }
 
   &__text {

ui/components/ui/sender-to-recipient/index.scss

@@ -66,6 +66,10 @@
         display: flex;
         justify-content: center;
         align-items: center;
+
+        &__icon {
+          color: var(--color-icon-muted);
+        }
       }
 
       &__name {

ui/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -155,7 +155,7 @@ function Arrow({ variant }) {
   return variant === DEFAULT_VARIANT ? (
     <div className="sender-to-recipient__arrow-container">
       <div className="sender-to-recipient__arrow-circle">
-        <img height="15" width="15" src="./images/arrow-right.svg" alt="" />
+        <i className="fa fa-arrow-right sender-to-recipient__arrow-circle__icon" />
       </div>
     </div>
   ) : (

ui/pages/home/home.component.js

@@ -309,10 +309,7 @@ export default class Home extends PureComponent {
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
-                <img
+                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
-                  src="./images/check_circle.svg"
-                  className="home__new-network-notification-message--image"
-                />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}
@@ -334,10 +331,7 @@ export default class Home extends PureComponent {
             className="home__new-network-notification"
             message={
               <div className="home__new-network-notification-message">
-                <img
+                <i className="fa fa-check-circle home__new-network-notification-message--icon" />
-                  src="./images/check_circle.svg"
-                  className="home__new-network-notification-message--image"
-                />
                 <Typography
                   variant={TYPOGRAPHY.H7}
                   fontWeight={FONT_WEIGHT.NORMAL}

ui/pages/home/index.scss

@@ -141,9 +141,11 @@
   &__new-network-notification-message {
     display: flex;
     flex-direction: row;
+    align-items: center;
 
-    &--image {
+    &--icon {
-      margin-right: 10px;
+      margin-right: 8px;
+      color: var(--color-success-default);
     }
   }
 

ui/pages/settings/contact-list-tab/contact-list-tab.component.js

@@ -72,7 +72,10 @@ export default class ContactListTab extends Component {
     return (
       <div className="address-book__container">
         <div>
-          <img src="./images/address-book.svg" alt={t('addressBookIcon')} />
+          <i
+            className="fa fa-address-book fa-4x address-book__icon"
+            title={t('addressBookIcon')}
+          />
           <h4 className="address-book__title">{t('buildContactList')}</h4>
           <p className="address-book__sub-title">
             {t('addFriendsAndAddresses')}

ui/pages/settings/contact-list-tab/index.scss

@@ -67,6 +67,11 @@
     text-align: center;
   }
 
+  &__icon {
+    margin-bottom: 16px;
+    display: block;
+  }
+
   &__title {
     @include H4;