Update tailwind scaffold styling

- Add dark mode specific styling
- Update flash message styling
- Remove rendering flash and notifications in the layout html

Author: joekrump

app/views/shared/_flash_notice.html.erb

@@ -2,6 +2,6 @@
   <nav class="flex flex-wrap items-center justify-between px-3 py-3 bg-gray-100 lg:px-10 dark:bg-slate-900">
     <%= link_to "Rails + Vue", root_path, class: "text-2xl font-bold text-gray-900 dark:text-green-600 dark:hover:text-green-200" %>
 
-    <%= link_to "Pandas", pandas_path, class: "text-xl font-bold text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200" %>
+    <%= link_to "Pandas", pandas_path, class: "text-xl font-bold text-purple-600 dark:text-purple-500 dark:text-purple-400 hover:text-purple-200 dark:hover:text-purple-200" %>
   </nav>
 </header>

app/views/shared/_header.html.erb

@@ -24,10 +24,10 @@
 -%>
 <%%= form_with(model: <%= model_resource_name %>, class: "contents") do |form| %>
   <%% if <%= singular_table_name %>.errors.any? %>
-    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
-      <h2><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
+    <div id="error_explanation" class="bg-red-700 px-2 py-4 mt-2 mx-auto font-sans font-medium text-white rounded-lg">
+      <h2 class="text-lg mb-2"><%%= pluralize(<%= singular_table_name %>.errors.count, "error") %> prohibited this <%= singular_table_name %> from being saved:</h2>
 
-      <ul>
+      <ul class="list-disc list-inside ml-1">
         <%% <%= singular_table_name %>.errors.each do |error| %>
           <li><%%= error.full_message %></li>
         <%% end %>
@@ -44,24 +44,24 @@
 
 <div class="my-5">
     <%%= form.label :password_confirmation %>
-    <%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%%= form.password_field :password_confirmation, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full dark:bg-gray-900 dark:border-gray-600" %>
 <% elsif attribute.attachments? -%>
     <%%= form.label :<%= attribute.column_name %> %>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full dark:bg-gray-900 dark:border-gray-600" %>
 <% else -%>
     <%%= form.label :<%= attribute.column_name %> %>
 <% if attribute.field_type == :text_area -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full dark:bg-gray-900 dark:border-gray-600" %>
 <% elsif attribute.field_type == :check_box -%>
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block mt-2 h-5 w-5" %>
 <% else -%>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
+    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full dark:bg-gray-900 dark:border-gray-600" %>
 <% end -%>
 <% end -%>
   </div>
 
 <% end -%>
   <div class="inline">
-    <%%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
+    <%%= form.submit class: "rounded-lg py-3 px-5 bg-green-600 hover:bg-green-800 dark:hover:bg-green-500 text-white inline-block font-medium" %>
   </div>
 <%% end %>

lib/generators/tailwindcss/scaffold/templates/_form.html.erb.tt

@@ -22,11 +22,11 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -%>
-<div class="mx-auto md:w-2/3 w-full">
+<div class="w-full">
   <h1 class="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
 
   <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
 
-  <%%= link_to "Show this <%= human_name.downcase %>", @<%= singular_table_name %>, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to "Show this <%= human_name.downcase %>", @<%= singular_table_name %>, class: "text-purple-600 dark:text-purple-500 ml-5 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
+  <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper %>_path, class: "text-purple-600 dark:text-purple-500 ml-5 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
 </div>

lib/generators/tailwindcss/scaffold/templates/edit.html.erb.tt

@@ -24,12 +24,14 @@
 -%>
 <div class="w-full">
   <%% if notice.present? %>
-    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
+    <div class="bg-green-700 rounded-lg mb-4">
+      <p class="container px-2 py-4 mx-auto font-sans font-medium text-center text-white rounded" id="notice"><%%= notice %></p>
+    </div>
   <%% end %>
 
   <div class="flex justify-between items-center">
     <h1 class="font-bold text-4xl"><%= human_name.pluralize %></h1>
-    <%%= link_to 'New <%= human_name.downcase %>', new_<%= singular_route_name %>_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
+    <%%= link_to 'New <%= human_name.downcase %>', new_<%= singular_route_name %>_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium hover:bg-blue-800 dark:hover:bg-blue-500" %>
   </div>
 
   <div id="<%= plural_table_name %>" class="min-w-full">

lib/generators/tailwindcss/scaffold/templates/index.html.erb.tt

