Make open registration banner styling consistent with other banners

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Proposal

Change styling of "Open registration is enabled on your instance" alert banner to be consistent and complementary with existing callouts/banners.

image

image

Open registration callout

HTML

<div class="container-fluid container-limited limit-container-width gl-pt-5!">
<div class="gl-alert gl-alert-warning js-registration-enabled-callout" data-dismiss-endpoint="/-/user_callouts" data-feature-id="registration_enabled_callout" role="alert">
<svg class="s16 gl-alert-icon" data-testid="warning-icon"><use xlink:href="/assets/icons-2fb014ce49a3e87b1e47aae4b8adfa35e6b59f49e1474a18a2518ad2285bce08.svg#warning"></use></svg>
<button aria-label="Close" class="gl-alert-dismiss js-close" data-testid="close-registration-enabled-callout" type="button">
<svg class="s16" data-testid="close-icon"><use xlink:href="/assets/icons-2fb014ce49a3e87b1e47aae4b8adfa35e6b59f49e1474a18a2518ad2285bce08.svg#close"></use></svg>
</button>
<div class="gl-alert-title">
Open registration is enabled on your instance.
</div>
<div class="gl-alert-body">
<a href="/help/user/admin_area/settings/sign_up_restrictions">Learn more</a> about how you can customize / disable registration on your instance.
</div>
<div class="gl-alert-actions">
<a class="btn gl-alert-action btn-info btn-md gl-button" href="/admin/application_settings/general#js-signup-settings"><span class="gl-button-text">
View setting
</span>
</a></div>
</div>
</div>

*CSS (I believe this coming from scss files here: https://gitlab.com/gitlab-org/gitlab/-/tree/master/app/assets/stylesheets. not sure exactly where its coming from)

.content-wrapper .container-fluid, .content-wrapper .container-sm, .content-wrapper .container-md, .content-wrapper .container-lg, .content-wrapper .container-xl {
    padding: 0 16px;
}
.container-limited.limit-container-width {
    max-width: 990px;
}
.gl-pt-5\! {
    padding-top: 1rem !important;
}
.content-wrapper .container-fluid {
    padding: 0 16px;
}
.container-limited {
    max-width: 1280px;
}

Proposal/Ideas

Conditionally change the styling of this banner based on view or page

If viewing first page after sign-in as root user, keep it as-is.

If viewing a project or page with a sidebar, have the open registration callout take up the entire horizontal space (as the "Add SSH key" callout does)

To do this in haml/html, maybe we could change the CSS class of this banner based on the context.

<div class="gl-alert gl-alert-warning">
<div class="js-registration-enabled-callout" data-dismiss-endpoint="/-/user_callouts" data-feature-id="registration_enabled_callout" role="alert">

1

Alternatively, maybe we could to conditionally change the styling itself to remove all padding and max-width CSS/SCSS for pages/views with sidebars.

2

Edited by 🤖 GitLab Bot 🤖