From 0869d6a58c6de69e97e3351cdfa7356335d092e7 Mon Sep 17 00:00:00 2001
From: Adam Piontek <adam@73k.us>
Date: Wed, 3 Mar 2021 08:15:14 -0500
Subject: [PATCH] style improvements and fixes

---
 assets/css/app.scss                                   | 10 ++++++++++
 lib/bones73k_web/controllers/user_auth.ex             |  1 -
 lib/bones73k_web/live/property_live/index.html.leex   | 10 +++++-----
 lib/bones73k_web/live/user/registration.html.leex     |  4 ++--
 lib/bones73k_web/live/user/reset_password.html.leex   |  4 ++--
 lib/bones73k_web/live/user/settings.html.leex         |  4 ++--
 lib/bones73k_web/live/user/settings/email.html.leex   |  2 +-
 .../live/user/settings/password.html.leex             |  2 +-
 lib/bones73k_web/live/user_dashboard_live.ex          |  2 +-
 lib/bones73k_web/templates/layout/_navbar.html.eex    |  4 +++-
 .../templates/user_confirmation/new.html.eex          |  4 ++--
 .../templates/user_reset_password/new.html.eex        |  4 ++--
 lib/bones73k_web/templates/user_session/new.html.eex  |  6 +++---
 lib/bones73k_web/views/icon_helpers.ex                | 11 +++++++++++
 .../controllers/user_confirmation_controller_test.exs |  2 +-
 .../controllers/user_registration_controller_test.exs |  2 +-
 .../user_reset_password_controller_test.exs           |  4 ++--
 .../controllers/user_session_controller_test.exs      |  6 +++---
 .../controllers/user_settings_controller_test.exs     |  2 +-
 test/bones73k_web/live/user/registration_test.exs     |  4 ++--
 test/bones73k_web/live/user/reset_password_test.exs   |  4 ++--
 21 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index aff89d6..2ae020b 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -15,3 +15,13 @@
 
 /* Navbar toggler icon override */
 @import "nav-burger";
+
+/* extra */
+.was-validated .no-valid-style .form-check-input:valid,
+.form-check-input.is-valid {
+  border-color: inherit !important;
+}
+.was-validated .no-valid-style .form-check-input:valid ~ .form-check-label,
+.no-valid-style .form-check-input.is-valid ~ .form-check-label {
+  color: inherit !important;
+}
diff --git a/lib/bones73k_web/controllers/user_auth.ex b/lib/bones73k_web/controllers/user_auth.ex
index 30fbd50..4b9d3a4 100644
--- a/lib/bones73k_web/controllers/user_auth.ex
+++ b/lib/bones73k_web/controllers/user_auth.ex
@@ -1,7 +1,6 @@
 defmodule Bones73kWeb.UserAuth do
   import Plug.Conn
   import Phoenix.Controller
-  import Phoenix.HTML
 
   alias Bones73k.Accounts
   alias Bones73kWeb.Router.Helpers, as: Routes
diff --git a/lib/bones73k_web/live/property_live/index.html.leex b/lib/bones73k_web/live/property_live/index.html.leex
index 7089e67..c0d32d7 100644
--- a/lib/bones73k_web/live/property_live/index.html.leex
+++ b/lib/bones73k_web/live/property_live/index.html.leex
@@ -1,4 +1,4 @@
-<h1>Listing Properties</h1>
+<h2>Listing Properties</h2>
 
 <%= if @live_action in [:new, :edit] do %>
   <%= live_modal @socket, Bones73kWeb.PropertyLive.FormComponent,
@@ -10,12 +10,12 @@
     return_to: Routes.property_index_path(@socket, :index) %>
 <% end %>
 
-<table>
+<table class="table">
   <thead>
     <tr>
-      <th>Name</th>
-      <th>Price</th>
-      <th>Description</th>
+      <th scope="col">Name</th>
+      <th scope="col">Price</th>
+      <th scope="col">Description</th>
 
       <th></th>
     </tr>
diff --git a/lib/bones73k_web/live/user/registration.html.leex b/lib/bones73k_web/live/user/registration.html.leex
index a03ccbd..9ccd608 100644
--- a/lib/bones73k_web/live/user/registration.html.leex
+++ b/lib/bones73k_web/live/user/registration.html.leex
@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @socket, "bi-person-plus", [class: "icon baseline"] %>
     Register
-  </h3>
+  </h2>
   <p class="lead">Registration gains additional features, like remembering your song request history.</p>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "reg_form"], fn f -> %>
