Update NeoPass beta test copy & widen the net a bit

I also wrote up some explainer text for the NeoPass option, too!

app/assets/stylesheets/devise/sessions/new.sass

@@ -0,0 +1,84 @@
+@import "../../partials/clean/constants"
+
+body.devise-sessions, body.devise-sessions-new
+	#title
+		text-align: center
+		font-size: 2.5rem
+
+	.login-options
+		display: flex
+		margin-block: 3em
+
+		section
+			flex: 1 1 0
+			padding-block: 1em
+			display: flex
+			flex-direction: column
+			justify-content: center
+			align-items: center
+
+			&:not(:last-of-type)
+				border-right: 1px solid $module-border-color
+				margin-right: 1em
+				padding-right: 1em
+
+		.login-option-neopass
+			text-align: center
+
+			header
+				font-weight: bold
+				font-size: 125%
+				margin-bottom: .5em
+
+			.neopass-explanation
+				font-size: 85%
+
+				summary
+					cursor: pointer
+					margin-bottom: 1em
+
+	.login-form
+		margin-bottom: 1em
+
+		.field
+			margin-bottom: .75em
+
+		.input-field label
+			font-weight: bold
+
+		.actions
+			display: flex
+			align-items: center
+			gap: .5em
+
+			.remember-me
+				display: flex
+				align-items: center
+				gap: .25em
+				font-size: 85%
+
+				input[type=checkbox]
+					height: 1em
+					width: 1em
+
+	.login-links
+		font-size: 85%
+		display: flex
+		gap: .5em
+
+	.log-in-with-neopass-button
+		background: linear-gradient(#ebb233, #f6e250, #ebb233)
+		color: #111
+		font-size: 1rem
+		text-shadow: none
+		font-family: "Arial Black", sans-serif
+		margin-bottom: 1em
+
+		&:hover
+			color: #111 // override default DTI styles
+			filter: brightness(105%)
+
+		.neopass-icon
+			vertical-align: middle
+			height: 2em
+			width: 2em

app/views/devise/sessions/new.html.erb

@@ -1,38 +1,68 @@
-<h2>Log in</h2>
+<% title "Log into Dress to Impress" %>
 
-<% if can_use_neopass %>
+<div class="login-options">
-  🌟✨🌟✨🌟✨🌟✨🌟
+  <section class="login-option-password">
-  <br />
+    <%= form_with(model: resource, url: session_path(resource_name),
-  <%= button_to "Log in with NeoPass",
+                  class: "login-form") do |f| %>
-                auth_user_neopass_omniauth_authorize_path(intent: "login"),
+      <div class="field input-field">
-                data: {turbo: false} # Turbo can't handle this redirect!
+        <%= f.label :name, 'DTI Username' %><br />
-  %>
-  🌟✨🌟✨🌟✨🌟✨🌟
-  <br />
-  <br />
-<% end %>
-
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
-  <div class="field">
-    <%= f.label :name, 'Username' %><br />
         <%= f.text_field :name, autofocus: true, autocomplete: "username" %>
       </div>
 
-  <div class="field">
+      <div class="field input-field">
-    <%= f.label :password %><br />
+        <%= f.label :password, "DTI Password" %><br />
         <%= f.password_field :password, autocomplete: "current-password" %>
       </div>
 
-  <% if devise_mapping.rememberable? %>
+      <div class="actions">
-    <div class="field">
+        <%= f.submit "Log in" %>
+        <div class="remember-me">
           <%= f.check_box :remember_me %>
           <%= f.label :remember_me %>
         </div>
-  <% end %>
-
-  <div class="actions">
-    <%= f.submit "Log in" %>
       </div>
     <% end %>
 
-<%= render "devise/shared/links" %>
+    <div class="login-links">
+      <%= link_to "Sign up", new_auth_user_path %>
+      <%= link_to "Forgot your password?", new_auth_user_password_path %>
+    </div>
+  </section>
+
+  <% if can_use_neopass %>
+    <section class="login-option-neopass">
+      <header>Have a NeoPass?</header>
+
+      <%= button_to auth_user_neopass_omniauth_authorize_path(intent: "login"),
+                    data: {turbo: false}, class: "log-in-with-neopass-button" do
+      %>
+        Log in with
+        <%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
+      <% end %>
+
+      <details class="neopass-explanation">
+        <summary>How does it work?</summary>
+        <p>
+          If this is your first time using NeoPass at Dress to Impress, we'll
+          create a new DTI account for you automatically!
+        </p>
+        <p>
+          You'll be asked for 3 permissions: <em>OpenID</em> and
+          <em>Email</em> tell us who you are, and
+          <em>Linkage</em> tells us your Neopets username.
+        </p>
+        <p>
+          After that, you'll be able to one-click log in here, any time!
+        </p>
+        <p>
+          To connect an existing DTI account, don't start here! Log in with
+          your password first, then check the Settings page.
+        </p>
+      </details>
+    </section>
+  <% end %>
+</div>
+
+<% content_for :stylesheets do %>
+  <%= stylesheet_link_tag "devise/sessions/new" %>
+<% end %>

app/views/outfits/new.html.haml

@@ -18,11 +18,12 @@
       %br
       = link_to "Here's what's coming and why.", about_neopass_path
 
-    - if @neopass_test_group < 25
+    - if @neopass_test_group < 50
       %p
-        %strong ➡️ We're starting limited testing today!
+        %strong ➡️ Seeking beta testers, please!
-        = link_to "Here's the secret info if you'd like to take a look!",
+        = link_to "Check out the secret testing info",
           "https://forms.gle/hEkw5bXY1W4YhUZb7"
+        and let us know how it goes!
 
 #outfit-forms
   - localized_cache :action_suffix => 'outfit_forms_intro' do