Bootstrap5 Update

assets/css/admin.scss

@@ -1,6 +1,6 @@
-@import "../node_modules/bootstrap/dist/css/bootstrap.css";
-@import "../node_modules/admin-lte/dist/css/adminlte.css";
-@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "~admin-lte/dist/css/adminlte.css";
+@import "~@fortawesome/fontawesome-free/css/all.css";
 
  .popover{
         max-width:100%;

assets/css/app.scss

@@ -1,5 +1,4 @@
-@import "custom";
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap";
 @import "../static/vendored/css/bootstrap-toc.css";
 @import "../node_modules/@fortawesome/fontawesome-free/css/all.css";
 @import "../node_modules/@yaireo/tagify/src/tagify";
@@ -26,7 +25,23 @@ h6 {
     font-weight: 400;
 }
 
+a {
+    text-decoration: none;
+}
 
+a,
+a.h1,
+a.h2,
+a.h3,
+a.h4,
+a.h5,
+a.h6 {
+    color: var(--bs-link-color);
+}
+
+.fc a {
+    color: inherit;
+}
 
 section {
     overflow: hidden;
@@ -46,20 +61,20 @@ section {
 }
 
 .btn-primary {
-    border-color: var(--primary);
-    background: var(--primary);
+    border-color: var(--bs-primary);
+    background: var(--bs-primary);
 }
 
 .btn-primary.active {
     background: #444;
 }
 
 .bg-brand-light {
-    background: var(--light);
+    background: var(--bs-light);
 }
 
 .bg-brand {
-    background-color: var(--dark);
+    background-color: var(--bs-dark);
 }
 
 

assets/css/bootstrap.scss

@@ -0,0 +1,20 @@
+/* Bootstrap 5 overrides :
+   See https://getbootstrap.com/docs/5.0/customize/sass/ for details
+*/
+
+$primary: #4CA9E7;
+$dark: #1F2C34;
+$light: #f8f5f6;
+
+// Component active state colors
+$component-active-color: $dark;
+$component-active-bg: $light;
+
+// Display font sizes
+$display-4-size: 3rem;
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/bootstrap";

assets/js/admin.js

@@ -1,20 +1,17 @@
-import css from "../css/admin.scss"
-import "phoenix_html"
-import "jquery"
-import 'bootstrap'
-import 'admin-lte'
-import 'popper.js'
-
-$('[data-toggle="tooltip"]').tooltip();
+import css from "../css/admin.scss";
+import "phoenix_html";
+import "jquery";
+import "bootstrap";
+import "admin-lte";
 
+// $('[data-bs-toggle="tooltip"]').tooltip();
 
 export default class App {
   constructor() {
-
-    $(document).ready( function () {
-        $("[data-toggle='popover']").popover({container: "body", html: true, animation: false })
+    $(document).ready(function () {
+      $("[data-bs-toggle='popover']").popover({ container: "body", html: true, animation: false });
     });
   }
 }
 
-window.app = new App()
+window.app = new App();

assets/js/calendar.js

@@ -107,7 +107,7 @@ document.addEventListener('DOMContentLoaded', function() {
         let calendar = new Calendar(calendarEl, {
             plugins: [listPlugin, dayGridPlugin, bootstrapPlugin],
             navLinks: navLinks,
-            themeSystem: 'bootstrap',
+            themeSystem: 'bootstrap5',
             timeZone: "local",
             views: {
                 listMonth: {