From e5ff6206c4720025b867325856bbe5e805382c64 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Mon, 13 Dec 2021 09:07:55 -0500
Subject: [PATCH] Add button wrapper for back button.

---
 src/ux-components/button-back/button-back.vue | 88 ++++++++++---------
 1 file changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 90301c42a..94364f6a6 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="button-back">
-    <div class="arrow-left"></div>
-    <div class="box"></div>
-  </div>
+  <button class="back-button-wrapper d-flex p-0">
+    <div class="button-back">
+      <div class="arrow-left"></div>
+      <div class="box"></div>
+    </div>
+</button>
 </template>
 
 <script>
@@ -12,47 +14,51 @@ export default {
 </script>
 
 <style lang="scss">
-.button-back {
-  display: inline-flex;
-  position: relative;
-  height: 18px;
-  width: 23px;
-  overflow: hidden;
-  .arrow-left {
-    position: absolute;
-    width: 18px;
+.back-button-wrapper {
+  border: none;
+  background: transparent;
+  .button-back {
+    display: inline-flex;
+    position: relative;
     height: 18px;
-    left: 4px;
-    background-color: $gray-550;
-    transform: rotate(45deg);
-    border-radius: 4px;
-  }
-  .box {
-    content: "";
-    position: absolute;
-    background: $gray-550;
-    height: 100%;
-    width: 11px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    left: 12px;
-    border-radius: 5px;
-    &:before, &:after {
+    width: 23px;
+    overflow: hidden;
+    .arrow-left {
       position: absolute;
-      left: 1px;
-      top: 3px;
-      content: " ";
-      height: 12px;
-      width: 2px;
-      background-color: $white;
-      border-radius: 2px;
-    }
-    &:before {
+      width: 18px;
+      height: 18px;
+      left: 4px;
+      background-color: $gray-550;
       transform: rotate(45deg);
+      border-radius: 4px;
     }
-    &:after {
-      transform: rotate(-45deg);
+    .box {
+      content: "";
+      position: absolute;
+      background: $gray-550;
+      height: 100%;
+      width: 11px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 12px;
+      border-radius: 5px;
+      &:before, &:after {
+        position: absolute;
+        left: 1px;
+        top: 3px;
+        content: " ";
+        height: 12px;
+        width: 2px;
+        background-color: $white;
+        border-radius: 2px;
+      }
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
     }
   }
 }