Cleanup css (OpenFn#2324)

udsm-dhis2-lab · Jul 24, 2024 · 1e74c9a · 1e74c9a
1 parent 73989db
commit 1e74c9a
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 57 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,9 @@ and this project adheres to
 
 ### Changed
 
+- CSS - standardized some more tailwind components
+  [PR#2324](https://github.com/OpenFn/lightning/pull/2324)
+
 ### Fixed
 
 ## [v2.7.8] - 2024-07-24

diff --git a/assets/css/app.css b/assets/css/app.css
@@ -312,3 +312,26 @@ div.line-num::before {
     @apply text-yellow-700 hover:text-yellow-600;
   }
 }
+
+@layer components {
+  .table-action {
+    @apply inline-flex
+    items-center
+    rounded-md
+    bg-white
+    mx-0.5
+    px-2.5
+    py-1.5
+    text-sm
+    font-semibold
+    text-gray-900
+    shadow-sm
+    ring-1
+    ring-inset
+    ring-gray-300
+    hover:bg-gray-50
+    disabled:cursor-not-allowed
+    disabled:opacity-30
+    disabled:hover:bg-white;
+  }
+}
diff --git a/lib/lightning_web/live/components/credentials.ex b/lib/lightning_web/live/components/credentials.ex
@@ -385,26 +385,30 @@ defmodule LightningWeb.Components.Credentials do
             <.th>Projects with access</.th>
             <.th>Type</.th>
             <.th>Production</.th>
-            <.th>Actions</.th>
+            <.th>
+              <span class="sr-only">Actions</span>
+            </.th>
           </.tr>
 
           <.tr
             :for={credential <- @credentials}
             id={"#{@id}-#{credential.id}"}
             class="hover:bg-gray-100 transition-colors duration-200"
           >
-            <.td class="break-words max-w-[15rem] flex items-center">
-              <%= credential.name %>
-              <%= if credential.schema == "oauth" and !credential.oauth_client_id do %>
-                <span
-                  id={"#{credential.id}-client-not-found-tooltip"}
-                  phx-hook="Tooltip"
-                  aria-label="OAuth client not found"
-                  data-allow-html="true"
-                >
-                  <Heroicons.exclamation_triangle class="h-5 w-5 ml-2" />
-                </span>
-              <% end %>
+            <.td class="break-words max-w-[15rem]">
+              <div class="flex-auto items-center">
+                <%= credential.name %>
+                <%= if credential.schema == "oauth" and !credential.oauth_client_id do %>
+                  <span
+                    id={"#{credential.id}-client-not-found-tooltip"}
+                    phx-hook="Tooltip"
+                    aria-label="OAuth client not found"
+                    data-allow-html="true"
+                  >
+                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 ml-2" />
+                  </span>
+                <% end %>
+              </div>
             </.td>
             <.td class="break-words max-w-[25rem]">
               <%= for project_name <- credential.project_names do %>
@@ -424,7 +428,7 @@ defmodule LightningWeb.Components.Credentials do
                 </div>
               <% end %>
             </.td>
-            <.td>
+            <.td class="text-right">
               <%= render_slot(@actions, credential) %>
             </.td>
           </.tr>
@@ -458,7 +462,7 @@ defmodule LightningWeb.Components.Credentials do
             <.th>Name</.th>
             <.th>Projects With Access</.th>
             <.th>Authorization URL</.th>
-            <.th>Actions</.th>
+            <.th><span class="sr-only">Actions</span></.th>
           </.tr>
 
           <.tr
@@ -477,7 +481,7 @@ defmodule LightningWeb.Components.Credentials do
             <.td class="break-words max-w-[21rem]">
               <%= client.authorization_endpoint %>
             </.td>
-            <.td>
+            <.td class="text-right">
               <%= render_slot(@actions, client) %>
             </.td>
           </.tr>

diff --git a/lib/lightning_web/live/components/form.ex b/lib/lightning_web/live/components/form.ex
@@ -229,6 +229,7 @@ defmodule LightningWeb.Components.Form do
       text-sm
       font-medium
       text-secondary-700
+      mb-1
     ]
 
     error_classes = ~w[
@@ -377,7 +378,7 @@ defmodule LightningWeb.Components.Form do
 
     ~H"""
     <%= if assigns[:tooltip] do %>
-      <div class="flex flex-row">
+      <div class="flex flex-row items-end">
         <%= Phoenix.HTML.Form.label(@form, @field, @opts) do %>
           <div class="flex items-center">
             <%= @title %>

diff --git a/lib/lightning_web/live/credential_live/credential_form_component.ex b/lib/lightning_web/live/credential_live/credential_form_component.ex
@@ -305,7 +305,7 @@ defmodule LightningWeb.CredentialLive.CredentialFormComponent do
       end)
 
     ~H"""
-    <div class="text-xs">
+    <div class="text-xs text-left">
       <.modal id={@id} width="xl:min-w-1/3 min-w-1/2 max-w-full">
         <:title>
           <div class="flex justify-between">
@@ -384,7 +384,7 @@ defmodule LightningWeb.CredentialLive.CredentialFormComponent do
 
   def render(%{page: :second, schema: "oauth"} = assigns) do
     ~H"""
-    <div class="mt-10 sm:mt-0">
+    <div class="text-left mt-10 sm:mt-0">
       <.modal id={@id} width="xl:min-w-1/3 min-w-1/2 w-[300px]">
         <:title>
           <div class="flex justify-between">
@@ -425,7 +425,7 @@ defmodule LightningWeb.CredentialLive.CredentialFormComponent do
 
   def render(%{page: :second} = assigns) do
     ~H"""
-    <div class="mt-10 sm:mt-0">
+    <div class="text-left mt-10 sm:mt-0">
       <.modal id={@id} width="xl:min-w-1/3 min-w-1/2 w-[300px]">
         <:title>
           <div class="flex justify-between">

diff --git a/lib/lightning_web/live/credential_live/index.ex b/lib/lightning_web/live/credential_live/index.ex
@@ -122,17 +122,18 @@ defmodule LightningWeb.CredentialLive.Index do
       <span>
         <.link
           id={"cancel-deletion-#{@credential.id}"}
+          class="table-action"
           href="#"
           phx-click="cancel_deletion"
           phx-value-id={@credential.id}
         >
           Cancel deletion
         </.link>
       </span>
-      |
       <span>
         <.link
           id={"delete-now-#{@credential.id}"}
+          class="table-action"
           navigate={~p"/credentials/#{@credential.id}/delete"}
         >
           Delete now
@@ -144,6 +145,7 @@ defmodule LightningWeb.CredentialLive.Index do
       <span>
         <.link
           id={"delete-#{@credential.id}"}
+          class="table-action"
           navigate={~p"/credentials/#{@credential.id}/delete"}
         >
           Delete

diff --git a/lib/lightning_web/live/credential_live/index.html.heex b/lib/lightning_web/live/credential_live/index.html.heex
@@ -54,17 +54,16 @@
         <div :if={client.user_id == @current_user.id}>
           <span>
             <.link
-              class="link"
+              class="table-action"
               phx-click={show_modal("edit-oauth-client-#{client.id}-modal")}
             >
               Edit
             </.link>
           </span>
-          |
           <span>
             <.link
               id={"delete-oauth-client-#{client.id}-button"}
-              class="link"
+              class="table-action"
               phx-click={show_modal("delete_oauth_client_#{client.id}_modal")}
             >
               Delete
@@ -112,13 +111,14 @@
       <:actions :let={credential}>
         <div :if={credential.user_id == @current_user.id}>
           <span>
-            <.link phx-click={
-              show_modal("edit-credential-#{credential.id}-modal")
-            }>
+            <.link
+              class="table-action"
+              phx-click={show_modal("edit-credential-#{credential.id}-modal")}
+            >
               Edit
             </.link>
           </span>
-          | <.delete_action socket={@socket} credential={credential} />
+          <.delete_action socket={@socket} credential={credential} />
           <.live_component
             id={"edit-credential-#{credential.id}-modal"}
             module={LightningWeb.CredentialLive.CredentialFormComponent}

diff --git a/lib/lightning_web/live/credential_live/oauth_client_form_component.ex b/lib/lightning_web/live/credential_live/oauth_client_form_component.ex
@@ -336,7 +336,7 @@ defmodule LightningWeb.CredentialLive.OauthClientFormComponent do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="mt-10 sm:mt-0">
+    <div class="text-left mt-10 sm:mt-0">
       <.modal id={@id} width="w-[32rem] lg:w-[44rem]">
         <:title>
           <div class="flex justify-between">

diff --git a/lib/lightning_web/live/project_live/index.ex b/lib/lightning_web/live/project_live/index.ex
@@ -88,16 +88,17 @@ defmodule LightningWeb.ProjectLive.Index do
         <.link
           id={"cancel-deletion-#{@project.id}"}
           href="#"
+          class="table-action"
           phx-click="cancel_deletion"
           phx-value-id={@project.id}
         >
           Cancel deletion
         </.link>
       </span>
-      |
       <span>
         <.link
           id={"delete-now-#{@project.id}"}
+          class="table-action"
           navigate={~p"/settings/projects/#{@project.id}/delete"}
         >
           Delete now
@@ -109,6 +110,7 @@ defmodule LightningWeb.ProjectLive.Index do
       <span>
         <.link
           id={"delete-#{@project.id}"}
+          class="table-action"
           navigate={Routes.project_index_path(@socket, :delete, @project)}
         >
           Delete

diff --git a/lib/lightning_web/live/project_live/index.html.heex b/lib/lightning_web/live/project_live/index.html.heex
@@ -38,22 +38,25 @@
           <.th>Created At</.th>
           <.th>Description</.th>
           <.th>Scheduled Deletion</.th>
-          <.th>Actions</.th>
+          <.th><span class="sr-only">Actions</span></.th>
         </.tr>
         <%= for project <- @projects do %>
           <.tr id={"project-#{project.id}"}>
             <.td><%= project.name %></.td>
             <.td><%= project.inserted_at %></.td>
             <.td><%= project.description %></.td>
             <.td><%= project.scheduled_deletion %></.td>
-            <.td>
+            <.td class="text-right">
               <span>
-                <.link navigate={
-                  Routes.project_index_path(@socket, :edit, project.id)
-                }>
+                <.link
+                  class="table-action"
+                  navigate={
+                    Routes.project_index_path(@socket, :edit, project.id)
+                  }
+                >
                   Edit
                 </.link>
-                | <.delete_action socket={@socket} project={project} />
+                <.delete_action socket={@socket} project={project} />
               </span>
             </.td>
           </.tr>

diff --git a/lib/lightning_web/live/project_live/settings.html.heex b/lib/lightning_web/live/project_live/settings.html.heex
@@ -253,16 +253,17 @@
           <:actions :let={client}>
             <div :if={client.user_id == @current_user.id}>
               <span>
-                <.link phx-click={
-                  show_modal("edit-oauth-client-#{client.id}-modal")
-                }>
+                <.link
+                  class="table-action"
+                  phx-click={show_modal("edit-oauth-client-#{client.id}-modal")}
+                >
                   Edit
                 </.link>
               </span>
-              |
               <span>
                 <.link
                   id={"delete-oauth-client-#{client.id}-button"}
+                  class="table-action"
                   phx-click={
                     show_modal("delete_oauth_client_#{client.id}_modal")
                   }
@@ -312,17 +313,22 @@
           <:actions :let={credential}>
             <div :if={credential.user_id == @current_user.id}>
               <span>
-                <.link phx-click={
-                  show_modal("edit-credential-#{credential.id}-modal")
-                }>
+                <.link
+                  class="table-action"
+                  phx-click={
+                    show_modal("edit-credential-#{credential.id}-modal")
+                  }
+                >
                   Edit
                 </.link>
               </span>
-              |
               <span>
-                <.link phx-click={
-                  show_modal("delete_credential_#{credential.id}_modal")
-                }>
+                <.link
+                  class="table-action"
+                  phx-click={
+                    show_modal("delete_credential_#{credential.id}_modal")
+                  }
+                >
                   Delete
                 </.link>
               </span>
@@ -476,7 +482,7 @@
               <a
                 id={"edit_auth_method_link_#{auth_method.id}"}
                 href="#"
-                class="text-indigo-600 hover:text-indigo-900"
+                class="table-action"
                 phx-click={show_modal("edit_auth_#{auth_method.id}_modal")}
               >
                 Edit
@@ -501,7 +507,7 @@
               <a
                 id={"edit_auth_method_link_#{auth_method.id}"}
                 href="#"
-                class="cursor-not-allowed text-indigo-300"
+                class="table-action"
               >
                 Edit
               </a>
@@ -512,7 +518,7 @@
               <a
                 id={"delete_auth_method_link_#{auth_method.id}"}
                 href="#"
-                class="text-red-600 hover:text-red-800"
+                class="link link-danger"
                 phx-click={show_modal("delete_auth_#{auth_method.id}_modal")}
               >
                 Delete
@@ -603,7 +609,7 @@
               <.th>Role</.th>
               <.th>Failure Alert</.th>
               <.th>Digest</.th>
-              <.th>Actions</.th>
+              <.th><span class="sr-only">Actions</span></.th>
             </.tr>
 
             <%= for project_user <- @project_users do %>
@@ -632,7 +638,7 @@
                     project_user={project_user}
                   />
                 </.td>
-                <.td>
+                <.td class="text-right">
                   <.button
                     id={"remove_project_user_#{project_user.id}_button"}
                     type="button"
@@ -654,7 +660,7 @@
                       )
                     }
                   >
-                    <Heroicons.minus_circle class="w-5 h-5" />
+                    <.icon name="hero-minus-circle" class="w-5 h-5" />
                     Remove Collaborator
                   </.button>
                   <.confirm_user_removal_modal