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!
This commit is contained in:
Emi Matchu 2024-04-11 08:46:35 -07:00
parent eb8e5d6df5
commit 2cc6cee542
3 changed files with 26 additions and 8 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -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

View file

@ -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 %>