From 8a7147756473bbb3c16fdc335ca1f19af134cf37 Mon Sep 17 00:00:00 2001
From: Patrick Smith <patrick+dds@promptworks.com>
Date: Sat, 12 Jan 2019 10:54:05 -0500
Subject: [PATCH] Fix up buttons on TO get started page

---
 styles/sections/_task_order.scss           | 17 +++++++++++++++++
 templates/task_orders/new/get_started.html | 15 +++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 951b93c0..f4d3141c 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -18,6 +18,23 @@
   .task-order-help__icon {
     @include icon-size(48);
   }
+
+  .task-order-get-started__actions {
+    .task-order-get-started__button-row {
+      position: relative;
+
+      .icon-link {
+        position: absolute;
+        left: 50%;
+        top: 2.5rem;
+        margin-left: -23rem;
+      }
+    }
+
+    p {
+      max-width: 27rem;
+    }
+  }
 }
 
 .task-order-summary {
diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html
index 55faf0d4..46be8a89 100644
--- a/templates/task_orders/new/get_started.html
+++ b/templates/task_orders/new/get_started.html
@@ -53,10 +53,17 @@
     </div>
   </div>
 
-  <div class='action-group'>
-    <a href='{{ url_for("task_orders.new", screen=1) }}' class='usa-button usa-button-big'>Let's do cloud!</a>
-    <div>Create a JEDI cloud application portfolio & start building a task order</div>
-    <a href='{{ request.referrer }}' class='col action-group__action'>Cancel</a>
+  <div class="task-order-get-started__actions">
+    <div class="task-order-get-started__button-row">
+      <a href="{{ request.referrer or url_for("atst.home") }}" class="icon-link">
+        {{ Icon("caret_left") }}
+        <span>Cancel</span>
+      </a>
+      <a href="{{ url_for("task_orders.new", screen=1) }}" class="usa-button usa-button-big">Let's do cloud!</a>
+    </div>
+    <div>
+      <p class="centered">Create a JEDI cloud application portfolio & start building a task order</p>
+    </div>
   </div>
 </div>
 {% endblock %}