Add tailwind and styling for views

app/views/todos/_form.html.erb

@@ -1,42 +1,74 @@
-<%= form_with(model: todo) do |form| %>
+<%= form_with(model: todo, class: "space-y-6") do |form| %>
   <% if todo.errors.any? %>
-    <div style="color: red">
-      <h2><%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:</h2>
-
-      <ul>
-        <% todo.errors.each do |error| %>
-          <li><%= error.full_message %></li>
-        <% end %>
-      </ul>
+    <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">
+            <%= pluralize(todo.errors.count, "error") %> prohibited this todo from being saved:
+          </h3>
+          <div class="mt-2 text-sm text-red-700">
+            <ul class="list-disc pl-5 space-y-1">
+              <% todo.errors.each do |error| %>
+                <li><%= error.full_message %></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      </div>
     </div>
   <% end %>
 
   <div>
-    <%= form.label :name, style: "display: block" %>
-    <%= form.text_field :name %>
+    <%= form.label :name, class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.text_field :name, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+    </div>
   </div>
 
   <div>
-    <%= form.label :description, style: "display: block" %>
-    <%= form.textarea :description %>
+    <%= form.label :description, class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.text_area :description, rows: 4, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+      <p class="mt-2 text-sm text-gray-500">Brief description of what needs to be done.</p>
+    </div>
+  </div>
+
+  <div class="flex items-start">
+    <div class="flex items-center h-5">
+      <%= form.check_box :completed, class: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" %>
+    </div>
+    <div class="ml-3 text-sm">
+      <%= form.label :completed, class: "font-medium text-gray-700" %>
+      <p class="text-gray-500">Mark as completed if the task is done.</p>
+    </div>
   </div>
 
   <div>
-    <%= form.label :completed %>
-    <%= form.check_box :completed %>
+    <%= form.label :priority, class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.number_field :priority, in: 0..5, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+      <p class="mt-2 text-sm text-gray-500">Set a priority from 0 (lowest) to 5 (highest).</p>
+    </div>
   </div>
 
   <div>
