UX: update register admin wizard page styles (#17785)

This commit is contained in:
Kris 2022-08-03 21:49:21 -04:00 committed by GitHub
parent 8177f45369
commit fc421ca41e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 10 deletions

View File

@ -39,6 +39,7 @@ body.wizard {
background-size: 110vw 110vh; // crops better than cover at various viewport sizes background-size: 110vw 110vh; // crops better than cover at various viewport sizes
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom; background-position: bottom;
background-color: var(--secondary);
color: var(--primary-very-high); color: var(--primary-very-high);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif; Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@ -681,3 +682,25 @@ body.wizard {
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
} }
} }
// Register admin page... /finish-installation/register
.wizard-container-contents.finish-installation {
.wizard-container__combobox {
background: var(--secondary);
color: var(--primary);
padding: 0.5em;
font-size: var(--font-up-1);
border-radius: 4px;
border: 1px solid var(--primary-low-mid);
margin-top: 0.25em;
}
.wizard-container__fields {
max-width: 500px;
}
.wizard-container__text-input {
color: var(--primary);
}
}

View File

@ -1,44 +1,44 @@
<h1><%= t 'finish_installation.register.title' %></h1> <h1><%= t 'finish_installation.register.title' %></h1>
<%- if @allowed_emails.present? %> <%- if @allowed_emails.present? %>
<%= form_tag(finish_installation_register_path) do %> <%= form_tag(finish_installation_register_path, class:"wizard-container__fields") do %>
<div class='wizard-container__input text-field'> <div class='wizard-container__input wizard-container__field text-field'>
<label for="email"> <label for="email">
<span class="label-value"><%= t 'js.user.email.title' %></span> <span class="wizard-container__label"><%= t 'js.user.email.title' %></span>
</label> </label>
<div class='input-area'> <div class='input-area'>
<!--email_off--> <!--email_off-->
<%= select_tag :email, options_for_select(@allowed_emails, selected: params[:email]), class: 'combobox' %> <%= select_tag :email, options_for_select(@allowed_emails, selected: params[:email]), class: 'combobox wizard-container__combobox' %>
<!--/email_off--> <!--/email_off-->
</div> </div>
</div> </div>
<div class='wizard-container__input text-field <% if @user.errors[:username].present? %>invalid<% end %>'> <div class='wizard-container__input wizard-container__field text-field <% if @user.errors[:username].present? %>invalid<% end %>'>
<label for="username"> <label for="username">
<span class="label-value"><%= t 'js.user.username.title' %></span> <span class="wizard-container__label"><%= t 'js.user.username.title' %></span>
</label> </label>
<div class='wizard-container__description'><%= t 'js.user.username.instructions' %></div> <div class='wizard-container__description'><%= t 'js.user.username.instructions' %></div>
<div class='input-area'> <div class='input-area'>
<%= text_field_tag(:username, params[:username]) %> <%= text_field_tag(:username, params[:username], class:"wizard-container__text-input") %>
</div> </div>
<%- @user.errors[:username].each do |e| %> <%- @user.errors[:username].each do |e| %>
<div class='field-error-description'><%= e.to_s %></div> <div class='field-error-description'><%= e.to_s %></div>
<%- end %> <%- end %>
</div> </div>
<div class='wizard-container__input text-field <% if @user.errors[:username].present? %>invalid<% end %>'> <div class='wizard-container__input wizard-container__field text-field <% if @user.errors[:username].present? %>invalid<% end %>'>
<label for="password"> <label for="password">
<span class="label-value"><%= t 'js.user.password.title' %></span> <span class="wizard-container__label"><%= t 'js.user.password.title' %></span>
</label> </label>
<div class='wizard-container__description'><%= t 'js.user.password.instructions', count: SiteSetting.min_admin_password_length %></div> <div class='wizard-container__description'><%= t 'js.user.password.instructions', count: SiteSetting.min_admin_password_length %></div>
<div class='input-area'> <div class='input-area'>
<%= password_field_tag(:password, params[:password]) %> <%= password_field_tag(:password, params[:password], class:"wizard-container__text-input") %>
</div> </div>
<% @user.errors[:password].each do |e| %> <% @user.errors[:password].each do |e| %>
<div class='field-error-description'><%= e.to_s %></div> <div class='field-error-description'><%= e.to_s %></div>