cleanup(Live.TripPlanner): inputs UI polish

assets/css/_autocomplete-theme.scss

@@ -205,19 +205,46 @@
 
 #trip-planner-input-form--from,
 #trip-planner-input-form--to {
+  --aa-search-input-height: 2rem;
+
+  .aa-Form {
+    border-radius: var(--border-radius-default);
+    padding: var(--spacing-xs);
+  }
+
   .aa-InputWrapperPrefix {
-    order: unset;
+    display: grid;
+    grid-template-areas: "stack";
+    order: 1;
+    width: calc(var(--aa-spacing) + var(--aa-icon-size) - 1px);
+
+    .aa-Label, .aa-LoadingIndicator {
+      grid-area: stack;
+    }
+
+    .aa-Label {
+      align-content: center;
+      color: $brand-primary;
+      font-size: 1.25rem;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+
+  .aa-InputWrapperSuffix {
+    order: 3;
+    width: calc(var(--aa-spacing) + var(--aa-icon-size) - 1px);
   }
 
   .aa-SubmitButton {
-    user-select: none;
+    display: none;
   }
 }
 
-#trip-planner-input-form--from .aa-SubmitButton {
-  @include fa-icon-solid($fa-var-a);
+#trip-planner-input-form--from .aa-Label::before {
+  content: "A"
 }
 
-#trip-planner-input-form--to .aa-SubmitButton {
-  @include fa-icon-solid($fa-var-b);
+#trip-planner-input-form--to .aa-Label::before {
+  content: "B"
 }

assets/tailwind.config.js

@@ -3,7 +3,9 @@
 
 const plugin = require("tailwindcss/plugin");
 const { content, plugins, safelist } = require("mbta_metro");
-const { theme: tailwindTheme } = require("mbta_metro/tailwindTheme");
+const {
+  theme: { extend: tailwindTheme }
+} = require("mbta_metro/tailwindTheme");
 
 const moreColors = {
   ...tailwindTheme.colors,
@@ -37,6 +39,7 @@ module.exports = {
     preflight: false
   },
   blocklist: ["container", "collapse"],
+  important: ".body-wrapper",
   content: [
     ...content,
     "./js/**/*.js",
@@ -64,10 +67,6 @@ module.exports = {
   },
   plugins: [
     ...plugins(),
-    require("@tailwindcss/forms")({
-      // don't make global styles since they conflict with ours
-      strategy: "class"
-    }),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:
     //
@@ -122,6 +121,9 @@ module.exports = {
         },
         "h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6, p + h3, p + h4, p + h5, p + h6": {
           marginTop: theme("spacing.4")
+        },
+        "fieldset legend": {
+          fontSize: "initial"
         }
       })
     )

lib/dotcom_web/components/trip_planner/input_form.ex

