From 5d95c2526f883216c581dde4808f241438939d55 Mon Sep 17 00:00:00 2001
From: Leonardo de Oliveira Ramos <oliveirarleo@gmail.com>
Date: Mon, 8 Jul 2024 17:37:07 -0300
Subject: [PATCH 1/3] feat: improving readability for projects menu

---
 lib/lightning_web/live/components/menu.ex | 138 ++++++++++++----------
 1 file changed, 73 insertions(+), 65 deletions(-)

diff --git a/lib/lightning_web/live/components/menu.ex b/lib/lightning_web/live/components/menu.ex
index 9366f37f8d..5516210f97 100644
--- a/lib/lightning_web/live/components/menu.ex
+++ b/lib/lightning_web/live/components/menu.ex
@@ -57,74 +57,82 @@ defmodule LightningWeb.Components.Menu do
 
   def projects_dropdown(assigns) do
     ~H"""
-    <div class="relative my-4 mx-2 px-2">
-      <button
-        type="button"
-        class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3
+    <%= if length(assigns[:projects]) == 0 do %>
+      <div class="p-2 mb-4 mt-4 text-center text-primary-300 bg-primary-800">
+        <span class="inline-block align-middle text-sm">
+          You don't have access to any projects
+        </span>
+      </div>
+    <% else %>
+      <div class="relative my-4 mx-2 px-2">
+        <button
+          type="button"
+          class="relative w-full cursor-default rounded-md bg-white py-1.5 pl-3
         pr-10 text-left text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300
         focus:outline-none focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
-        aria-haspopup="listbox"
-        aria-expanded="true"
-        aria-labelledby="listbox-label"
-        phx-click={show_dropdown("project-picklist")}
-      >
-        <span class="block truncate">
-          <%= if assigns[:selected_project],
-            do: @selected_project.name,
-            else: "Go to project" %>
-        </span>
-        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-          <svg
-            class="h-5 w-5 text-gray-400"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-      <ul
-        id="project-picklist"
-        class="hidden absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-        tabindex="-1"
-        role="listbox"
-        aria-labelledby="listbox-label"
-        aria-activedescendant="listbox-option-3"
-        phx-click-away={hide_dropdown("project-picklist")}
-      >
-        <%= for project <- @projects do %>
-          <.link navigate={~p"/projects/#{project.id}/w"}>
-            <li
-              class={[
-                "text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-indigo-600 group hover:text-white"
-              ]}
-              role="option"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          phx-click={show_dropdown("project-picklist")}
+        >
+          <span class="block truncate">
+            <%= if assigns[:selected_project],
+              do: @selected_project.name,
+              else: "Go to project" %>
+          </span>
+          <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+            <svg
+              class="h-5 w-5 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
             >
-              <span class={[
-                "font-normal block truncate",
-                assigns[:project] && @project.id == project.id && "font-semibold"
-              ]}>
-                <%= project.name %>
-              </span>
-              <span class={[
-                "absolute inset-y-0 right-0 flex items-center pr-4",
-                (!assigns[:project] || @project.id != project.id) && "hidden"
-              ]}>
-                <.icon
-                  name="hero-check"
-                  class="group-hover:text-white text-indigo-600"
-                />
-              </span>
-            </li>
-          </.link>
-        <% end %>
-      </ul>
-    </div>
+              <path
+                fill-rule="evenodd"
+                d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </button>
+        <ul
+          id="project-picklist"
+          class="hidden absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          tabindex="-1"
+          role="listbox"
+          aria-labelledby="listbox-label"
+          aria-activedescendant="listbox-option-3"
+          phx-click-away={hide_dropdown("project-picklist")}
+        >
+          <%= for project <- @projects do %>
+            <.link navigate={~p"/projects/#{project.id}/w"}>
+              <li
+                class={[
+                  "text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-indigo-600 group hover:text-white"
+                ]}
+                role="option"
+              >
+                <span class={[
+                  "font-normal block truncate",
+                  assigns[:project] && @project.id == project.id && "font-semibold"
+                ]}>
+                  <%= project.name %>
+                </span>
+                <span class={[
+                  "absolute inset-y-0 right-0 flex items-center pr-4",
+                  (!assigns[:project] || @project.id != project.id) && "hidden"
+                ]}>
+                  <.icon
+                    name="hero-check"
+                    class="group-hover:text-white text-indigo-600"
+                  />
+                </span>
+              </li>
+            </.link>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
     """
   end
 

From 82b6022de0c1c4a94f5d7dacf41e0bdaf379cb0d Mon Sep 17 00:00:00 2001
From: Leonardo de Oliveira Ramos <oliveirarleo@gmail.com>
Date: Mon, 8 Jul 2024 17:37:32 -0300
Subject: [PATCH 2/3] feat: improving saving button flickering

