1 files changed, 45 insertions, 34 deletions
diff --git a/app/assets/javascripts/projects/compare/components/app.vue b/app/assets/javascripts/projects/compare/components/app.vue
index 05bd0f1370b..d2fb524489e 100644
--- a/app/assets/javascripts/projects/compare/components/app.vue
+++ b/app/assets/javascripts/projects/compare/components/app.vue
@@ -1,12 +1,12 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
-import RevisionDropdown from './revision_dropdown.vue';
+import RevisionCard from './revision_card.vue';
 
 export default {
   csrf,
   components: {
-    RevisionDropdown,
+    RevisionCard,
     GlButton,
   },
   props: {
@@ -48,42 +48,53 @@ export default {
 <template>
   <form
     ref="form"
-    class="form-inline js-requires-input js-signature-container"
+    class="js-requires-input js-signature-container"
     method="POST"
     :action="projectCompareIndexPath"
   >
     <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
-    <revision-dropdown
-      :refs-project-path="refsProjectPath"
-      revision-text="Source"
-      params-name="to"
-      :params-branch="paramsTo"
-    />
-    <div class="compare-ellipsis gl-display-inline" data-testid="ellipsis">...</div>
-    <revision-dropdown
-      :refs-project-path="refsProjectPath"
-      revision-text="Target"
-      params-name="from"
-      :params-branch="paramsFrom"
-    />
-    <gl-button category="primary" variant="success" class="gl-ml-3" @click="onSubmit">
-      {{ s__('CompareRevisions|Compare') }}
-    </gl-button>
-    <a
-      v-if="projectMergeRequestPath"
-      :href="projectMergeRequestPath"
-      data-testid="projectMrButton"
-      class="btn btn-default gl-button gl-ml-3"
+    <div
+      class="gl-lg-flex-direction-row gl-lg-display-flex gl-align-items-center compare-revision-cards"
     >
-      {{ s__('CompareRevisions|View open merge request') }}
-    </a>
-    <a
-      v-else-if="createMrPath"
-      :href="createMrPath"
-      data-testid="createMrButton"
-      class="btn btn-default gl-button gl-ml-3"
-    >
-      {{ s__('CompareRevisions|Create merge request') }}
-    </a>
+      <revision-card
+        :refs-project-path="refsProjectPath"
+        revision-text="Source"
+        params-name="to"
+        :params-branch="paramsTo"
+      />
+      <div
+        class="compare-ellipsis gl-display-flex gl-justify-content-center gl-align-items-center gl-my-4 gl-md-my-0"
+        data-testid="ellipsis"
+      >
+        ...
+      </div>
+      <revision-card
+        :refs-project-path="refsProjectPath"
+        revision-text="Target"
+        params-name="from"
+        :params-branch="paramsFrom"
+      />
+    </div>
+    <div class="gl-mt-4">
+      <gl-button category="primary" variant="success" @click="onSubmit">
+        {{ s__('CompareRevisions|Compare') }}
+      </gl-button>
+      <gl-button
+        v-if="projectMergeRequestPath"
+        :href="projectMergeRequestPath"
+        data-testid="projectMrButton"
+        class="btn btn-default gl-button"
+      >
+        {{ s__('CompareRevisions|View open merge request') }}
+      </gl-button>
+      <gl-button
+        v-else-if="createMrPath"
+        :href="createMrPath"
+        data-testid="createMrButton"
+        class="btn btn-default gl-button"
+      >
+        {{ s__('CompareRevisions|Create merge request') }}
+      </gl-button>
+    </div>
   </form>
 </template>