From 1e8beaec5a3cfa65419020045f0b81f4ccce237a Mon Sep 17 00:00:00 2001
From: abdullathedruid <abdulla.alkamil@gmail.com>
Date: Thu, 28 Nov 2024 02:12:27 +0000
Subject: [PATCH] style: update navigation bar and form controls (#6)

Update navigation bar design and improve form control styling for better
consistency and usability
---
 .../components/core_components.ex             |   6 +-
 lib/gym_live_web/components/layouts.ex        |  38 +++--
 .../components/layouts/live.html.heex         |   1 +
 .../live/auth/user_settings_live.ex           | 130 +++++++++---------
 .../live/components/layout/nav.ex             |   4 +
 .../live/workouts/edit_workout.ex             | 121 +++++++++-------
 .../live/workouts/view_workouts.ex            |   8 +-
 7 files changed, 173 insertions(+), 135 deletions(-)

diff --git a/lib/gym_live_web/components/core_components.ex b/lib/gym_live_web/components/core_components.ex
index 8a35154..056a183 100644
--- a/lib/gym_live_web/components/core_components.ex
+++ b/lib/gym_live_web/components/core_components.ex
@@ -326,8 +326,10 @@ defmodule GymLiveWeb.CoreComponents do
       <select
         id={@id}
         name={@name}
-        class="block w-32 rounded-md border border-gray-300 shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm"
-        multiple={@multiple}
+        class={[
+          "block w-full rounded-md border border-gray-300 shadow-sm focus:border-zinc-400 focus:ring-0 sm:text-sm",
+          @errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400"
+        ]}
         {@rest}
       >
         <option :if={@prompt} value=""><%= @prompt %></option>
diff --git a/lib/gym_live_web/components/layouts.ex b/lib/gym_live_web/components/layouts.ex
index a79804e..9740441 100644
--- a/lib/gym_live_web/components/layouts.ex
+++ b/lib/gym_live_web/components/layouts.ex
@@ -5,31 +5,41 @@ defmodule GymLiveWeb.Layouts do
 
   def navigation_bar(assigns) do
     ~H"""
-    <div class="fixed left-2 bottom-2 right-2 p-5 px-6 m-2 flex items-center justify-around bg-gray-800 shadow-3xl text-gray-400 rounded-2xl">
-      <.link patch={~p"/edit_workout"}>
-        <.nav_icon name="hero-pencil-square" highlighted={@active_tab == :edit_workout} />
-      </.link>
-      <.link patch={~p"/workouts"}>
-        <.nav_icon name="hero-document-chart-bar" highlighted={@active_tab == :view_workouts} />
-      </.link>
-      <.link patch={~p"/charts"}>
-        <.nav_icon name="hero-chart-bar" highlighted={@active_tab == :view_charts} />
-      </.link>
-      <.nav_icon name="hero-user" />
+    <div class="fixed inset-x-0 bottom-0 z-50 bg-gray-900 border-t border-gray-800">
+      <nav class="flex justify-around">
+        <.link patch={~p"/edit_workout"} class="w-full">
+          <.nav_icon name="hero-pencil-square" highlighted={@active_tab == :edit_workout} label="Add" />
+        </.link>
+        <.link patch={~p"/workouts"} class="w-full">
+          <.nav_icon
+            name="hero-document-chart-bar"
+            highlighted={@active_tab == :view_workouts}
+            label="History"
+          />
+        </.link>
+        <.link patch={~p"/charts"} class="w-full">
+          <.nav_icon name="hero-chart-bar" highlighted={@active_tab == :view_charts} label="Charts" />
+        </.link>
+        <.link patch={~p"/users/settings"} class="w-full">
+          <.nav_icon name="hero-user" highlighted={@active_tab == :settings} label="Profile" />
+        </.link>
+      </nav>
     </div>
     """
   end
 
   attr :name, :string, required: true
   attr :highlighted, :boolean, default: false
+  attr :label, :string, required: true
 
   def nav_icon(assigns) do
     ~H"""
     <div class={[
-      "flex flex-col items-center transition ease-in duration-200 cursor-pointer",
-      if(@highlighted, do: "text-blue-400", else: "hover:text-blue-200")
+      "flex flex-col items-center py-4 transition duration-100 ease-in-out",
+      if(@highlighted, do: "text-blue-500", else: "text-gray-400 hover:text-gray-200")
     ]}>
-      <.icon name={@name} class="h-8 w-8" />
+      <.icon name={@name} class="h-6 w-6 mb-1" />
+      <span class="text-xs font-medium"><%= @label %></span>
     </div>
     """
   end
diff --git a/lib/gym_live_web/components/layouts/live.html.heex b/lib/gym_live_web/components/layouts/live.html.heex
index 764c31d..8290b49 100644
--- a/lib/gym_live_web/components/layouts/live.html.heex
+++ b/lib/gym_live_web/components/layouts/live.html.heex
@@ -1,5 +1,6 @@
 <div>
   <div class="mb-24">
+    <.flash_group flash={@flash} />
     <%= @inner_content %>
   </div>
   <.navigation_bar :if={@active_tab} active_tab={@active_tab} />
diff --git a/lib/gym_live_web/live/auth/user_settings_live.ex b/lib/gym_live_web/live/auth/user_settings_live.ex
index 77055c8..83f7075 100644
--- a/lib/gym_live_web/live/auth/user_settings_live.ex
+++ b/lib/gym_live_web/live/auth/user_settings_live.ex
@@ -1,73 +1,75 @@
 defmodule GymLiveWeb.Live.Auth.UserSettings do
-  use GymLiveWeb, :live_view
+  use GymLiveWeb, :live_app
 
   alias GymLive.Account
 
   def render(assigns) do
     ~H"""
-    <.header class="text-center">
-      Account Settings
-      <:subtitle>Manage your account email address and password settings</:subtitle>
-    </.header>
-
-    <div class="space-y-12 divide-y">
-      <div>
-        <.simple_form
-          for={@email_form}
-          id="email_form"
-          phx-submit="update_email"
-          phx-change="validate_email"
-        >
-          <.input field={@email_form[:email]} type="email" label="Email" required />
-          <.input
-            field={@email_form[:current_password]}
-            name="current_password"
-            id="current_password_for_email"
-            type="password"
-            label="Current password"
-            value={@email_form_current_password}
-            required
-          />
-          <:actions>
-            <.button phx-disable-with="Changing...">Change Email</.button>
-          </:actions>
-        </.simple_form>
-      </div>
-      <div>
-        <.simple_form
-          for={@password_form}
-          id="password_form"
-          action={~p"/users/log_in?_action=password_updated"}
-          method="post"
-          phx-change="validate_password"
-          phx-submit="update_password"
-          phx-trigger-action={@trigger_submit}
-        >
-          <.input
-            field={@password_form[:email]}
-            type="hidden"
-            id="hidden_user_email"
-            value={@current_email}
-          />
-          <.input field={@password_form[:password]} type="password" label="New password" required />
-          <.input
-            field={@password_form[:password_confirmation]}
-            type="password"
-            label="Confirm new password"
-          />
-          <.input
-            field={@password_form[:current_password]}
-            name="current_password"
-            type="password"
-            label="Current password"
-            id="current_password_for_password"
-            value={@current_password}
-            required
-          />
-          <:actions>
-            <.button phx-disable-with="Changing...">Change Password</.button>
-          </:actions>
-        </.simple_form>
+    <div class="px-4 pb-24">
+      <.header class="text-center">
+        Account Settings
+        <:subtitle>Manage your account email address and password settings</:subtitle>
+      </.header>
+
+      <div class="space-y-12 divide-y">
+        <div>
+          <.simple_form
+            for={@email_form}
+            id="email_form"
+            phx-submit="update_email"
+            phx-change="validate_email"
+          >
+            <.input field={@email_form[:email]} type="email" label="Email" required />
+            <.input
+              field={@email_form[:current_password]}
+              name="current_password"
+              id="current_password_for_email"
+              type="password"
+              label="Current password"
+              value={@email_form_current_password}
+              required
+            />
+            <:actions>
+              <.button phx-disable-with="Changing...">Change Email</.button>
+            </:actions>
+          </.simple_form>
+        </div>
+        <div>
+          <.simple_form
+            for={@password_form}
+            id="password_form"
+            action={~p"/users/log_in?_action=password_updated"}
+            method="post"
+            phx-change="validate_password"
+            phx-submit="update_password"
+            phx-trigger-action={@trigger_submit}
+          >
+            <.input
+              field={@password_form[:email]}
+              type="hidden"
+              id="hidden_user_email"
+              value={@current_email}
+            />
+            <.input field={@password_form[:password]} type="password" label="New password" required />
+            <.input
+              field={@password_form[:password_confirmation]}
+              type="password"
+              label="Confirm new password"
+            />
+            <.input
+              field={@password_form[:current_password]}
+              name="current_password"
+              type="password"
+              label="Current password"
+              id="current_password_for_password"
+              value={@current_password}
+              required
+            />
+            <:actions>
+              <.button phx-disable-with="Changing...">Change Password</.button>
+            </:actions>
+          </.simple_form>
+        </div>
       </div>
     </div>
     """
diff --git a/lib/gym_live_web/live/components/layout/nav.ex b/lib/gym_live_web/live/components/layout/nav.ex
index 6ca9a32..f332ac0 100644
--- a/lib/gym_live_web/live/components/layout/nav.ex
+++ b/lib/gym_live_web/live/components/layout/nav.ex
@@ -1,6 +1,7 @@
 defmodule GymLiveWeb.Live.Components.Layout.Nav do
   alias GymLiveWeb.Live.Workouts.{EditWorkout, ViewWorkout, ViewWorkouts}
   alias GymLiveWeb.Live.Charts.ViewCharts
+  alias GymLiveWeb.Live.Auth.UserSettings
   import Phoenix.LiveView
   use Phoenix.Component
 
@@ -25,6 +26,9 @@ defmodule GymLiveWeb.Live.Components.Layout.Nav do
         {ViewCharts, _} ->
           :view_charts
 
+        {UserSettings, _} ->
+          :settings
+
         _ ->
           nil
       end
diff --git a/lib/gym_live_web/live/workouts/edit_workout.ex b/lib/gym_live_web/live/workouts/edit_workout.ex
index 9cfb77a..2b0aef6 100644
--- a/lib/gym_live_web/live/workouts/edit_workout.ex
+++ b/lib/gym_live_web/live/workouts/edit_workout.ex
@@ -32,7 +32,7 @@ defmodule GymLiveWeb.Live.Workouts.EditWorkout do
 
   def render(assigns) do
     ~H"""
-    <div :if={@workout} class="h-full">
+    <div :if={@workout} class="flex flex-col h-screen">
       <.modal id="cancel-modal">
         <p>
           Are you sure you want to abandon your workout? Your workout data will be lost.
@@ -40,7 +40,7 @@ defmodule GymLiveWeb.Live.Workouts.EditWorkout do
         <div class="sm:flex sm:flex-row-reverse bg-gray-50 px-4 py-3 sm:px-6">
           <button
             phx-click="abandon_workout"
-            class="infline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+            class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
           >
             Abandon workout
           </button>
@@ -52,25 +52,35 @@ defmodule GymLiveWeb.Live.Workouts.EditWorkout do
           </button>
         </div>
       </.modal>
-      <div class="mx-2 my-2 flex flex-row justify-around">
-        <div>
-          <p class="text-3xl"><%= @workout.title %></p>
-          <p class=""><%= Time.format_time(@seconds) %></p>
-        </div>
-        <div class="flex flex-col justify-center">
-          <button class="bg-green-400 rounded-xl px-1 py-1" phx-click="save_workout">
+
+      <div class="sticky top-0 bg-blue-600 text-white px-6 py-4 font-semibold shadow-md">
+        <div class="flex justify-between items-center">
+          <div>
+            <h1 class="text-xl font-bold"><%= @workout.title %></h1>
+            <p class="text-sm text-blue-100"><%= Time.format_time(@seconds) %></p>
+          </div>
+          <button
+            phx-click="save_workout"
+            class="px-4 py-2 bg-green-500/90 hover:bg-green-500 text-white rounded-md transition duration-150 ease-in-out text-sm font-medium shadow-sm"
+          >
             Finish Workout
           </button>
         </div>
       </div>
-      <div class="mx-6 relative shadow-md rounded-lg overflow-x-clip">
-        <.sets_table :if={length(@workout.sets) > 0} workout={@workout} />
-      </div>
-      <.set_form form={@form} />
-      <div class="mt-16 flex-row flex justify-around">
-        <button phx-click={show_modal("cancel-modal")} class="bg-red-400 px-2 py-2 rounded-2xl">
-          Abandon workout
-        </button>
+
+      <div class="flex-grow min-h-screen w-full pb-24">
+        <div class="relative w-full bg-white">
+          <.sets_table :if={length(@workout.sets) > 0} workout={@workout} />
+          <.set_form form={@form} />
+          <div class="px-6 py-4">
+            <button
+              phx-click={show_modal("cancel-modal")}
+              class="max-w-xs mx-auto flex justify-center py-2 px-4 bg-red-500/90 hover:bg-red-500 text-white rounded-md transition duration-150 ease-in-out text-sm font-medium shadow-sm"
+            >
+              Abandon workout
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     """
@@ -78,39 +88,45 @@ defmodule GymLiveWeb.Live.Workouts.EditWorkout do
 
   def sets_table(assigns) do
     ~H"""
-    <table class="w-full text-sm text-left">
-      <thead class="text-xs uppercase">
-        <tr class="bg-gray-300">
-          <th scope="col" class="px-4 py-3">Exercise</th>
-          <th scope="col" class="px-4 py-3">Weight</th>
-          <th scope="col" class="px-4 py-3">Reps</th>
-          <th scope="col" class="px-4 py-3">Action</th>
-        </tr>
-      </thead>
-      <tbody id="sets">
-        <tr :for={set <- @workout.sets} class="even:bg-gray-100 odd:bg-gray-50">
-          <td class="px-4 py-3"><%= Exercises.get_exercise_name(set.exercise) %></td>
-          <td class="px-4 py-3"><%= set.weight %></td>
-          <td class="px-4 py-3"><%= set.reps %></td>
-          <td class="px-4 py-3 text-center">
-            <button phx-click="remove_set" phx-value-set-id={set.id}>
-              <.icon name="hero-x-mark" class="bg-red-500" />
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="overflow-x-auto">
+      <table class="w-full text-sm text-left">
+        <thead class="text-xs uppercase bg-gray-100">
+          <tr>
+            <th scope="col" class="px-6 py-3 font-medium text-gray-500">Exercise</th>
+            <th scope="col" class="px-6 py-3 font-medium text-gray-500">Weight</th>
+            <th scope="col" class="px-6 py-3 font-medium text-gray-500">Reps</th>
+            <th scope="col" class="px-6 py-3 font-medium text-gray-500">Action</th>
+          </tr>
+        </thead>
+        <tbody id="sets" class="divide-y divide-gray-100">
+          <tr :for={set <- @workout.sets} class="hover:bg-gray-50">
+            <td class="px-6 py-4 text-gray-900"><%= Exercises.get_exercise_name(set.exercise) %></td>
+            <td class="px-6 py-4 text-gray-900"><%= set.weight %></td>
+            <td class="px-6 py-4 text-gray-900"><%= set.reps %></td>
+            <td class="px-6 py-4">
+              <button
+                phx-click="remove_set"
+                phx-value-set-id={set.id}
+                class="text-red-500/90 hover:text-red-500 transition duration-150 ease-in-out"
+              >
+                <.icon name="hero-x-mark" class="h-5 w-5" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
     """
   end
 
   def set_form(assigns) do
     ~H"""
-    <div class="rounded-lg bg-gray-300 mt-2 py-2 px-3">
+    <div class="p-6 border-t border-gray-100">
       <.simple_form for={@form} phx-change="validate" phx-submit="save_set">
-        <div>
-          <div class="flex flex-row gap-8 justify-around">
-            <div class="flex flex-col items-center ">
-              <p class="whitespace-nowrap">Exercise</p>
+        <div class="space-y-6">
+          <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            <div class="sm:col-span-1">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Exercise</label>
               <.input
                 field={@form[:exercise]}
                 type="select"
@@ -120,16 +136,19 @@ defmodule GymLiveWeb.Live.Workouts.EditWorkout do
                 }
               />
             </div>
-            <div class="flex flex-col items-center">
-              <p class="whitespace-nowrap">Weight (kg)</p>
-              <.input field={@form[:weight]} type="number" />
+            <div class="sm:col-span-1">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label>
+              <.input field={@form[:weight]} type="number" class="w-full" />
             </div>
-            <div class="flex flex-col items-center">
-              <p class="whitespace-nowrap">Reps</p>
-              <.input field={@form[:reps]} type="number" />
+            <div class="sm:col-span-1">
+              <label class="block text-sm font-medium text-gray-700 mb-1">Reps</label>
+              <.input field={@form[:reps]} type="number" class="w-full" />
             </div>
           </div>
-          <button class="mt-3 mx-auto block bg-green-400 rounded-lg px-4 py-2" phx-throttle="1000">
+          <button
+            class="max-w-xs mx-auto flex justify-center py-2 px-4 bg-blue-500/90 hover:bg-blue-500 text-white rounded-md transition duration-150 ease-in-out text-sm font-medium shadow-sm"
+            phx-throttle="1000"
+          >
             Add set
           </button>
         </div>
diff --git a/lib/gym_live_web/live/workouts/view_workouts.ex b/lib/gym_live_web/live/workouts/view_workouts.ex
index 9b04b74..5f70545 100644
--- a/lib/gym_live_web/live/workouts/view_workouts.ex
+++ b/lib/gym_live_web/live/workouts/view_workouts.ex
@@ -17,11 +17,11 @@ defmodule GymLiveWeb.Live.Workouts.ViewWorkouts do
 
   def render(assigns) do
     ~H"""
-    <div :if={match?([_ | _], @workouts)} class="flex flex-col h-screen bg-gray-50">
-      <div class="flex-grow min-h-screen w-full px-4 py-6">
-        <div class="relative w-full rounded-lg shadow-sm bg-white">
+    <div :if={match?([_ | _], @workouts)} class="flex flex-col h-screen">
+      <div class="flex-grow min-h-screen w-full pb-24">
+        <div class="relative w-full bg-white">
           <%= for {month, workouts} <- Enum.group_by(@workouts, &Timex.beginning_of_month(&1.inserted_at)) |> Enum.sort(&Timex.diff(elem(&1, 0), elem(&2, 0))>0) do %>
-            <div class="sticky top-0 bg-blue-600 text-white px-6 py-4 font-semibold shadow-md first:rounded-t-lg">
+            <div class="sticky top-0 bg-blue-600 text-white px-6 py-4 font-semibold shadow-md">
               <%= Timex.format!(month, "{Mfull} {YYYY}") %>
             </div>
             <div class="divide-y divide-gray-100">