---
 lib/lightning_web/live/components/form.ex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/lightning_web/live/components/form.ex b/lib/lightning_web/live/components/form.ex
index 63c1389c3b..9a52f354fc 100644
--- a/lib/lightning_web/live/components/form.ex
+++ b/lib/lightning_web/live/components/form.ex
@@ -14,6 +14,7 @@ defmodule LightningWeb.Components.Form do
       py-2
       px-4
       border
+      min-w-\[7rem\]
       border-transparent
       shadow-sm
       text-sm

From 2be8d67d72df896de9d930da47af223e47c045e1 Mon Sep 17 00:00:00 2001
From: Leonardo de Oliveira Ramos <oliveirarleo@gmail.com>
Date: Mon, 8 Jul 2024 17:39:32 -0300
Subject: [PATCH 3/3] chore: making buttons text uniform

---
 lib/lightning_web/live/auth_providers/form_component.ex      | 2 +-
 lib/lightning_web/live/first_setup_live/superuser.html.heex  | 5 ++++-
 lib/lightning_web/live/project_live/form_component.html.heex | 5 ++++-
 .../live/project_live/github_sync_component.html.heex        | 2 +-
 lib/lightning_web/live/project_live/settings.html.heex       | 4 ++--
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/lib/lightning_web/live/auth_providers/form_component.ex b/lib/lightning_web/live/auth_providers/form_component.ex
index 5f5eb97d1f..53f81acdaf 100644
--- a/lib/lightning_web/live/auth_providers/form_component.ex
+++ b/lib/lightning_web/live/auth_providers/form_component.ex
@@ -184,7 +184,7 @@ defmodule LightningWeb.AuthProvidersLive.FormComponent do
               <div class="flex">
                 <div class="flex-none">
                   <.submit_button
-                    phx-disable-with="Saving"
+                    phx-disable-with="Saving..."
                     disabled={!@changeset.valid?}
                   >
                     Save
diff --git a/lib/lightning_web/live/first_setup_live/superuser.html.heex b/lib/lightning_web/live/first_setup_live/superuser.html.heex
index c6883ad22f..e63038c5dc 100644
--- a/lib/lightning_web/live/first_setup_live/superuser.html.heex
+++ b/lib/lightning_web/live/first_setup_live/superuser.html.heex
@@ -87,7 +87,10 @@
       </div>
 
       <div class="mt-2">
-        <.submit_button phx-disable-with="Saving" disabled={!@changeset.valid?}>
+        <.submit_button
+          phx-disable-with="Saving..."
+          disabled={!@changeset.valid?}
+        >
           Save
         </.submit_button>
       </div>
diff --git a/lib/lightning_web/live/project_live/form_component.html.heex b/lib/lightning_web/live/project_live/form_component.html.heex
index c4a96f8032..0ac273b70e 100644
--- a/lib/lightning_web/live/project_live/form_component.html.heex
+++ b/lib/lightning_web/live/project_live/form_component.html.heex
@@ -122,7 +122,10 @@
         </.link>
       </span>
       <div class="inline-block">
-        <.submit_button phx-disable-with="Saving" disabled={!@changeset.valid?}>
+        <.submit_button
+          phx-disable-with="Saving..."
+          disabled={!@changeset.valid?}
+        >
           Save
         </.submit_button>
       </div>
diff --git a/lib/lightning_web/live/project_live/github_sync_component.html.heex b/lib/lightning_web/live/project_live/github_sync_component.html.heex
index 9d6721e95d..a5895b6df9 100644
--- a/lib/lightning_web/live/project_live/github_sync_component.html.heex
+++ b/lib/lightning_web/live/project_live/github_sync_component.html.heex
@@ -186,7 +186,7 @@
                 "Contact an editor or admin to sync."
             }
             phx-click="initiate-sync"
-            phx-disable-with="Syncing.."
+            phx-disable-with="Syncing..."
             phx-target={@myself}
             class="bg-primary-600 hover:bg-primary-700 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
           >
diff --git a/lib/lightning_web/live/project_live/settings.html.heex b/lib/lightning_web/live/project_live/settings.html.heex
index ed1b29f035..cb50f1fe3d 100644
--- a/lib/lightning_web/live/project_live/settings.html.heex
+++ b/lib/lightning_web/live/project_live/settings.html.heex
@@ -116,7 +116,7 @@
                     !(@project_changeset.valid? and can_edit_project(assigns) and
                         can_edit_project(assigns))
                   }
-                  phx-disable-with="Saving"
+                  phx-disable-with="Saving..."
                 >
                   Save
                 </Form.submit_button>
@@ -994,7 +994,7 @@
                     not @project_changeset.valid? or
                       not @can_edit_data_retention
                   }
-                  phx-disable-with="Saving"
+                  phx-disable-with="Saving..."
                 >
                   Save
                 </Form.submit_button>