Dark mode: Removing double and single arrows svg icons for confirm-page-container-navigation (#14136)

app/images/double-arrow.svg

@@ -1,5 +0,0 @@
-<svg height="8" width="12" xmlns="http://www.w3.org/2000/svg">
-    <g fill="#5f5c5d" fill-rule="evenodd">
-        <path d="M12 0v8L6 4zM6 0v8L0 4z"/>
-    </g>
-</svg>

app/images/single-arrow.svg

@@ -1,3 +0,0 @@
-<svg height="8" width="6" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6 0v8L0 4z" fill="#5f5c5d" fill-rule="evenodd"/>
-</svg>

ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js

@@ -28,20 +28,20 @@ const ConfirmPageContainerNavigation = (props) => {
           visibility: prevTxId ? 'initial' : 'hidden',
         }}
       >
-        <div
+        <button
           className="confirm-page-container-navigation__arrow"
           data-testid="first-page"
           onClick={() => onNextTx(firstTx)}
         >
-          <img src="./images/double-arrow.svg" alt="" />
+          <i className="fa fa-angle-double-left fa-2x" />
-        </div>
+        </button>
-        <div
+        <button
           className="confirm-page-container-navigation__arrow"
           data-testid="previous-page"
           onClick={() => onNextTx(prevTxId)}
         >
-          <img src="./images/single-arrow.svg" alt="" />
+          <i className="fa fa-angle-left fa-2x" />
-        </div>
+        </button>
       </div>
       <div className="confirm-page-container-navigation__textcontainer">
         <div className="confirm-page-container-navigation__navtext">
@@ -57,28 +57,20 @@ const ConfirmPageContainerNavigation = (props) => {
           visibility: nextTxId ? 'initial' : 'hidden',
         }}
       >
-        <div
+        <button
           className="confirm-page-container-navigation__arrow"
           data-testid="next-page"
           onClick={() => onNextTx(nextTxId)}
         >
-          <img
+          <i className="fa fa-angle-right fa-2x" />
-            className="confirm-page-container-navigation__imageflip"
+        </button>
-            src="./images/single-arrow.svg"
+        <button
-            alt=""
-          />
-        </div>
-        <div
           className="confirm-page-container-navigation__arrow"
           data-testid="last-page"
           onClick={() => onNextTx(lastTx)}
         >
-          <img
+          <i className="fa fa-angle-double-right fa-2x" />
-            className="confirm-page-container-navigation__imageflip"
+        </button>
-            src="./images/double-arrow.svg"
-            alt=""
-          />
-        </div>
       </div>
     </div>
   );

ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss

@@ -13,8 +13,11 @@
   &__arrow {
     cursor: pointer;
     display: flex;
-    padding-left: 5px;
+    padding-left: 4px;
-    padding-right: 5px;
+    padding-right: 4px;
+    background: none;
+    border: none;
+    color: var(--color-icon-default);
   }
 
   &__arrow:hover {