styling updates for signin and invitation edit forms

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;
 }

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:
     //

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}

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 -->

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>

lib/basket_web/controllers/pow_invitation/invitation_html/edit.html.heex

@@ -42,23 +42,19 @@
       </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]) %>
       </span>
     <% 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>