From cbaedf55e13844667b2ab1cc9a43f14f24a56730 Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 23 Mar 2022 08:48:48 -0700
Subject: [PATCH] Dark mode: Removing double and single arrows svg icons for
 confirm-page-container-navigation (#14136)

---
 app/images/double-arrow.svg                   |  5 ---
 app/images/single-arrow.svg                   |  3 --
 ...irm-page-container-navigation.component.js | 32 +++++++------------
 .../index.scss                                |  7 ++--
 4 files changed, 17 insertions(+), 30 deletions(-)
 delete mode 100644 app/images/double-arrow.svg
 delete mode 100644 app/images/single-arrow.svg

diff --git a/app/images/double-arrow.svg b/app/images/double-arrow.svg
deleted file mode 100644
index db13703e7..000000000
--- a/app/images/double-arrow.svg
+++ /dev/null
@@ -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>
diff --git a/app/images/single-arrow.svg b/app/images/single-arrow.svg
deleted file mode 100644
index 2939fb606..000000000
--- a/app/images/single-arrow.svg
+++ /dev/null
@@ -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>
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
index 8cc0985fb..6c7bb981b 100755
--- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/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="" />
-        </div>
-        <div
+          <i className="fa fa-angle-double-left fa-2x" />
+        </button>
+        <button
           className="confirm-page-container-navigation__arrow"
           data-testid="previous-page"
           onClick={() => onNextTx(prevTxId)}
         >
-          <img src="./images/single-arrow.svg" alt="" />
-        </div>
+          <i className="fa fa-angle-left fa-2x" />
+        </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
-            className="confirm-page-container-navigation__imageflip"
-            src="./images/single-arrow.svg"
-            alt=""
-          />
-        </div>
-        <div
+          <i className="fa fa-angle-right fa-2x" />
+        </button>
+        <button
           className="confirm-page-container-navigation__arrow"
           data-testid="last-page"
           onClick={() => onNextTx(lastTx)}
         >
-          <img
-            className="confirm-page-container-navigation__imageflip"
-            src="./images/double-arrow.svg"
-            alt=""
-          />
-        </div>
+          <i className="fa fa-angle-double-right fa-2x" />
+        </button>
       </div>
     </div>
   );
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
index 258e79cd8..93ed2e962 100755
--- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/index.scss
+++ b/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-right: 5px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background: none;
+    border: none;
+    color: var(--color-icon-default);
   }
 
   &__arrow:hover {