Update card colors

jbigler · Mar 11, 2024 · 00eb652 · 00eb652
1 parent 097b437
commit 00eb652
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/app/models/card.rb b/app/models/card.rb
@@ -8,4 +8,12 @@ class Card < ApplicationRecord
   ranks :row_order, with_same: :list_id
 
   normalizes :color, with: -> { _1.downcase.gsub(/[[:space:]]/, "") }
+
+  def color_with_default
+    if !self.color || self.color == "none"
+      "gray"
+    else
+      self.color
+    end
+  end
 end
diff --git a/app/views/cards/_card.html.erb b/app/views/cards/_card.html.erb
@@ -3,7 +3,7 @@
         class="draggable" 
         data-sortable-update-url="<%= card_path(card) %>">
         <a href="<%= edit_card_path(card) %>" data-turbo-frame="modal">
-            <div class="block shadow-gray-500 max-w-sm p-3 m-2 bg-white border-2 border-<%= card.color %>-700 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-<%= card.color %>-700 dark:hover:bg-gray-700">
+            <div class="block shadow-gray-500 max-w-sm p-3 m-2 bg-white border-2 border-<%= card.color_with_default %>-700 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-<%= card.color_with_default  %>-400 dark:hover:bg-gray-700">
                 <p class="line-clamp-3 font-normal text-gray-700 dark:text-gray-400"><%= card.title %></p>
             </div>
         </a>

diff --git a/app/views/cards/_form.html.erb b/app/views/cards/_form.html.erb
@@ -27,7 +27,7 @@
 
   <div class="my-5">
     <%= form.label :color%>
-    <%= form.color_field :color class: "block shadow rounded-md border border-gray-500 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.color_field :color, class: "block shadow rounded-md border border-gray-500 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="inline">

diff --git a/config/tailwind.config.js b/config/tailwind.config.js
@@ -14,7 +14,18 @@ module.exports = {
       },
     },
   },
-  safelist: ['border-gray-700', 'border-red-700', 'border-green-700', 'border-blue-700', 'border-orange-700', 'border-violet-700'],
+  safelist: [
+    {
+      pattern: /border-[^/]+$/,
+      variants: [
+        'dark',
+        'hover',
+        'focus',
+        'dark:hover',
+        'dark:focus',
+        ,],
+    },
+  ],
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),