-    <%= form.label :priority %>
-    <%= form.number_field :priority %>
+    <%= form.label :project_id, class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.collection_select :project_id, Project.all, :id, :name,
+                                 { prompt: "Select a project" },
+                                 { class: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" } %>
+    </div>
   </div>
 
-  <div>
-    <%= form.label :project_id %>
-    <%= form.collection_select :project_id, Project.all, :id, :name, prompt: "Select a project" %>
+  <div class="pt-5">
+    <div class="flex justify-end">
+      <%= link_to "Cancel", todos_path, class: "bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+      <%= form.submit class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    </div>
   </div>
-
-  <div>
-    <%= form.submit %>
-  </div>
-<% end %>
+<% end %>

app/views/todos/_todo.html.erb

@@ -1,26 +1,51 @@
-<div id="<%= dom_id todo %>">
-  <div>
-    <strong>Name:</strong>
-    <%= todo.name %>
+<div id="<%= dom_id todo %>" class="bg-white shadow overflow-hidden sm:rounded-lg hover:shadow-md transition-shadow">
+  <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
+    <h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center">
+      <% if todo.completed %>
+        <span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full bg-green-100">
+          <svg class="h-3.5 w-3.5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      <% else %>
+        <span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300"></span>
+      <% end %>
+      <%= todo.name %>
+    </h3>
+    <div class="flex space-x-2">
+      <% if todo.priority && todo.priority > 0 %>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+          Priority: <%= todo.priority %>
+        </span>
+      <% end %>
+    </div>
   </div>
-
-  <div>
-    <strong>Description:</strong>
-    <%= todo.description %>
+  <div class="border-t border-gray-200">
+    <dl>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Description</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"><%= todo.description.present? ? todo.description : "No description provided" %></dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Project</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <%= link_to todo.project.name, project_path(todo.project), class: "text-indigo-600 hover:text-indigo-900" %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Status</dt>
+        <dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
+          <% if todo.completed %>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+              Completed
+            </span>
+          <% else %>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+              In Progress
+            </span>
+          <% end %>
+        </dd>
+      </div>
+    </dl>
   </div>
-
-  <div>
-    <strong>Completed:</strong>
-    <%= todo.completed %>
-  </div>
-
-  <div>
-    <strong>Priority:</strong>
-    <%= todo.priority %>
-  </div>
-
-  <div>
-    <strong>Project:</strong>
-    <%= link_to todo.project.name, project_path(todo.project) %>
-  </div>
-</div>
+</div>

app/views/todos/edit.html.erb

@@ -1,12 +1,51 @@
-<% content_for :title, "Editing todo" %>
-
-<h1>Editing todo</h1>
-
-<%= render "form", todo: @todo %>
-
-<br>
-
-<div>
-  <%= link_to "Show this todo", @todo %> |
-  <%= link_to "Back to todos", todos_path %>
-</div>
+<div id="<%= dom_id todo %>" class="bg-white shadow overflow-hidden sm:rounded-lg hover:shadow-md transition-shadow">
+  <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
+    <h3 class="text-lg leading-6 font-medium text-gray-900 flex items-center">
+      <% if todo.completed %>
+        <span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full bg-green-100">
+          <svg class="h-3.5 w-3.5 text-green-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+          </svg>
+        </span>
+      <% else %>
+        <span class="mr-2 flex h-5 w-5 items-center justify-center rounded-full border-2 border-gray-300"></span>
+      <% end %>
+      <%= todo.name %>
+    </h3>
+    <div class="flex space-x-2">
+      <% if todo.priority && todo.priority > 0 %>
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+          Priority: <%= todo.priority %>
+        </span>
+      <% end %>
+    </div>
+  </div>
+  <div class="border-t border-gray-200">
+    <dl>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Description</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0"><%= todo.description.present? ? todo.description : "No description provided" %></dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Project</dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+          <%= link_to todo.project.name, project_path(todo.project), class: "text-indigo-600 hover:text-indigo-900" %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">Status</dt>
+        <dd class="mt-1 text-sm sm:col-span-2 sm:mt-0">
+          <% if todo.completed %>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+              Completed
+            </span>
+          <% else %>
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+              In Progress
+            </span>
+          <% end %>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>

app/views/todos/index.html.erb

@@ -1,16 +1,90 @@
-<p style="color: green"><%= notice %></p>
-
 <% content_for :title, "Todos" %>
 
-<h1>Todos</h1>
-
-<div id="todos">
-  <% @todos.each do |todo| %>
-    <%= render todo %>
-    <p>
-      <%= link_to "Show this todo", todo %>
-    </p>
+<div class="flex justify-between items-center mb-6">
+  <h1 class="text-3xl font-bold text-gray-900">Todos</h1>
+  <%= link_to new_todo_path, class: "px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors" do %>
+    <div class="flex items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
+      </svg>
+      New Todo
+    </div>
   <% end %>
 </div>
 
-<%= link_to "New todo", new_todo_path %>
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 mb-8">
+  <div class="bg-white overflow-hidden shadow rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+      <div class="flex items-center">
+        <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
+          <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+          </svg>
+        </div>
+        <div class="ml-5 w-0 flex-1">
+          <dl>
+            <dt class="text-sm font-medium text-gray-500 truncate">
+              Total Todos
+            </dt>
+            <dd>
+              <div class="text-lg font-medium text-gray-900">
+                <%= @todos.count %>
+              </div>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="bg-white overflow-hidden shadow rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+      <div class="flex items-center">
+        <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
+          <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <div class="ml-5 w-0 flex-1">
+          <dl>
+            <dt class="text-sm font-medium text-gray-500 truncate">
+              Completed
+            </dt>
+            <dd>
+              <div class="text-lg font-medium text-gray-900">
+                <%= @todos.where(completed: true).count %>
+              </div>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="todos" class="space-y-6">
+  <% @todos.each do |todo| %>
+    <div class="bg-white overflow-hidden shadow rounded-lg transition-all hover:shadow-md">
+      <%= render todo %>
+      <div class="px-4 py-3 bg-gray-50 text-right sm:px-6 flex justify-end space-x-3">
+        <%= link_to "View", todo, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+        <%= link_to "Edit", edit_todo_path(todo), class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<% if @todos.empty? %>
+  <div class="text-center py-12 bg-white shadow overflow-hidden sm:rounded-md">
+    <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+    </svg>
+    <h3 class="mt-2 text-sm font-medium text-gray-900">No todos</h3>
+    <p class="mt-1 text-sm text-gray-500">Get started by creating a new todo.</p>
+    <div class="mt-6">
+      <%= link_to new_todo_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
+        Add a todo
+      <% end %>
+    </div>
+  </div>
+<% end %>

app/views/todos/new.html.erb

@@ -1,11 +1,22 @@
 <% content_for :title, "New todo" %>
 
-<h1>New todo</h1>
-
-<%= render "form", todo: @todo %>
-
-<br>
-
-<div>
-  <%= link_to "Back to todos", todos_path %>
-</div>
+<div class="md:grid md:grid-cols-3 md:gap-6">
+  <div class="md:col-span-1">
+    <div class="px-4 sm:px-0">
+      <h1 class="text-2xl font-bold text-gray-900 mb-2">New Todo</h1>
+      <p class="mt-1 text-sm text-gray-600">
+        Create a new todo to track your tasks.
+      </p>
+      <div class="mt-6">
+        <%= link_to "Back to Todos", todos_path, class: "text-indigo-600 hover:text-indigo-900" %>
+      </div>
+    </div>
+  </div>
+  <div class="mt-5 md:mt-0 md:col-span-2">
+    <div class="shadow sm:rounded-md sm:overflow-hidden">
+      <div class="px-4 py-5 bg-white space-y-6 sm:p-6">
+        <%= render "form", todo: @todo %>
+      </div>
+    </div>
+  </div>
+</div>

app/views/todos/show.html.erb

@@ -1,10 +1,11 @@
-<p style="color: green"><%= notice %></p>
-
-<%= render @todo %>
-
-<div>
-  <%= link_to "Edit this todo", edit_todo_path(@todo) %> |
-  <%= link_to "Back to todos", todos_path %>
-
-  <%= button_to "Destroy this todo", @todo, method: :delete %>
+<div class="mb-8">
+  <%= render @todo %>
 </div>
+
+<div class="flex justify-between items-center">
+  <div class="flex space-x-4">
+    <%= link_to "Back to todos", todos_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    <%= link_to "Edit this todo", edit_todo_path(@todo), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+  </div>
+  <%= button_to "Delete this todo", @todo, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { confirm: "Are you sure you want to delete this todo?" } %>
+</div>