From fc421ca41e92a688126c4ce353e24d6ab3ea8374 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 3 Aug 2022 21:49:21 -0400
Subject: [PATCH] UX: update register admin wizard page styles (#17785)

---
 app/assets/stylesheets/wizard.scss            | 23 +++++++++++++++++++
 .../finish_installation/register.html.erb     | 20 ++++++++--------
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 3c3195c909c..a7c1dfb2fb8 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -39,6 +39,7 @@ body.wizard {
   background-size: 110vw 110vh; // crops better than cover at various viewport sizes
   background-repeat: no-repeat;
   background-position: bottom;
+  background-color: var(--secondary);
   color: var(--primary-very-high);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@@ -681,3 +682,25 @@ body.wizard {
     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);
+  }
+}
diff --git a/app/views/finish_installation/register.html.erb b/app/views/finish_installation/register.html.erb
index ec54e51fc77..ddfe6d698af 100644
--- a/app/views/finish_installation/register.html.erb
+++ b/app/views/finish_installation/register.html.erb
@@ -1,44 +1,44 @@
 <h1><%= t 'finish_installation.register.title' %></h1>
 
 <%- 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">
-        <span class="label-value"><%= t 'js.user.email.title' %></span>
+        <span class="wizard-container__label"><%= t 'js.user.email.title' %></span>
       </label>
 
       <div class='input-area'>
         <!--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-->
       </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">
-        <span class="label-value"><%= t 'js.user.username.title' %></span>
+        <span class="wizard-container__label"><%= t 'js.user.username.title' %></span>
       </label>
 
       <div class='wizard-container__description'><%= t 'js.user.username.instructions' %></div>
 
       <div class='input-area'>
-        <%= text_field_tag(:username, params[:username]) %>
+        <%= text_field_tag(:username, params[:username], class:"wizard-container__text-input") %>
       </div>
       <%- @user.errors[:username].each do |e| %>
         <div class='field-error-description'><%= e.to_s %></div>
       <%- end %>
     </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">
-        <span class="label-value"><%= t 'js.user.password.title' %></span>
+        <span class="wizard-container__label"><%= t 'js.user.password.title' %></span>
       </label>
 
       <div class='wizard-container__description'><%= t 'js.user.password.instructions', count: SiteSetting.min_admin_password_length  %></div>
 
       <div class='input-area'>
-        <%= password_field_tag(:password, params[:password]) %>
+        <%= password_field_tag(:password, params[:password], class:"wizard-container__text-input") %>
       </div>
       <% @user.errors[:password].each do |e| %>
         <div class='field-error-description'><%= e.to_s %></div>