Merge pull request #94 from loftwah/dl/emerg-fix

remove fa import

app/assets/stylesheets/application.css

@@ -0,0 +1,42 @@
+@keyframes rainbow-pulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+@keyframes rainbow { 
+  0% { background-position: 0% 82% }
+  50% { background-position: 100% 19% }
+  100% { background-position: 0% 82% }
+}
+
+@keyframes hue-rotate {
+  0% { filter: hue-rotate(0deg); }
+  100% { filter: hue-rotate(360deg); }
+}
+
+.rainbow-border::before, .rainbow2-border::before {
+  content: '';
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  background: linear-gradient(
+    124deg,
+    #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840,
+    #1ddde8, #2b1de8, #dd00f3, #dd00f3
+  );
+  background-size: 1800% 1800%;
+  border-radius: 9999px;
+  animation: rainbow 18s ease infinite, rainbow-pulse 3s infinite;
+  z-index: 10;
+}
+
+.rainbow-border img, .rainbow2-border img {
+  position: relative;
+  z-index: 11;
+}
+
+.rainbow2-border img {
+  animation: hue-rotate 10s linear infinite;
+}

app/helpers/application_helper.rb

@@ -5,19 +5,6 @@ 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.scss";
+import "../../assets/stylesheets/application.css";
 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'] }
+  validates :avatar_border, inclusion: { in: ['white', 'black', 'none', 'rainbow', 'rainbow2'] }
 
   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']], @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'], ['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' %>
     </div>
 
     <div>

app/views/links/user_links.html.erb

@@ -7,17 +7,18 @@
     </div>
   <% end %>
   <div class="flex flex-col items-center <%= @user.banner_enabled && @user.banner.present? ? '-mt-16' : 'mt-8' %>">
-    <div class="relative">
+    <div class="relative w-24 h-24 <%= @user.avatar_border == 'rainbow' ? 'rainbow-border' : '' %> <%= @user.avatar_border == 'rainbow2' ? 'rainbow2-border' : '' %>">
       <% 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 border-4 #{avatar_border_class(@user.avatar_border)}", style: "width: 8rem; height: 8rem;" %>
+        <%= 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' : ''}" %>
       <% elsif @user.avatar.present? %>
-        <%= 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;" %>
+        <%= 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' : ''}" %>
       <% else %>
-        <%= 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;" %>
+        <%= 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' : ''}" %>
       <% 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,scss}', // Make sure all CSS and SCSS files are included
+    './app/assets/stylesheets/**/*.css',
   ],
   theme: {
     extend: {

package.json

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