From 046ec2eaee342db8c310f59aedb777351779343e Mon Sep 17 00:00:00 2001
From: Vaidehi Joshi <vaidehi.sj@gmail.com>
Date: Wed, 22 Apr 2020 16:54:46 -0700
Subject: [PATCH] Use back button svg icon in onboarding slides (#7455)
 [deploy]

---
 .../stylesheets/preact/onboarding-modal.scss  |  9 +++++
 .../__snapshots__/Onboarding.test.jsx.snap    | 40 +++++++++++++++++--
 .../onboarding/components/Navigation.jsx      | 10 ++++-
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index 6cde4de3e..3ba8a75d3 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -126,6 +126,15 @@
       @extend .crayons-btn;
     }
 
+    .back-button {
+      @extend .crayons-btn;
+      @extend .crayons-btn--ghost;
+      @extend .crayons-btn--icon;
+
+      align-items: center;
+      display: flex;
+    }
+
     .stepper {
       display: flex;
       align-items: center;
diff --git a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap
index b0dfaeffd..2e76eaa11 100644
--- a/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap
+++ b/app/javascript/onboarding/__tests__/__snapshots__/Onboarding.test.jsx.snap
@@ -12,7 +12,15 @@ preact-render-spy (1 nodes)
           class="back-button"
           type="button"
         >
-          Back
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            class="crayons-icon"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3.828 7H16v2H3.828l5.364 5.364-1.414 1.414L0 8 7.778.222l1.414 1.414L3.828 7z"></path>
+          </svg>
         </button>
         <div class="stepper">
           <span class="dot active"></span>
@@ -86,7 +94,15 @@ preact-render-spy (1 nodes)
           class="back-button"
           type="button"
         >
-          Back
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            class="crayons-icon"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3.828 7H16v2H3.828l5.364 5.364-1.414 1.414L0 8 7.778.222l1.414 1.414L3.828 7z"></path>
+          </svg>
         </button>
         <div class="stepper">
           <span class="dot active"></span>
@@ -184,7 +200,15 @@ preact-render-spy (1 nodes)
           class="back-button"
           type="button"
         >
-          Back
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            class="crayons-icon"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3.828 7H16v2H3.828l5.364 5.364-1.414 1.414L0 8 7.778.222l1.414 1.414L3.828 7z"></path>
+          </svg>
         </button>
         <div class="stepper">
           <span class="dot active"></span>
@@ -393,7 +417,15 @@ preact-render-spy (1 nodes)
           class="back-button"
           type="button"
         >
-          Back
+          <svg
+            width="16"
+            height="16"
+            fill="none"
+            class="crayons-icon"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M3.828 7H16v2H3.828l5.364 5.364-1.414 1.414L0 8 7.778.222l1.414 1.414L3.828 7z"></path>
+          </svg>
         </button>
         <div class="stepper">
           <span class="dot active"></span>
diff --git a/app/javascript/onboarding/components/Navigation.jsx b/app/javascript/onboarding/components/Navigation.jsx
index 54700d1c6..f74576038 100644
--- a/app/javascript/onboarding/components/Navigation.jsx
+++ b/app/javascript/onboarding/components/Navigation.jsx
@@ -42,7 +42,15 @@ class Navigation extends Component {
         >
           {!hidePrev && (
             <button onClick={prev} className="back-button" type="button">
-              Back
+              <svg
+                width="16"
+                height="16"
+                fill="none"
+                className="crayons-icon"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M3.828 7H16v2H3.828l5.364 5.364-1.414 1.414L0 8 7.778.222l1.414 1.414L3.828 7z" />
+              </svg>
             </button>
           )}