diff --git a/lib/bones73k_web/live/user/reset_password.html.leex b/lib/bones73k_web/live/user/reset_password.html.leex
index ad0bc23..843a290 100644
--- a/lib/bones73k_web/live/user/reset_password.html.leex
+++ b/lib/bones73k_web/live/user/reset_password.html.leex
@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @socket, "bi-shield-lock", [class: "icon baseline"] %>
     Reset password
-  </h3>
+  </h2>
   <p class="lead">Hi <%= @user.email %> &mdash; What new word of passage will confirm you are who you say you are?</p>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, novalidate: true, id: "pw_reset_form"], fn f -> %>
diff --git a/lib/bones73k_web/live/user/settings.html.leex b/lib/bones73k_web/live/user/settings.html.leex
index 994b1fc..31b344d 100644
--- a/lib/bones73k_web/live/user/settings.html.leex
+++ b/lib/bones73k_web/live/user/settings.html.leex
@@ -1,7 +1,7 @@
-<h3 class="mb-3">
+<h2 class="mb-3">
   <%= icon_div @socket, "bi-sliders", [class: "icon baseline"] %>
   User Settings
-</h3>
+</h2>
 
 <div class="row">
   <%= live_component @socket, Bones73kWeb.UserLive.Settings.Email, id: "email-#{@current_user.id}", current_user: @current_user %>
diff --git a/lib/bones73k_web/live/user/settings/email.html.leex b/lib/bones73k_web/live/user/settings/email.html.leex
index b589b26..ee5a505 100644
--- a/lib/bones73k_web/live/user/settings/email.html.leex
+++ b/lib/bones73k_web/live/user/settings/email.html.leex
@@ -1,6 +1,6 @@
 <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4  mt-1">
 
-  <h4>Change email</h4>
+  <h3>Change email</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
diff --git a/lib/bones73k_web/live/user/settings/password.html.leex b/lib/bones73k_web/live/user/settings/password.html.leex
index 9d84ad4..736b261 100644
--- a/lib/bones73k_web/live/user/settings/password.html.leex
+++ b/lib/bones73k_web/live/user/settings/password.html.leex
@@ -1,6 +1,6 @@
 <div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4 mt-1">
 
-  <h4>Change password</h4>
+  <h3>Change password</h3>
 
   <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>
 
diff --git a/lib/bones73k_web/live/user_dashboard_live.ex b/lib/bones73k_web/live/user_dashboard_live.ex
index a6def82..4b79a71 100644
--- a/lib/bones73k_web/live/user_dashboard_live.ex
+++ b/lib/bones73k_web/live/user_dashboard_live.ex
@@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserDashboardLive do
   def render(assigns) do
     ~L"""
     <section class="phx-hero">
-      <h1>Welcome to the user dashboard!</h1>
+      <h2>Welcome to the user dashboard!</h2>
     </section>
     """
   end
diff --git a/lib/bones73k_web/templates/layout/_navbar.html.eex b/lib/bones73k_web/templates/layout/_navbar.html.eex
index c3852ca..7fb7276 100644
--- a/lib/bones73k_web/templates/layout/_navbar.html.eex
+++ b/lib/bones73k_web/templates/layout/_navbar.html.eex
@@ -1,10 +1,12 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
   <div class="container">
 
-    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand py-0 fs-4" do %>
+    <h1 class="fs-4 my-0 py-0 lh-base">
+    <%= link to: Routes.page_path(@conn, :index), class: "navbar-brand fs-4" do %>
       <%= icon_div @conn, "mdi-skull-crossbones", [class: "icon baseline fs-3"] %>
       <span class="fw-light">Bones73k</span>
     <% end %>
+    </h1>
 
     <button class="hamburger hamburger--squeeze collapsed navbar-toggler" id="navbarSupportedContentToggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
       <span class="hamburger-box d-flex">
diff --git a/lib/bones73k_web/templates/user_confirmation/new.html.eex b/lib/bones73k_web/templates/user_confirmation/new.html.eex
index 1d6e724..d2356fa 100644
--- a/lib/bones73k_web/templates/user_confirmation/new.html.eex
+++ b/lib/bones73k_web/templates/user_confirmation/new.html.eex
@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "bi-arrow-repeat", [class: "icon baseline"] %>
     Resend confirmation instructions
-  </h3>
+  </h2>
   <p class="lead">We'll send you another email with instructions to confirm your email address.</p>
 
   <%= form_for :user, Routes.user_confirmation_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>
diff --git a/lib/bones73k_web/templates/user_reset_password/new.html.eex b/lib/bones73k_web/templates/user_reset_password/new.html.eex
index 891b97a..0566160 100644
--- a/lib/bones73k_web/templates/user_reset_password/new.html.eex
+++ b/lib/bones73k_web/templates/user_reset_password/new.html.eex
@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
     Forgot your password?
