From 2cc6cee5425a1ae90cdcfdb4f8f45a6f0f0cc6e3 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 11 Apr 2024 08:46:35 -0700
Subject: [PATCH] Style "Log in with NeoPass" button to better match Neopets

Got the icon and background style from Neopets.com! I didn't quite copy
the whole button style, both because getting it to play nice with our
existing styles didn't *immediately* work, but also because I think
this works out as a really good compromise between our two styles
anyway!
---
 app/assets/images/neopass_icon.png             | Bin 0 -> 3260 bytes
 .../stylesheets/devise/sessions/new.sass       |  17 +++++++++++++++++
 app/views/devise/sessions/new.html.erb         |  17 +++++++++--------
 3 files changed, 26 insertions(+), 8 deletions(-)
 create mode 100644 app/assets/images/neopass_icon.png
 create mode 100644 app/assets/stylesheets/devise/sessions/new.sass

diff --git a/app/assets/images/neopass_icon.png b/app/assets/images/neopass_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..70a2590e239b51b1b123f6833c45edaadd2e1ce9
GIT binary patch
literal 3260
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

literal 0
HcmV?d00001

diff --git a/app/assets/stylesheets/devise/sessions/new.sass b/app/assets/stylesheets/devise/sessions/new.sass
new file mode 100644
index 00000000..356c355a
--- /dev/null
+++ b/app/assets/stylesheets/devise/sessions/new.sass
@@ -0,0 +1,17 @@
+body.devise-sessions, body.devise-sessions-new
+	.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
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 87928f91..53774e6b 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,15 +1,12 @@
 <h2>Log in</h2>
 
 <% if can_use_neopass %>
-  🌟✨🌟✨🌟✨🌟✨🌟
-  <br />
-  <%= button_to "Log in with NeoPass",
-                auth_user_neopass_omniauth_authorize_path(intent: "login"),
-                data: {turbo: false} # Turbo can't handle this redirect!
+  <%= button_to auth_user_neopass_omniauth_authorize_path(intent: "login"),
+                data: {turbo: false}, class: "log-in-with-neopass-button" do
   %>
-  🌟✨🌟✨🌟✨🌟✨🌟
-  <br />
-  <br />
+    Log in with
+    <%= image_tag "neopass_icon.png", alt: "NeoPass", class: "neopass-icon" %>
+  <% end %>
 <% end %>
 
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
@@ -36,3 +33,7 @@
 <% end %>
 
 <%= render "devise/shared/links" %>
+
+<% content_for :stylesheets do %>
+  <%= stylesheet_link_tag "devise/sessions/new" %>
+<% end %>