account invite page ux improvement

This commit is contained in:
Chris Zhu
2025-04-19 11:29:30 -07:00
parent 3387ba334e
commit 4fbcaabe9e
3 changed files with 25 additions and 13 deletions

View File

@@ -44,15 +44,11 @@ export function helmChartHeader(packageData) {
<p class="text-sm text-base-content/70 mb-2">${packageData.description}</p>
<div class="flex gap-4 text-xs text-base-content/70">
<div class="flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
</svg>
<iconify-icon icon="lucide:globe"></iconify-icon>
<a href="${packageData.repository.url}" class="hover:underline">${packageData.repository.url}</a>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
</svg>
<iconify-icon icon="lucide:building"></iconify-icon>
<span>${packageData.repository.organization_display_name}</span>
</div>
</div>

View File

@@ -3,7 +3,10 @@
<thead>
<tr>
<th>
<span class="text-sm font-medium text-base-content/80">Member Email</span>
<span class="text-sm font-medium text-base-content/80">Name</span>
</th>
<th>
<span class="text-sm font-medium text-base-content/80">Email</span>
</th>
<th>
<span class="text-sm font-medium text-base-content/80">Role</span>
@@ -13,6 +16,9 @@
<tbody>
<% account_users.each do |account_user| %>
<tr class="cursor-pointer hover:bg-base-200/40">
<td>
<div class="font-medium"><%= account_user.user.name %></div>
</td>
<td>
<div class="font-medium"><%= account_user.user.email %></div>
</td>

View File

@@ -2,8 +2,18 @@
<%= turbo_stream_from :account_users %>
<div>
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-medium">Team Members</h3>
<div class="flex text-sm">
<div class="flex items-center gap-1">
<iconify-icon icon="lucide:building"></iconify-icon>
<%= @account.name %>
</div>
<div class="flex items-center ml-4 gap-1">
<iconify-icon icon="lucide:users"></iconify-icon>
<%= @account.users.count %> Member<%= "s" if @account.users.count != 1 %>
</div>
</div>
</div>
<div class="mt-5">
@@ -13,7 +23,7 @@
<!-- Start: User Action -->
<button class="btn btn-primary btn-sm" onclick="team_member_modal.showModal()">
<iconify-icon icon="lucide:plus" height="16"></iconify-icon>
<span class="hidden sm:inline">New Team Member</span>
<span class="hidden sm:inline">Add Team Member</span>
</button>
<!-- End: User Action -->
</div>
@@ -43,20 +53,20 @@
<iconify-icon icon="lucide:x" height="16"></iconify-icon>
</button>
</form>
<div class="mb-4 w-full text-xl font-bold">New Team Member</div>
<div class="mb-4 w-full text-xl font-bold">Invite Team Member to <%= @account.name %></div>
<div>
<%= form_with(model: User.new, url: account_account_users_path) do |form| %>
<div class="form-control mt-1 w-full">
<label class="label">
<span class="label-text">Email</span>
</label>
<%= form.text_field :email, class: "input input-bordered w-full focus:outline-offset-0" %>
<%= form.text_field :email, type: :email, class: "input input-bordered w-full focus:outline-offset-0" %>
<label class="label">
<span class="label-text-alt">Use the email associated with their Github account</span>
<span class="label-text-alt">Use the email associated with their Canine account.</span>
</label>
</div>
<div class="form-footer">
<%= form.button "Submit", class: "btn btn-primary" %>
<%= form.button "Invite", class: "btn btn-primary" %>
</div>
<% end %>
</div>