From 9556939dd340140781e610f9f796cfeaa80a8e3f Mon Sep 17 00:00:00 2001
From: Jane Sandberg <js7389@princeton.edu>
Date: Tue, 20 Aug 2024 14:06:20 -0700
Subject: [PATCH] Turn some links into buttons

---
 app/assets/stylesheets/application.scss           |  1 +
 app/assets/stylesheets/lockers.scss               |  8 ++++++++
 app/views/locker_applications/assign.html.erb     |  4 +++-
 .../awaiting_assignment.html.erb                  |  5 ++++-
 app/views/locker_applications/show.html.erb       |  8 +++++---
 app/views/locker_assignments/_form.html.erb       |  1 +
 app/views/lockers/edit.html.erb                   | 15 +++++----------
 app/views/lockers/index.html.erb                  |  4 +++-
 app/views/lockers/new.html.erb                    |  4 +++-
 app/views/lockers/show.html.erb                   |  8 ++++----
 app/views/shared/_related_actions.html.erb        |  3 +++
 app/views/study_room_assignments/index.html.erb   |  4 +++-
 app/views/study_room_assignments/new.html.erb     |  4 +++-
 app/views/study_rooms/index.html.erb              |  4 +++-
 app/views/study_rooms/new.html.erb                |  4 +++-
 app/views/study_rooms/show.html.erb               |  6 ++++--
 16 files changed, 56 insertions(+), 27 deletions(-)
 create mode 100644 app/views/shared/_related_actions.html.erb

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 87ad8dd..cfbd9f9 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -17,3 +17,4 @@
 @import "card";
 @import "home_page";
 @import "locker_applications";
+@import "lockers";
diff --git a/app/assets/stylesheets/lockers.scss b/app/assets/stylesheets/lockers.scss
index e878f64..21b4624 100644
--- a/app/assets/stylesheets/lockers.scss
+++ b/app/assets/stylesheets/lockers.scss
@@ -1,3 +1,11 @@
 // Place all the styles related to the Lockers controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+main.lux {
+    margin-bottom: var(--space-base);
+}
+
+nav.lux-wrapper.button-well {
+    margin-top: var(--space-small);
+    margin-bottom: var(--space-small);
+}
diff --git a/app/views/locker_applications/assign.html.erb b/app/views/locker_applications/assign.html.erb
index 6008f2c..f99d2b8 100644
--- a/app/views/locker_applications/assign.html.erb
+++ b/app/views/locker_applications/assign.html.erb
@@ -7,4 +7,6 @@ Assign application
 
 <%= render '/locker_assignments/form', locker_assignment: @locker_assignment %>
 
-<%= link_to 'Back', awaiting_assignment_locker_applications_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= awaiting_assignment_locker_applications_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/locker_applications/awaiting_assignment.html.erb b/app/views/locker_applications/awaiting_assignment.html.erb
index abe6410..585818a 100644
--- a/app/views/locker_applications/awaiting_assignment.html.erb
+++ b/app/views/locker_applications/awaiting_assignment.html.erb
@@ -19,4 +19,7 @@ Applications awaiting assignment
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'Firestone Library Locker Application', new_locker_application_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_locker_application_path %>" variation="button solid">New Locker Application</lux-hyperlink>
+<% end %>
+
diff --git a/app/views/locker_applications/show.html.erb b/app/views/locker_applications/show.html.erb
index 2e36431..df82c68 100644
--- a/app/views/locker_applications/show.html.erb
+++ b/app/views/locker_applications/show.html.erb
@@ -7,7 +7,9 @@ View application
 
 <%= render 'view', locker_application: @locker_application %>
 
-<% if @locker_application.building == current_user&.building %>
-  <%= link_to 'Edit', edit_locker_application_path(@locker_application) %> |
+<%= render layout: '/shared/related_actions' do %>
+  <% if @locker_application.building == current_user&.building %>
+    <lux-hyperlink href="<%= edit_locker_application_path(@locker_application) %>" variation="button solid">Edit</lux-hyperlink>
+  <% end %>
+  <lux-hyperlink href="<%= locker_applications_path %>" variation="button solid">Back</lux-hyperlink>
 <% end %>
-<%= link_to 'Back', locker_applications_path %>
diff --git a/app/views/locker_assignments/_form.html.erb b/app/views/locker_assignments/_form.html.erb
index 32c10e0..61a7775 100644
--- a/app/views/locker_assignments/_form.html.erb
+++ b/app/views/locker_assignments/_form.html.erb
@@ -56,4 +56,5 @@
       <lux-input-button type="submit" variation="solid">Submit Locker Assignment</lux-input-button>
     </lux-grid-item>
   </lux-grid-container>
+  </lux-card>
 <% end %>
diff --git a/app/views/lockers/edit.html.erb b/app/views/lockers/edit.html.erb
index 6c79d5e..7dc7b37 100644
--- a/app/views/lockers/edit.html.erb
+++ b/app/views/lockers/edit.html.erb
@@ -3,13 +3,8 @@ Editing Locker
 <% end %>
 <lux-card size="full-width"><lux-heading level="h1">Editing Locker</lux-heading></lux-card>
 <%= render 'form', locker: @locker %>