@@ -22,7 +22,7 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
 
   def input_form(assigns) do
     ~H"""
-    <section class={["px-10 py-8 lg:px-20 lg:py-12 bg-gray-100", @class]}>
+    <section class={["rounded px-xl py-lg lg:px-2xl lg:py-xl bg-charcoal-90", @class]}>
       <.form
         :let={f}
         class="md:grid md:grid-cols-2 gap-x-8 gap-y-2"
@@ -32,7 +32,8 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
         phx-change="input_form_change"
         phx-submit="input_form_submit"
       >
-        <div :for={field <- [:from, :to]} class="mb-1" id={"trip-planner-locations-#{field}"}>
+        <fieldset :for={field <- [:from, :to]} id={"trip-planner-locations-#{field}"} class="mb-sm">
+          <legend class="text-charcoal-40 m-0 py-sm">{Phoenix.Naming.humanize(field)}</legend>
           <.algolia_autocomplete
             config_type="trip-planner"
             placeholder="Enter a location"
@@ -52,16 +53,15 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
               {msg}
             </.error_container>
           </.algolia_autocomplete>
-        </div>
-        <div>
+        </fieldset>
+        <fieldset class="mb-sm">
+          <legend class="text-charcoal-40 m-0 py-sm">When</legend>
           <.input_group
-            legend="When"
             form={f}
             field={:datetime_type}
-            id="datetime_type"
             options={[{"Now", "now"}, {"Leave at", "leave_at"}, {"Arrive by", "arrive_by"}]}
             type="radio-button"
-            class="mb-0"
+            class="w-full mb-xs"
           />
           <.error_container :for={{msg, _} <- f[:datetime_type].errors}>
             {msg}
@@ -76,10 +76,11 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
           <.error_container :for={{msg, _} <- f[:datetime].errors}>
             {msg}
           </.error_container>
-        </div>
+        </fieldset>
         <div>
-          <.fieldset id="modes" legend="Modes">
-            <.accordion variant="contained">
+          <fieldset class="mb-sm">
+            <legend class="text-charcoal-40 m-0 py-sm">Modes</legend>
+            <.accordion variant="multiselect">
               <:heading>
                 {Modes.selected_modes(input_value(f, :modes))}
               </:heading>
@@ -99,14 +100,18 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
             <.error_container :for={{msg, _} <- f[:modes].errors}>
               {msg}
             </.error_container>
-          </.fieldset>
-          <div class="inline-flex items-center gap-1">
+          </fieldset>
+          <div class="inline-flex items-center gap-sm mb-sm">
             <.input type="checkbox" field={f[:wheelchair]} label="Prefer accessible routes" />
             <.icon type="icon-svg" name="icon-accessible-small" class="h-5 w-5" />
           </div>
         </div>
-        <div class="col-start-2 justify-self-end">
-          <.button type="submit" phx-disable-with="Planning your trip...">
+        <div class="col-start-2 justify-self-end my-sm">
+          <.button
+            type="submit"
+            phx-disable-with="Planning your trip..."
+            class="w-full justify-center md:w-fit"
+          >
             Get trip suggestions
           </.button>
         </div>

lib/dotcom_web/components/trip_planner/results_summary.ex

@@ -3,8 +3,6 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
 
   use DotcomWeb, :component
 
-  alias Dotcom.TripPlan.InputForm
-
   attr :changeset, :any, required: true
   attr :class, :string, default: ""
   attr :results, :any, required: true
@@ -53,6 +51,8 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
     "Trips from #{from.changes.name} to #{to.changes.name}"
   end
 
+  defp submission_summary(_), do: nil
+
   defp time_summary(%{datetime: datetime, datetime_type: datetime_type}) do
     preamble = if datetime_type == "arrive_by", do: "Arriving by ", else: "Leaving at "
     time_description = Timex.format!(datetime, "{h12}:{m}{am}")

mix.exs

@@ -106,7 +106,7 @@ defmodule DotCom.Mixfile do
       {:jason, "1.4.4", override: true},
       {:logster, "1.1.1"},
       {:mail, "0.3.1"},
-      {:mbta_metro, "0.1.11"},
+      {:mbta_metro, "0.1.15"},
       {:mock, "0.3.8", [only: :test]},
       {:mox, "1.2.0", [only: :test]},
       {:nebulex, "2.6.4"},

mix.lock

@@ -55,7 +55,7 @@
   "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"},
   "makeup_erlang": {:hex, :makeup_erlang, "1.0.1", "c7f58c120b2b5aa5fd80d540a89fdf866ed42f1f3994e4fe189abebeab610839", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "8a89a1eeccc2d798d6ea15496a6e4870b75e014d1af514b1b71fa33134f57814"},
   "makeup_html": {:hex, :makeup_html, "0.1.2", "19d4050c0978a4f1618ffe43054c0049f91fe5feeb9ae8d845b5dc79c6008ae5", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "b7fb9afedd617d167e6644a0430e49c1279764bfd3153da716d4d2459b0998c5"},
-  "mbta_metro": {:hex, :mbta_metro, "0.1.11", "1ab2cfef7e80594e9f5d3d3239b16e6061cba7b09e893a3ec49c80073422c446", [:mix], [{:cva, "0.2.2", [hex: :cva, repo: "hexpm", optional: false]}, {:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "99c31966dc0322a171e3715dcbbc41b185998dc0f1ded906b0d4680f1b9ac19b"},
+  "mbta_metro": {:hex, :mbta_metro, "0.1.15", "762d54352bd2699f3e2cc82e8a72bd3114e9e26bf71372c0e845e5fa453f8811", [:mix], [{:cva, "0.2.2", [hex: :cva, repo: "hexpm", optional: false]}, {:floki, "~> 0.36", [hex: :floki, repo: "hexpm", optional: false]}, {:heroicons, "0.5.6", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "1.4.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "1.7.14", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "1.0.0-rc.6", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "0.6.4", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:timex, "3.7.11", [hex: :timex, repo: "hexpm", optional: false]}], "hexpm", "16ee54e682ac04aec379b42c73a9b78a16745619ca81139df8eb756a454235e6"},
   "meck": {:hex, :meck, "0.9.2", "85ccbab053f1db86c7ca240e9fc718170ee5bda03810a6292b5306bf31bae5f5", [:rebar3], [], "hexpm", "81344f561357dc40a8344afa53767c32669153355b626ea9fcbc8da6b3045826"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
   "mime": {:hex, :mime, "2.0.6", "8f18486773d9b15f95f4f4f1e39b710045fa1de891fada4516559967276e4dc2", [:mix], [], "hexpm", "c9945363a6b26d747389aac3643f8e0e09d30499a138ad64fe8fd1d13d9b153e"},