style: update navigation bar and form controls (#6)

Update navigation bar design and improve form control styling for better consistency and usability
abdullathedruid · Nov 28, 2024 · 1e8beae · 1e8beae
1 parent 8298af7
commit 1e8beae
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 135 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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