diff options
Diffstat (limited to 'app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue')
-rw-r--r-- | app/assets/javascripts/registry/explorer/components/list_page/project_empty_state.vue | 60 |
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> |