Dl/font awesome fix maybe

app/assets/stylesheets/application.css

@@ -0,0 +1,86 @@
+/* General avatar styles */
+.avatar-container {
+  width: 8rem;
+  height: 8rem;
+  overflow: hidden;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Enhanced rainbow border animation */
+@keyframes rainbow-border {
+  0% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
+  14% { box-shadow: 0 0 0 4px orange, 0 0 10px orange; }
+  28% { box-shadow: 0 0 0 4px yellow, 0 0 10px yellow; }
+  42% { box-shadow: 0 0 0 4px green, 0 0 10px green; }
+  56% { box-shadow: 0 0 0 4px blue, 0 0 10px blue; }
+  70% { box-shadow: 0 0 0 4px indigo, 0 0 10px indigo; }
+  84% { box-shadow: 0 0 0 4px violet, 0 0 10px violet; }
+  100% { box-shadow: 0 0 0 4px red, 0 0 10px red; }
+}
+
+/* Enhanced rainbow overlay animation */
+@keyframes rainbow-overlay {
+  0% { filter: hue-rotate(0deg) brightness(1); }
+  50% { filter: hue-rotate(180deg) brightness(1.2); }
+  100% { filter: hue-rotate(360deg) brightness(1); }
+}
+
+/* Pulsing animation */
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.avatar-rainbow-border,
+.avatar-rainbow-overlay {
+  animation: rainbow-border 5s linear infinite, pulse 2s ease-in-out infinite;
+  position: relative;
+}
+
+.avatar-rainbow-overlay::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  bottom: -5px;
+  left: -5px;
+  background: linear-gradient(45deg, 
+    rgba(255,0,0,0.7), 
+    rgba(255,165,0,0.7), 
+    rgba(255,255,0,0.7), 
+    rgba(0,128,0,0.7), 
+    rgba(0,0,255,0.7), 
+    rgba(75,0,130,0.7), 
+    rgba(238,130,238,0.7)
+  );
+  border-radius: 50%;
+  z-index: 1;
+  animation: rainbow-overlay 5s linear infinite;
+  mix-blend-mode: overlay;
+  opacity: 0.8;
+}
+
+/* Border color styles */
+.avatar-border-white,
+.avatar-border-black,
+.avatar-rainbow-border,
+.avatar-rainbow-overlay {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.avatar-border-white {
+  box-shadow: 0 0 0 4px white, 0 0 10px rgba(255,255,255,0.5);
+}
+
+.avatar-border-black {
+  box-shadow: 0 0 0 4px black, 0 0 10px rgba(0,0,0,0.5);
+}

app/javascript/entrypoints/application.js

@@ -3,9 +3,13 @@ import "chartkick/chart.js";
 import "flowbite";
 
 // Import your stylesheet
-import "../../assets/stylesheets/application.css.scss";
+import "../../assets/stylesheets/application.css";
 import "../../assets/stylesheets/application.tailwind.css";
 
+// Import Font Awesome JS and CSS
+import '@fortawesome/fontawesome-free/js/all.min.js';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+
 Rails.start();
 
 console.log('Vite ⚡️ Rails');

app/views/layouts/application.html.erb

@@ -10,8 +10,6 @@
     <%= vite_client_tag %>
     <%= vite_javascript_tag 'application' %>
     <link rel="icon" href="/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
     <!-- Generic Open Graph Meta Tags (for general application pages) -->
     <%= tag.meta property: 'og:type', content: 'website' %>
     <%= tag.meta property: 'og:site_name', content: 'Linkarooie' %>

package.json

@@ -7,7 +7,6 @@
     "flowbite": "^2.4.1"
   },
   "devDependencies": {
-    "sass": "^1.78.0",
     "vite": "^5.3.5",
     "vite-plugin-ruby": "^5.0.0"
   }