Move reset buttons to corresponding forms

app/assets/images/pictograms/email-sync-outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M3 4C1.9 4 1 4.9 1 6V18C1 19.1 1.9 20 3 20H13.5A6.5 6.5 0 0 1 13 18H3V8L11 13L19 8V11A6.5 6.5 0 0 1 19.5 11A6.5 6.5 0 0 1 21 11.18V6C21 4.9 20.1 4 19 4H3M3 6H19L11 11L3 6M19 12L16.75 14.25L19 16.5V15C20.38 15 21.5 16.12 21.5 17.5C21.5 17.9 21.41 18.28 21.24 18.62L22.33 19.71C22.75 19.08 23 18.32 23 17.5C23 15.29 21.21 13.5 19 13.5V12M15.67 15.29C15.25 15.92 15 16.68 15 17.5C15 19.71 16.79 21.5 19 21.5V23L21.25 20.75L19 18.5V20C17.62 20 16.5 18.88 16.5 17.5C16.5 17.1 16.59 16.72 16.76 16.38L15.67 15.29Z" /></svg>

app/assets/stylesheets/application.css

@@ -61,7 +61,12 @@ input[type=checkbox]:checked {
   height: 2.1rem;
   margin: 0.5rem 0;
 }
-.application-menu a,
+.application-menu .image-button {
+  float: right;
+  margin-left: 0.8rem;
+}
+
+.image-button,
 input[type=submit] {
   align-items: center;
   border: 1px solid;
@@ -71,21 +76,19 @@ input[type=submit] {
   color: #a0a0a0;
   display: flex;
   fill: #a0a0a0;
-  float: right;
   font-size: 0.8rem;
   font-weight: bold;
-  margin-left: 0.8rem;
   padding: 0.4rem;
   text-decoration: none;
 }
-.application-menu a svg {
+.image-button svg {
   height: 1.3rem;
   padding-right: 0.4rem;
   width: 1.3rem;
 }
-.application-menu a.active,
-.application-menu a:hover,
-.application-menu a:hover:focus-visible,
+.image-button.active,
+.image-button:hover,
+.image-button:hover:focus-visible,
 input[type=submit]:hover,
 input[type=submit]:hover:focus-visible {
   background-color: #009ade;
@@ -94,14 +97,18 @@ input[type=submit]:hover:focus-visible {
   cursor: pointer;
   fill: white;
 }
-.application-menu a:focus-visible,
+.image-button:focus-visible,
 input[type=submit]:focus-visible {
   background-color: #f3f3f3;
 }
-.application-menu a.active:focus-visible {
+.image-button.active:focus-visible {
   background-color: #006c9b;
   border-color: #006c9b;
 }
+.image-button.centered {
+  margin: 0 auto;
+  width: fit-content;
+}
 
 .flashes {
   height: 2.1rem;
@@ -172,6 +179,6 @@ form em {
 form input[type=submit] {
   float: none;
   font-size: 1rem;
-  margin: 1.5rem auto;
+  margin: 1.5rem auto 0 auto;
   padding: 0.75rem;
 }

app/helpers/application_helper.rb

@@ -38,11 +38,11 @@ module ApplicationHelper
     form_for(record, **options, &-> (f) { f.table_form_for(&block) })
   end
 
-  def image_link_to(name, image = nil, options = nil, html_options = nil)
+  def image_link_to(name, image = nil, options = nil, html_options = {})
     return "" if html_options.delete(:unless_current) && (url_for(options) == request.path)
 
     name = svg_tag("pictograms/#{image}.svg#icon") + name if image
-    link_to name, options, html_options
+    link_to name, options, html_options.merge!(class: "image-button") { |k, v1, v2| "#{v1} #{v2}" }
   end
 
   def svg_tag(source, options = {})

app/views/layouts/application.html.erb

@@ -18,8 +18,6 @@
       <% else %>
         <%= image_link_to t(:register), "account-plus-outline", new_user_registration_path,
               unless_current: true %>
-        <%= image_link_to t(:recover_password), "lock-reset", new_user_password_path,
-              unless_current: true %>
         <%= image_link_to t(:sign_in), "login", new_user_session_path, unless_current: true %>
       <% end %>
     </div>

app/views/users/registrations/new.html.erb

@@ -10,3 +10,6 @@
 
   <%= f.submit t(:register) %>
 <% end %>
+<%= content_tag :p, t(:or), style: "text-align: center;" %>
+<%= image_link_to t(:resend_confirmation), "email-sync-outline", new_user_confirmation_path,
+  class: "centered" %>

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

@@ -8,3 +8,5 @@
 
   <%= f.submit t(:sign_in) %>
 <% end %>
+<%= content_tag :p, t(:or), style: "text-align: center;" %>
+<%= image_link_to t(:recover_password), "lock-reset", new_user_password_path, class: "centered" %>