From 13ab14204392d77c876d437ad5268241b4392627 Mon Sep 17 00:00:00 2001
From: Buck Doyle <buck@hashicorp.com>
Date: Wed, 10 Feb 2021 07:47:04 -0600
Subject: [PATCH] Change CSS for two-step inline text

This is a less magic number-y approach than before, but since
the buttons were previously spaced with an actual space
character rather than CSS, some margins are needed to replicate
that in the flexbox layout.
---
 ui/app/components/two-step-button.js          |  3 +-
 ui/app/styles/components/two-step-button.scss | 31 +++++++++----------
 .../job-page/parts/latest-deployment.hbs      |  1 -
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/ui/app/components/two-step-button.js b/ui/app/components/two-step-button.js
index 3cb115d2cec1..4bf934eadb45 100644
--- a/ui/app/components/two-step-button.js
+++ b/ui/app/components/two-step-button.js
@@ -4,11 +4,12 @@ import { next } from '@ember/runloop';
 import { equal } from '@ember/object/computed';
 import { task, waitForEvent } from 'ember-concurrency';
 import RSVP from 'rsvp';
-import { classNames } from '@ember-decorators/component';
+import { classNames, classNameBindings } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
 @classic
 @classNames('two-step-button')
+@classNameBindings('inlineText:has-inline-text')
 export default class TwoStepButton extends Component {
   idleText = '';
   cancelText = '';
diff --git a/ui/app/styles/components/two-step-button.scss b/ui/app/styles/components/two-step-button.scss
index 03ad779b99f6..c4dfcbb2665f 100644
--- a/ui/app/styles/components/two-step-button.scss
+++ b/ui/app/styles/components/two-step-button.scss
@@ -5,6 +5,20 @@
   font-size: $body-size;
   line-height: 1;
 
+  &.has-inline-text {
+    display: inline-flex;
+    align-items: center;
+
+    button {
+      margin-left: 0.5ch;
+    }
+
+    .confirmation-text {
+      position: static;
+      margin-right: 0.5ch;
+    }
+  }
+
   .confirmation-text {
     position: absolute;
     left: 0;
@@ -20,23 +34,6 @@
       right: 0;
     }
 
-    &.has-text-inline {
-      top: unset;
-      bottom: 0;
-      padding-bottom: 6.462px;
-
-      left: 100%;
-      right: unset;
-      padding-left: 0.5rem;
-
-      &.is-right-aligned {
-        padding-left: 0;
-        padding-right: 0.5rem;
-        left: unset;
-        right: 100%;
-      }
-    }
-
     &.inherit-color {
       color: currentColor;
     }
diff --git a/ui/app/templates/components/job-page/parts/latest-deployment.hbs b/ui/app/templates/components/job-page/parts/latest-deployment.hbs
index 192646ecc383..f11111a34eeb 100644
--- a/ui/app/templates/components/job-page/parts/latest-deployment.hbs
+++ b/ui/app/templates/components/job-page/parts/latest-deployment.hbs
@@ -26,7 +26,6 @@
               @cancelText="Cancel"
               @confirmText="Yes, Fail"
               @confirmationMessage="Are you sure?"
-              @alignRight={{true}}
               @inlineText={{true}}
               @awaitingConfirmation={{this.fail.isRunning}}
               @disabled={{this.fail.isRunning}}