#400 fix test assertion (text) in test/app_web/controllers/list_contr…

…oller_test.exs

lib/app_web/templates/list/edit.html.heex

@@ -1,11 +1,11 @@
 <.container>
-  <.h2 class="text-center mt-3">Edit List</.h2>
+  <h2 class="text-center mt-4 mb-4 text-4xl font-semibold leading-6 text-gray-900 clear-both">
+    <i>Edit</i> List
+  </h2>
 
   <%= render(
     "form.html",
     Map.put(assigns, :action, Routes.list_path(@conn, :update, @list))
     |> Map.put(:method, "patch")
   ) %>
-
-  <.a to={Routes.list_path(@conn, :index)} label="Back to lists" />
 </.container>

lib/app_web/templates/list/form.html.heex

@@ -4,7 +4,23 @@
       <p>Oops, something went wrong! Please check the errors below.</p>
     </div>
   <% end %>
-  <.form_field type="text_input" form={f} field={:name} />
 
-  <.button type="submit" label="Save" />
+  <div class="flex flex-col justify-center items-center block text-xl2 font-medium leading-6 text-gray-900 mb-4">
+    <.form_field type="text_input" form={f} field={:name} />
+  </div>
+  <.button
+    type="submit"
+    label="Save"
+    class="float-right mr-4 rounded-md bg-green-600 hover:bg-green-700 px-4 py-2 
+    text-2xl text-center font-semibold text-white shadow-sm"
+  />
+
+  <%= link("< Back to Lists",
+    to: Routes.list_path(@conn, :index),
+    class:
+      "float-left rounded-md bg-orange-600 hover:bg-orange-700 
+      mt-2 ml-4 px-4 py-2 text-center text-sm font-semibold text-white shadow-sm",
+    data: [confirm: "Are you sure you want to discard this list?
+      (The data cannot be recovered!)"]
+  ) %>
 </.form>

lib/app_web/templates/list/index.html.heex

@@ -5,7 +5,7 @@
 <div class="px-4 sm:px-6 lg:px-8">
   <div class="sm:flex sm:items-center">
     <div class="sm:flex-auto">
-      <p class="mt-4 text-sm text-gray-700 text-center">
+      <p class="mt-4 text-sm text-gray-700 text-center sm:flex-auto">
         These are <b>your <code>Lists</code></b>. <br /> Use
         <b><code>Lists</code></b>
         to <b>organize</b>
@@ -44,6 +44,20 @@
               >
                 Item Count
               </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 
+                  text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell"
+              >
+                Created
+              </th>
+              <th
+                scope="col"
+                class="sticky top-0 z-10 hidden border-b border-gray-300 bg-white bg-opacity-75 px-3 py-3.5 
+                  text-center text-sm font-semibold text-gray-900 backdrop-blur backdrop-filter sm:table-cell"
+              >
+                Last Updated
+              </th>
               <th
                 scope="col"
                 class="sticky top-0 z-10 border-b border-gray-300 bg-white bg-opacity-75 py-3.5 pl-3 pr-4 backdrop-blur backdrop-filter sm:pr-6 lg:pr-8"
@@ -61,12 +75,18 @@
           <tbody>
             <%= for list <- @lists do %>
               <tr>
-                <td class="whitespace-nowrap border-b border-gray-200 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 lg:pl-8">
+                <td class="whitespace-nowrap border-b border-gray-200 py-4 pl-4 pr-3 font-medium text-gray-900 sm:pl-6 lg:pl-8">
                   <%= String.capitalize(list.name) %>
                 </td>
-                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-xl text-gray-500 sm:table-cell">
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-xl text-gray-800 sm:table-cell">
                   <%= list_item_count(list) %>
                 </td>
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-sm text-gray-800 sm:table-cell">
+                  <%= format_date(list.inserted_at) %>
+                </td>
+                <td class="whitespace-nowrap border-b border-gray-200 hidden px-3 py-4 text-center text-sm text-gray-800 sm:table-cell">
+                  <%= format_date(list.updated_at) %>
+                </td>
                 <!-- Don't show Edit or Delete buttons for "all" list. ref: github.com/dwyl/mvp/issues/400 -->
                 <%= if list.name == "all" do %>
                   <td class="relative border-b border-gray-200"></td>

lib/app_web/templates/list/new.html.heex

@@ -1,11 +1,18 @@
-<.container>
-  <.h2 class="text-center mt-3">New list</.h2>
+<h2 class="text-center mt-4 text-4xl font-semibold leading-6 text-gray-900 clear-both">
+  <i>New</i> List
+</h2>
 
+<div class="sm:flex-auto">
+  <p class="mt-4 text-sm text-gray-700 text-center sm:flex-auto">
+    Create a <b><i>New</i> <code>List</code></b>
+    for a project or area you need to keep track of:
+  </p>
+</div>
+
+<div class="mt-3 clear-both">
   <%= render(
     "form.html",
     Map.put(assigns, :action, Routes.list_path(@conn, :create))
     |> Map.put(:method, "post")
   ) %>
-
-  <.a to={Routes.list_path(@conn, :index)} label="Back to lists" />
-</.container>
+</div>

lib/app_web/views/list_view.ex

@@ -9,4 +9,8 @@ defmodule AppWeb.ListView do
       list.seq |> String.split(",") |> length |> to_string
     end
   end
+
+  def format_date(date) do
+    App.DateTimeHelper.format_date(date)
+  end
 end

test/app_web/controllers/list_controller_test.exs

@@ -22,7 +22,7 @@ defmodule AppWeb.ListControllerTest do
   describe "new list" do
     test "Display new list form", %{conn: conn} do
       conn = get(conn, Routes.list_path(conn, :new))
-      assert html_response(conn, 200) =~ "New list"
+      assert html_response(conn, 200) =~ "New"
     end
   end
 
@@ -42,7 +42,7 @@ defmodule AppWeb.ListControllerTest do
         |> assign(:person, %{id: 1})
         |> post(Routes.list_path(conn, :create), list: @invalid_attrs)
 
-      assert html_response(conn, 200) =~ "New list"
+      assert html_response(conn, 200) =~ "New"
     end
   end
 
@@ -55,7 +55,7 @@ defmodule AppWeb.ListControllerTest do
         |> assign(:person, %{id: 1})
         |> get(Routes.list_path(conn, :edit, list))
 
-      assert html_response(conn, 200) =~ "Edit List"
+      assert html_response(conn, 200) =~ "Edit"
     end
 
     test "redirect to index when missing permission to edit the list", %{
@@ -86,7 +86,7 @@ defmodule AppWeb.ListControllerTest do
         |> assign(:person, %{id: 1})
         |> put(Routes.list_path(conn, :update, list), list: @invalid_attrs)
 
-      assert html_response(conn, 200) =~ "Edit List"
+      assert html_response(conn, 200) =~ "Edit"
     end
   end