Revert "remove fa import"

app/assets/stylesheets/application.css.scss

@@ -0,0 +1,25 @@
+/* Import Font Awesome */
+@import "font-awesome/scss/font-awesome";
+
+/* Import Tailwind CSS */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* Your custom animations and styles */
+@keyframes rainbow {
+  0%, 100% { border-color: red; }
+  14% { border-color: orange; }
+  28% { border-color: yellow; }
+  42% { border-color: green; }
+  56% { border-color: blue; }
+  70% { border-color: indigo; }
+  84% { border-color: violet; }
+}
+
+.animated-border {
+  border-width: 4px;
+  border-style: solid;
+  animation: rainbow 6s linear infinite;
+  border-radius: 50%; /* Ensure the avatar remains circular */
+}

app/helpers/application_helper.rb

@@ -5,6 +5,19 @@ def auto_link_urls(text)
     end.html_safe
   end
 
+  def avatar_border_class(border_preference)
+    case border_preference
+    when 'white'
+      'border-4 border-white'
+    when 'black'
+      'border-4 border-black'
+    when 'rainbow'
+      'animated-border'
+    else
+      ''
+    end
+  end  
+
   def format_referrer(referrer)
     return 'Direct' if referrer.blank?
 

app/javascript/entrypoints/application.js

@@ -2,7 +2,7 @@ import Rails from "@rails/ujs";
 import "chartkick/chart.js";
 import "flowbite";
 
-import "../../assets/stylesheets/application.css";
+import "../../assets/stylesheets/application.css.scss";
 import "../../assets/stylesheets/application.tailwind.css";
 
 Rails.start();

app/models/user.rb

@@ -14,7 +14,7 @@ class User < ApplicationRecord
   validates :username, uniqueness: true, allow_blank: true
   validates :full_name, presence: true
   validate :ensure_username_presence
-  validates :avatar_border, inclusion: { in: ['white', 'black', 'none', 'rainbow', 'rainbow2'] }
+  validates :avatar_border, inclusion: { in: ['white', 'black', 'none', 'rainbow'] }
 
   after_save :generate_open_graph_image, unless: -> { Rails.env.test? }
   after_save :download_and_store_avatar

app/views/devise/registrations/edit.html.erb

@@ -31,7 +31,7 @@
 
     <div>
       <%= f.label :avatar_border, class: 'block text-lime-200 font-semibold mb-2' %>
-      <%= f.select :avatar_border, options_for_select([['White', 'white'], ['Black', 'black'], ['None', 'none'], ['Rainbow', 'rainbow'], ['Rainbow2', 'rainbow2']], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
+      <%= f.select :avatar_border, options_for_select([['White', 'white'], ['Black', 'black'], ['None', 'none'], ['Rainbow', 'rainbow']], @user.avatar_border), {}, class: 'block w-full px-4 py-2 border border-gray-700 rounded bg-gray-900 text-white focus:outline-none focus:border-lime-500' %>
     </div>
 
     <div>

app/views/links/user_links.html.erb

@@ -7,18 +7,17 @@
     </div>
   <% end %>
   <div class="flex flex-col items-center <%= @user.banner_enabled && @user.banner.present? ? '-mt-16' : 'mt-8' %>">
-    <div class="relative w-24 h-24 <%= @user.avatar_border == 'rainbow' ? 'rainbow-border' : '' %> <%= @user.avatar_border == 'rainbow2' ? 'rainbow2-border' : '' %>">
+    <div class="relative">
       <% local_avatar_path = "/avatars/#{@user.username}_avatar#{File.extname(@user.avatar)}" %>
       <% if File.exist?(Rails.root.join('public' + local_avatar_path)) %>
-        <%= image_tag local_avatar_path, alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag local_avatar_path, alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% elsif @user.avatar.present? %>
-        <%= image_tag @user.avatar, alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag @user.avatar, alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% else %>
-        <%= image_tag "greg.jpg", alt: @user.email, class: "rounded-full object-cover w-full h-full #{'border-4' if @user.avatar_border != 'none' && !['rainbow', 'rainbow2'].include?(@user.avatar_border)} #{@user.avatar_border == 'white' ? 'border-white' : ''} #{@user.avatar_border == 'black' ? 'border-black' : ''}" %>
+        <%= image_tag "greg.jpg", alt: @user.email, class: "rounded-full object-cover border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
       <% end %>
     </div>
   </div>
-</div>
 
   <div class="mt-4 text-center">
     <h1 class="text-2xl font-bold text-white"><%= @user.full_name %></h1>

config/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}',
     './node_modules/flowbite/**/*.js',
-    './app/assets/stylesheets/**/*.css',
+    './app/assets/stylesheets/**/*.{css,scss}', // Make sure all CSS and SCSS files are included
   ],
   theme: {
     extend: {

package.json

@@ -8,6 +8,7 @@
     "tailwindcss": "^3.4.10"
   },
   "devDependencies": {
+    "sass": "^1.68.0",
     "vite": "^5.3.5",
     "vite-plugin-ruby": "^5.0.0"
   }