@@ -22,10 +22,10 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -%>
-<div class="mx-auto md:w-2/3 w-full">
+<div class="w-full">
   <h1 class="font-bold text-4xl">New <%= human_name.downcase %></h1>
 
   <%%= render "form", <%= singular_table_name %>: @<%= singular_table_name %> %>
 
-  <%%= link_to 'Back to <%= human_name.pluralize.downcase %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+  <%%= link_to 'Back to <%= human_name.pluralize.downcase %>', <%= index_helper %>_path, class: "text-purple-600 dark:text-purple-500 ml-5 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
 </div>

lib/generators/tailwindcss/scaffold/templates/new.html.erb.tt

@@ -25,7 +25,7 @@
 <div id="<%%= dom_id <%= singular_name %> %>">
 <% attributes.reject(&:password_digest?).each do |attribute| -%>
   <p class="my-5">
-    <strong class="block font-medium mb-1"><%= attribute.human_name %>:</strong>
+    <strong class="block font-bold mb-1"><%= attribute.human_name %>:</strong>
 <% if attribute.attachment? -%>
     <%%= link_to <%= singular_name %>.<%= attribute.column_name %>.filename, <%= singular_name %>.<%= attribute.column_name %> if <%= singular_name %>.<%= attribute.column_name %>.attached? %>
 <% elsif attribute.attachments? -%>
@@ -39,8 +39,8 @@
 
 <% end -%>
   <%% if action_name != "show" %>
-    <%%= link_to "Show this <%= human_name.downcase %>", <%= singular_name %>, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
-    <%%= link_to 'Edit this <%= human_name.downcase %>', edit_<%= singular_name %>_path(<%= singular_name %>), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
+    <%%= link_to "Show this <%= human_name.downcase %>", <%= singular_name %>, class: "text-purple-600 dark:text-purple-500 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
+    <%%= link_to 'Edit this <%= human_name.downcase %>', edit_<%= singular_name %>_path(<%= singular_name %>), class: "text-purple-600 dark:text-purple-500 rounded-lg py-3 ml-5 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
     <hr class="mt-6">
   <%% end %>
 </div>

lib/generators/tailwindcss/scaffold/templates/partial.html.erb.tt

@@ -22,18 +22,20 @@
 # OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -%>
-<div class="mx-auto md:w-2/3 w-full flex">
+<div class="w-full">
   <div class="mx-auto">
     <%% if notice.present? %>
-      <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%%= notice %></p>
+      <div class="bg-green-700 rounded-lg mb-4">
+        <p class="container px-2 py-4 mx-auto font-sans font-medium text-center text-white" id="notice"><%%= notice %></p>
+      </div>
     <%% end %>
 
     <%%= render @<%= singular_table_name %> %>
 
-    <%%= link_to 'Edit this <%= singular_table_name %>', edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%%= link_to 'Edit this <%= singular_table_name %>', edit_<%= singular_table_name %>_path(@<%= singular_table_name %>), class: "text-purple-600 dark:text-purple-500 mt-2 pr-5 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
     <div class="inline-block ml-2">
-      <%%= button_to 'Destroy this <%= singular_table_name %>', <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-gray-100 font-medium" %>
+      <%%= button_to 'Delete this <%= singular_table_name %>', <%= singular_table_name %>_path(@<%= singular_table_name %>), method: :delete, class: "mt-2 rounded-lg py-3 px-5 bg-red-100 dark:bg-red-900 font-medium cursor-pointer hover:bg-red-200 dark:hover:bg-red-800" %>
     </div>
-    <%%= link_to 'Back to <%= plural_table_name %>', <%= index_helper %>_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
+    <%%= link_to 'Back to <%= plural_table_name %>', <%= index_helper %>_path, class: "text-purple-600 dark:text-purple-500 ml-2 ml-5 rounded-lg py-3 inline-block font-medium hover:text-purple-800 dark:hover:text-purple-400" %>
   </div>
 </div>

lib/generators/tailwindcss/scaffold/templates/show.html.erb.tt

@@ -1,7 +1,11 @@
 import type { Config } from "tailwindcss";
 
 export default {
-  content: ["./app/views/**/*.html.erb", "./app/frontend/**/*.vue"],
+  content: [
+    "./app/views/**/*.html.erb",
+    "./app/frontend/**/*.vue",
+    "./lib/**/*.html.erb.tt",
+  ],
   theme: {
     fontFamily: {
       sans: ["Graphik", "sans-serif"],