1 files changed, 34 insertions, 26 deletions
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
index c27d53f4351..35eb0b11e40 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlEmptyState, GlSprintf, GlLink, GlFormInputGroup, GlFormInput } from '@gitlab/ui';
 import { mapState, mapGetters } from 'vuex';
 import { s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -17,6 +17,8 @@ export default {
     GlEmptyState,
     GlSprintf,
     GlLink,
+    GlFormInputGroup,
+    GlFormInput,
   },
   i18n: {
     quickStart: QUICK_START,
@@ -43,10 +45,9 @@ export default {
   <gl-empty-state
     :title="s__('ContainerRegistry|There are no container images stored for this project')"
     :svg-path="config.noContainersImage"
-    class="container-message"
   >
     <template #description>
-      <p class="js-no-container-images-text">
+      <p>
         <gl-sprintf :message="$options.i18n.introText">
           <template #docLink="{content}">
             <gl-link :href="config.helpPagePath" target="_blank">{{ content }}</gl-link>
@@ -54,7 +55,7 @@ export default {
         </gl-sprintf>
       </p>
       <h5>{{ $options.i18n.quickStart }}</h5>
-      <p class="js-not-logged-in-to-registry-text">
+      <p>
         <gl-sprintf :message="$options.i18n.notLoggedInMessage">
           <template #twofaDocLink="{content}">
             <gl-link :href="config.twoFactorAuthHelpLink" target="_blank">{{ content }}</gl-link>
@@ -66,42 +67,49 @@ export default {
           </template>
         </gl-sprintf>
       </p>
-      <div class="input-group append-bottom-10">
-        <input :value="dockerLoginCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+      <gl-form-input-group class="gl-mb-4">
+        <gl-form-input
+          :value="dockerLoginCommand"
+          readonly
+          type="text"
+          class="gl-font-monospace!"
+        />
+        <template #append>
           <clipboard-button
             :text="dockerLoginCommand"
             :title="$options.i18n.copyLoginTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
-      <p></p>
-      <p>
+        </template>
+      </gl-form-input-group>
+      <p class="gl-mb-4">
         {{ $options.i18n.addImageText }}
       </p>
-
-      <div class="input-group append-bottom-10">
-        <input :value="dockerBuildCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+      <gl-form-input-group class="gl-mb-4 ">
+        <gl-form-input
+          :value="dockerBuildCommand"
+          readonly
+          type="text"
+          class="gl-font-monospace!"
+        />
+        <template #append>
           <clipboard-button
             :text="dockerBuildCommand"
             :title="$options.i18n.copyBuildTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
-
-      <div class="input-group">
-        <input :value="dockerPushCommand" type="text" class="form-control monospace" readonly />
-        <span class="input-group-append">
+        </template>
+      </gl-form-input-group>
+      <gl-form-input-group>
+        <gl-form-input :value="dockerPushCommand" readonly type="text" class="gl-font-monospace!" />
+        <template #append>
           <clipboard-button
             :text="dockerPushCommand"
             :title="$options.i18n.copyPushTitle"
-            class="input-group-text"
+            class="gl-m-0!"
           />
-        </span>
-      </div>
+        </template>
+      </gl-form-input-group>
     </template>
   </gl-empty-state>
 </template>