Updating arrows for account menu scroll and signature request (#14138)

app/images/icons/down-arrow.svg

@@ -1 +0,0 @@
-<svg fill="none" height="27" viewBox="0 0 27 27" width="27" xmlns="http://www.w3.org/2000/svg"><circle cx="13.5" cy="13.5" fill="#fff" fill-opacity=".25" r="13" stroke="#dcdde6"/><path d="m19.2 14.1-.7-.7-4.4 4.4v-10.8h-1v10.8l-4.4-4.4-.7.7 5.1 5.1.5.5.5-.5z" fill="#dcdde6"/></svg>

ui/components/app/account-menu/account-menu.component.js

@@ -278,12 +278,7 @@ export default class AccountMenu extends Component {
         className="account-menu__scroll-button"
         onClick={this.handleScrollDown}
       >
-        <img
-          src="./images/icons/down-arrow.svg"
-          width="28"
-          height="28"
-          alt={this.context.t('scrollDown')}
-        />
+        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
       </div>
     );
   }

ui/components/app/account-menu/index.scss

@@ -224,7 +224,9 @@
     height: 28px;
     width: 28px;
     border-radius: 14px;
-    background: var(--color-text-default);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-alternative);
+    color: var(--color-icon-default);
     z-index: 201;
     cursor: pointer;
     opacity: 0.8;

ui/components/app/signature-request/signature-request-message/index.scss

@@ -63,7 +63,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--color-background-alternative);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-background-alternative);
+    color: var(--color-icon-default);
     position: absolute;
     right: 24px;
     bottom: 12px;

ui/components/app/signature-request/signature-request-message/signature-request-message.component.js

@@ -77,12 +77,7 @@ export default class SignatureRequestMessage extends PureComponent {
         className="signature-request-message__scroll-button"
         data-testid="signature-request-scroll-button"
       >
-        <img
-          src="./images/icons/down-arrow.svg"
-          width="28"
-          height="28"
-          alt={this.context.t('scrollDown')}
-        />
+        <i className="fa fa-arrow-down" title={this.context.t('scrollDown')} />
       </div>
     );
   }