-  </h3>
+  </h2>
   <p class="lead">We'll send you an email with instructions to reset your password.</p>
 
   <%= form_for :user, Routes.user_reset_password_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>
diff --git a/lib/bones73k_web/templates/user_session/new.html.eex b/lib/bones73k_web/templates/user_session/new.html.eex
index f251bf3..c5762ce 100644
--- a/lib/bones73k_web/templates/user_session/new.html.eex
+++ b/lib/bones73k_web/templates/user_session/new.html.eex
@@ -1,10 +1,10 @@
 <div class="row justify-content-center">
   <div class="col-sm-9 col-md-7 col-lg-5 col-xl-4 ">
 
-  <h3>
+  <h2>
     <%= icon_div @conn, "bi-door-open", [class: "icon baseline"] %>
     Log in
-  </h3>
+  </h2>
   <p class="lead">Who goes there?</p>
 
   <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "needs-validation", novalidate: true], fn f -> %>
@@ -41,7 +41,7 @@
       <span class="invalid-feedback">password is required</span>
     </div>
 
-    <div class="form-check mb-3">
+    <div class="form-check mb-3 no-valid-style">
       <%= checkbox f, :remember_me, class: "form-check-input" %>
       <%= label f, :remember_me, "Keep me logged in for 60 days", class: "form-check-label" %>
     </div>
diff --git a/lib/bones73k_web/views/icon_helpers.ex b/lib/bones73k_web/views/icon_helpers.ex
index 7a18631..e86389d 100644
--- a/lib/bones73k_web/views/icon_helpers.ex
+++ b/lib/bones73k_web/views/icon_helpers.ex
@@ -13,6 +13,8 @@ defmodule Bones73kWeb.IconHelpers do
   end
 
   def icon_svg(conn, name, opts \\ []) do
+    opts = aria_hidden?(opts)
+
     content_tag(:svg, tag_opts(name, opts)) do
       tag(:use, "xlink:href": Routes.static_path(conn, "/images/icons.svg##{name}"))
     end
@@ -21,4 +23,13 @@ defmodule Bones73kWeb.IconHelpers do
   defp tag_opts(name, opts) do
     Keyword.update(opts, :class, name, fn c -> "#{c} #{name}" end)
   end
+
+  defp aria_hidden?(opts) do
+    case Keyword.get(opts, :aria_hidden) do
+      "false" -> Keyword.drop(opts, [:aria_hidden])
+      false -> Keyword.drop(opts, [:aria_hidden])
+      "true" -> opts
+      _ -> Keyword.put(opts, :aria_hidden, "true")
+    end
+  end
 end
diff --git a/test/bones73k_web/controllers/user_confirmation_controller_test.exs b/test/bones73k_web/controllers/user_confirmation_controller_test.exs
index 1681306..ec8812f 100644
--- a/test/bones73k_web/controllers/user_confirmation_controller_test.exs
+++ b/test/bones73k_web/controllers/user_confirmation_controller_test.exs
@@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserConfirmationControllerTest do
     test "renders the confirmation page", %{conn: conn} do
       conn = get(conn, Routes.user_confirmation_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Resend confirmation instructions\n  </h3>"
+      assert response =~ "Resend confirmation instructions\n  </h2>"
     end
   end
 
diff --git a/test/bones73k_web/controllers/user_registration_controller_test.exs b/test/bones73k_web/controllers/user_registration_controller_test.exs
index 5466e1d..9d05391 100644
--- a/test/bones73k_web/controllers/user_registration_controller_test.exs
+++ b/test/bones73k_web/controllers/user_registration_controller_test.exs
@@ -7,7 +7,7 @@ defmodule Bones73kWeb.UserRegistrationControllerTest do
     test "renders registration page", %{conn: conn} do
       conn = get(conn, Routes.user_registration_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Register\n  </h3>"
+      assert response =~ "Register\n  </h2>"
       assert response =~ "Log in\n</a>"
       assert response =~ "Register\n</a>"
     end
diff --git a/test/bones73k_web/controllers/user_reset_password_controller_test.exs b/test/bones73k_web/controllers/user_reset_password_controller_test.exs
index 6e173ae..c09eb1c 100644
--- a/test/bones73k_web/controllers/user_reset_password_controller_test.exs
+++ b/test/bones73k_web/controllers/user_reset_password_controller_test.exs
@@ -13,7 +13,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
     test "renders the reset password page", %{conn: conn} do
       conn = get(conn, Routes.user_reset_password_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "Forgot your password?\n  </h3>"
+      assert response =~ "Forgot your password?\n  </h2>"
     end
 
     test "redirects if already logged in", %{conn: conn} do
@@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserResetPasswordControllerTest do
     test "renders reset password with user_id in session", %{conn: conn, token: token, user: user} do
       conn = get(conn, Routes.user_reset_password_path(conn, :edit, token))
       assert get_session(conn, "user_id") == user.id
-      assert html_response(conn, 200) =~ "Reset password\n  </h3>"
+      assert html_response(conn, 200) =~ "Reset password\n  </h2>"
     end
 
     test "does not render reset password with invalid token", %{conn: conn} do
diff --git a/test/bones73k_web/controllers/user_session_controller_test.exs b/test/bones73k_web/controllers/user_session_controller_test.exs
index 464b6ee..763cd6b 100644
--- a/test/bones73k_web/controllers/user_session_controller_test.exs
+++ b/test/bones73k_web/controllers/user_session_controller_test.exs
@@ -11,7 +11,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
     test "renders log in page", %{conn: conn} do
       conn = get(conn, Routes.user_session_path(conn, :new))
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Register\n</a>"
       assert response =~ "Log in\n</a>"
     end
@@ -61,7 +61,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
         })
 
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Invalid email or password"
     end
   end
@@ -108,7 +108,7 @@ defmodule Bones73kWeb.UserSessionControllerTest do
         })
 
       response = html_response(conn, 200)