-<lux-card size="medium">
-  <lux-grid-container>
-    <lux-grid-item columns="lg-6 md-6 sm-6">
-      <%= link_to 'Show', @locker %>
-    </lux-grid-item>
-    <lux-grid-item columns="lg-6 md-6 sm-6">
-      <%= link_to 'Back', lockers_path %>
-    </lux-grid-item>
-  </lux-grid-container>
-</lux-card>
+
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= locker_path(@locker) %>" variation="button solid">Show</lux-hyperlink>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/index.html.erb b/app/views/lockers/index.html.erb
index 6aa6a13..8ed934a 100644
--- a/app/views/lockers/index.html.erb
+++ b/app/views/lockers/index.html.erb
@@ -26,4 +26,6 @@
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'New Locker', new_locker_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_locker_path %>" variation="button solid">New Locker</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/new.html.erb b/app/views/lockers/new.html.erb
index d8145f6..f41564f 100644
--- a/app/views/lockers/new.html.erb
+++ b/app/views/lockers/new.html.erb
@@ -4,4 +4,6 @@ New Locker
 <lux-card size="full-width"><lux-heading level="h1">New Locker</lux-heading></lux-card>
 <%= render 'form', locker: @locker %>
 
-<%= link_to 'Back', lockers_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/lockers/show.html.erb b/app/views/lockers/show.html.erb
index 4e892ec..103adf6 100644
--- a/app/views/lockers/show.html.erb
+++ b/app/views/lockers/show.html.erb
@@ -56,12 +56,12 @@ Locker <%=@locker.location %>
       <strong>Notes:</strong>
       <span><%= @locker.notes %></span>
     </lux-grid-item>
-    <lux-grid-item columns="lg-12 md-12 sm-12">
-      <%= link_to 'Edit', edit_locker_path(@locker) %>
-      <%= link_to 'Back', lockers_path %>
-    </lux-grid-item>
    </lux-grid-container>
 </lux-card>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= edit_locker_path(@locker) %>" variation="button solid">Edit</lux-hyperlink>
+  <lux-hyperlink href="<%= lockers_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
 <% if @locker.current_assignment.present? %>
 <lux-card size="full-width">
   <lux-heading level="h2" size="h4">Currently Assigned to Applicant</lux-heading>
diff --git a/app/views/shared/_related_actions.html.erb b/app/views/shared/_related_actions.html.erb
new file mode 100644
index 0000000..14e395c
--- /dev/null
+++ b/app/views/shared/_related_actions.html.erb
@@ -0,0 +1,3 @@
+<lux-wrapper class="button-well" type="nav">
+  <%= yield %>
+</lux-wrapper>
diff --git a/app/views/study_room_assignments/index.html.erb b/app/views/study_room_assignments/index.html.erb
index 2876e14..13d7741 100644
--- a/app/views/study_room_assignments/index.html.erb
+++ b/app/views/study_room_assignments/index.html.erb
@@ -38,4 +38,6 @@ Study Room Assignments
 <%== pagy_nav(@pagy) %>
 
 
-<%= link_to 'New Study Room Assignment', new_study_room_assignment_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_study_room_assignment_path %>" variation="button solid">New Study Room Assignment</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_room_assignments/new.html.erb b/app/views/study_room_assignments/new.html.erb
index f1fdf8c..e6cb4f2 100644
--- a/app/views/study_room_assignments/new.html.erb
+++ b/app/views/study_room_assignments/new.html.erb
@@ -5,4 +5,6 @@ New Study Room Assignment
 
 <%= render 'form', study_room_assignment: @study_room_assignment %>
 
-<%= link_to 'Back', study_room_assignments_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= study_room_assignments_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/index.html.erb b/app/views/study_rooms/index.html.erb
index 4338c10..12459c7 100644
--- a/app/views/study_rooms/index.html.erb
+++ b/app/views/study_rooms/index.html.erb
@@ -25,4 +25,6 @@ Study Rooms
 <%# Note the double equals sign "==" which marks the output as trusted and html safe: %>
 <%== pagy_nav(@pagy) %>
 
-<%= link_to 'New Study Room', new_study_room_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= new_study_room_path %>" variation="button solid">New Study Room</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/new.html.erb b/app/views/study_rooms/new.html.erb
index c338949..d6db598 100644
--- a/app/views/study_rooms/new.html.erb
+++ b/app/views/study_rooms/new.html.erb
@@ -5,4 +5,6 @@ New Study Room
 
 <%= render 'form', study_room: @study_room %>
 
-<%= link_to 'Back', study_rooms_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= study_rooms_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>
diff --git a/app/views/study_rooms/show.html.erb b/app/views/study_rooms/show.html.erb
index 51ea413..73633eb 100644
--- a/app/views/study_rooms/show.html.erb
+++ b/app/views/study_rooms/show.html.erb
@@ -20,5 +20,7 @@
   <%= @study_room.notes %>
 </p>
 
-<%= link_to 'Edit', edit_study_room_path(@study_room) %> |
-<%= link_to 'Back', study_rooms_path %>
+<%= render layout: '/shared/related_actions' do %>
+  <lux-hyperlink href="<%= edit_study_room_path(@study_room) %>" variation="button solid">Edit</lux-hyperlink>
+  <lux-hyperlink href="<%= study_rooms_path %>" variation="button solid">Back</lux-hyperlink>
+<% end %>