From db52910cc58ab70bf171b25a0ccd6787510e3303 Mon Sep 17 00:00:00 2001
From: Dave Miner <wtrispsn@gmail.com>
Date: Sat, 23 Nov 2024 10:08:21 -0500
Subject: [PATCH] styling updates for signin and invitation edit forms

---
 assets/css/app.css                               |  8 ++++++++
 assets/tailwind.config.js                        |  4 ++--
 lib/basket_web/components/core_components.ex     |  4 ++--
 lib/basket_web/components/nav_row.ex             |  2 +-
 .../controllers/pow/session_html/new.html.heex   |  8 +++++---
 .../invitation_html/edit.html.heex               | 16 ++++++----------
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 62240e4..6898ff3 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -11,4 +11,12 @@
 .article-summary p,
 .article-summary img {
     margin-bottom: 1.5em;
+}
+
+/* Don't let chrome set the background color on an autofilled field */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px white inset !important;
 }
\ No newline at end of file
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 4d7e8d2..bdb883e 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -1,7 +1,7 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
 
-const colors = require('tailwindcss/colors')
+//const colors = require('tailwindcss/colors')
 const plugin = require("tailwindcss/plugin")
 const fs = require("fs")
 const path = require("path")
@@ -27,7 +27,7 @@ module.exports = {
   plugins: [
     require("@tailwindcss/typography"),
     require('daisyui'),
-    //require("@tailwindcss/forms"),
+    require("@tailwindcss/forms"),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:
     //
diff --git a/lib/basket_web/components/core_components.ex b/lib/basket_web/components/core_components.ex
index 09a5bd1..e373a44 100644
--- a/lib/basket_web/components/core_components.ex
+++ b/lib/basket_web/components/core_components.ex
@@ -240,7 +240,7 @@ defmodule BasketWeb.CoreComponents do
     <.form :let={f} for={@for} as={@as} {@rest}>
       <div class="mt-10 space-y-8">
         <%= render_slot(@inner_block, f) %>
-        <div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
+        <div :for={action <- @actions} class="mt-2 gap-6">
           <%= render_slot(action, f) %>
         </div>
       </div>
@@ -268,7 +268,7 @@ defmodule BasketWeb.CoreComponents do
       type={@type}
       class={[
         "phx-submit-loading:opacity-75 rounded-lg py-1 px-2",
-        "text-sm font-semibold leading-6 text-white active:text-white/80",
+        "font-semibold leading-6",
         @class
       ]}
       {@rest}
diff --git a/lib/basket_web/components/nav_row.ex b/lib/basket_web/components/nav_row.ex
index 1c60008..67fbdd5 100644
--- a/lib/basket_web/components/nav_row.ex
+++ b/lib/basket_web/components/nav_row.ex
@@ -18,7 +18,7 @@ defmodule BasketWeb.Components.NavRow do
             id="theme-controller"
             type="checkbox"
             phx-hook="ThemeSwitcher"
-            class="theme-controller"
+            class="theme-controller hidden"
             value="night"
           />
           <!-- sun icon -->
diff --git a/lib/basket_web/controllers/pow/session_html/new.html.heex b/lib/basket_web/controllers/pow/session_html/new.html.heex
index 90ef2ae..9a20129 100644
--- a/lib/basket_web/controllers/pow/session_html/new.html.heex
+++ b/lib/basket_web/controllers/pow/session_html/new.html.heex
@@ -47,9 +47,11 @@
       </:actions>
 
       <:actions>
-        <.button phx-disable-with="Signing in..." class="w-full">
-          Sign in <span aria-hidden="true">→</span>
-        </.button>
+        <div class="flex justify-center w-full">
+          <.button phx-disable-with="Signing in..." class="btn btn-primary px-4">
+            Sign in <span aria-hidden="true">→</span>
+          </.button>
+        </div>
       </:actions>
     </.simple_form>
   </div>
diff --git a/lib/basket_web/controllers/pow_invitation/invitation_html/edit.html.heex b/lib/basket_web/controllers/pow_invitation/invitation_html/edit.html.heex
index f392346..0519540 100644
--- a/lib/basket_web/controllers/pow_invitation/invitation_html/edit.html.heex
+++ b/lib/basket_web/controllers/pow_invitation/invitation_html/edit.html.heex
@@ -42,13 +42,7 @@
       </span>
     <% end %>
 
-    <.input
-      field={f[:password_confirmation]}
-      type="password"
-      label="Confirm password"
-      required
-      class="input-lg"
-    />
+    <.input field={f[:password_confirmation]} type="password" label="Confirm password" required />
     <%= if f.source.errors[:password_confirmation] do %>
       <span class="error text-error">
         <%= translate_changeset_error(f.source.errors[:password_confirmation]) %>
@@ -56,9 +50,11 @@
     <% end %>
 
     <:actions>
-      <.button phx-disable-with="Submitting..." class="w-full">
-        Submit <span aria-hidden="true">→</span>
-      </.button>
+      <div class="flex justify-center w-full">
+        <.button phx-disable-with="Submitting..." class="btn btn-primary px-4">
+          Finish signup <span aria-hidden="true">→</span>
+        </.button>
+      </div>
     </:actions>
   </.simple_form>
 </div>