-      assert response =~ "\n    Log in\n  </h3>"
+      assert response =~ "\n    Log in\n  </h2>"
       assert response =~ "Invalid email or password"
     end
   end
diff --git a/test/bones73k_web/controllers/user_settings_controller_test.exs b/test/bones73k_web/controllers/user_settings_controller_test.exs
index dde5fb6..55815e6 100644
--- a/test/bones73k_web/controllers/user_settings_controller_test.exs
+++ b/test/bones73k_web/controllers/user_settings_controller_test.exs
@@ -10,7 +10,7 @@ defmodule Bones73kWeb.UserSettingsControllerTest do
     test "renders settings page", %{conn: conn} do
       conn = get(conn, Routes.user_settings_path(conn, :edit))
       response = html_response(conn, 200)
-      assert response =~ "User Settings\n</h3>"
+      assert response =~ "User Settings\n</h2>"
     end
 
     test "redirects if user is not logged in" do
diff --git a/test/bones73k_web/live/user/registration_test.exs b/test/bones73k_web/live/user/registration_test.exs
index 76b72a2..88b747c 100644
--- a/test/bones73k_web/live/user/registration_test.exs
+++ b/test/bones73k_web/live/user/registration_test.exs
@@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
     test "displays registration form", %{conn: conn} do
       {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.Registration)
 
-      assert html =~ "Register\n  </h3>"
+      assert html =~ "Register\n  </h2>"
       assert html =~ "Email</label>"
     end
 
@@ -29,7 +29,7 @@ defmodule Bones73kWeb.UserLive.RegistrationTest do
         |> form("#reg_form", %{"user" => %{"email" => "abc", "password" => "abc"}})
         |> render_change()
 
-      assert html =~ "Register\n  </h3>"
+      assert html =~ "Register\n  </h2>"
       assert html =~ "must be a valid email address"
       assert html =~ "should be at least #{User.min_password()} character(s)"
       assert html =~ "type=\"submit\" disabled=\"disabled\""
diff --git a/test/bones73k_web/live/user/reset_password_test.exs b/test/bones73k_web/live/user/reset_password_test.exs
index 3526766..c6d9be5 100644
--- a/test/bones73k_web/live/user/reset_password_test.exs
+++ b/test/bones73k_web/live/user/reset_password_test.exs
@@ -17,7 +17,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
   test "displays registration form", %{conn: conn, user: user} do
     {:ok, _view, html} = live_isolated(conn, Bones73kWeb.UserLive.ResetPassword)
 
-    assert html =~ "Reset password\n  </h3>"
+    assert html =~ "Reset password\n  </h2>"
     assert html =~ user.email
     assert html =~ "New password</label>"
   end
@@ -28,7 +28,7 @@ defmodule Bones73kWeb.UserLive.ResetPasswordTest do
     form_data = %{"user" => %{"password" => "abc", "password_confirmation" => "def"}}
     html = form(view, "#pw_reset_form", form_data) |> render_change()
 
-    assert html =~ "Reset password\n  </h3>"
+    assert html =~ "Reset password\n  </h2>"
     assert html =~ "should be at least #{User.min_password()} character(s)"
     assert html =~ "does not match password"
     assert html =~ "type=\"submit\" disabled=\"disabled\""