Upgrade to Bootstrap 5 and component library header/footer

Gemfile

@@ -106,5 +106,3 @@ end
 
 gem 'config'
 gem 'newrelic_rpm'
-
-gem "cssbundling-rails", "~> 1.1"

Gemfile.lock

@@ -130,8 +130,6 @@ GEM
       deep_merge (~> 1.2, >= 1.2.1)
     connection_pool (2.4.1)
     crass (1.0.6)
-    cssbundling-rails (1.4.1)
-      railties (>= 6.0.0)
     database_cleaner (2.0.2)
       database_cleaner-active_record (>= 2, < 3)
     database_cleaner-active_record (2.2.0)
@@ -412,7 +410,6 @@ DEPENDENCIES
   capistrano-rvm
   capybara (~> 3.0)
   config
-  cssbundling-rails (~> 1.1)
   database_cleaner
   debug
   dlss-capistrano

Procfile.dev

@@ -1,2 +1 @@
 web: unset PORT && bin/rails server
-css: yarn build:css --watch

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
 //= link_tree ../images
 //= link_directory ../javascripts .js
+//= link application.css
 //= link_tree ../builds

app/assets/javascripts/application.js

@@ -10,7 +10,6 @@
 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
 // GO AFTER THE REQUIRES BELOW.
 //
-//= require jquery3
+// require jquery3
 //= require rails-ujs
-//= require datatables
 //= require_tree .

app/assets/javascripts/modal.js

@@ -1,5 +1,4 @@
 // Adapted from https://github.com/projectblacklight/blacklight/blob/master/app/javascript/blacklight/modal.js
-//= require bootstrap
 
 Reserves = {};
 
@@ -27,9 +26,7 @@ Reserves.modal.modalAjaxClickLink = function(e) {
 Reserves.modal.onFailure = function(data) {
   var contents =  '<div class="modal-header">' +
             '<div class="modal-title">Network Error</div>' +
-            '<button type="button" class="Reserves-modal-close close" data-dismiss="modal" aria-label="Close">' +
-            '  <span aria-hidden="true">&times;</span>' +
-            '</button>';
+            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
   $(Reserves.modal.modalSelector).find('.modal-content').html(contents);
   $(Reserves.modal.modalSelector).modal('show');
 }

app/assets/stylesheets/application.css

@@ -0,0 +1,109 @@
+:root {
+  --stanford-fog-dark: #b6b1a9;
+  --stanford-cardinal-rgb: 143, 20, 20;
+}
+.bg-cardinal {
+  --bs-dark-rgb: var(--stanford-cardinal-rgb);
+}
+
+.bg-fog {
+  --bs-table-bg: var(--stanford-fog-dark);
+}
+
+.bg-dark.navbar .nav-item {
+  color: var(--bs-navbar-color);
+}
+
+#main-container {
+  /* keep the footer at the bottom */
+  min-height: calc(100vh - 441px);
+}
+
+#list-management {
+  min-width: 354px;
+}
+
+#item_list {
+  counter-reset: section;
+
+  background-color: var(--bs-table-bg);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+
+  .header {
+    height: 1rem;
+    background-color: var(--stanford-fog-dark);
+  }
+
+  .reserve {
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
+  .reserve:nth-child(even) {
+    background-color: rgba(var(--bs-emphasis-color-rgb), 0.05);
+  }
+
+  .num_copies {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    width: 12ch;
+  }
+
+  .loan-period {
+    width: auto;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+}
+
+.enumerator {
+  font-size: 2rem;
+  line-height: 2rem;
+  color: var(--stanford-fog-dark);
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  .counter {
+    &::before {
+      content: counter(section);
+      counter-increment: section;
+    }
+  }
+}
+
+#libraries {
+  width: 35ch;
+}
+
+.sent_date {
+  color: var(--stanford-cardinal);
+  font-size: 1.2em;
+}
+
+.changed {
+  border-left: 2px solid var(--stanford-cardinal);
+  border-right: 2px solid var(--stanford-cardinal);
+  border-bottom: 2px solid var(--bs-border-color);
+}
+
+#sw_url {
+  width: 400px;
+}
+
+#introduction {
+  border-left: 5px solid var(--stanford-fog-dark);
+  padding-left: 1rem;
+  max-width: 45em;
+}
+
+#all_courses {
+  width: 100%;
+}
+
+#all_courses #course_id {
+  white-space: nowrap;
+}
+#all_courses #instructor {
+  width: 35%;
+}