raucao
d94fda6d26
CI / Test (pull_request) Successful in 44s
Visual refinement pass on the connected-apps dashboard introduced for #254. Card: - Restructure into a header row (app icon, name, host, chevron) with the device/category summary as a full-width footer, so the icon aligns with the name and the metrics sit on a consistent baseline - Always show the host alongside the app name, except when it is identical - Render the icon fallback as a neutral rounded tile instead of a faint watermark, and stop distorting real icons (object-contain) - Summarise the union of the app's scopes, with monitor/folder icons Details modal: - Replace the duplicated blue buttons with a secondary Close and a primary Launch app, split 50:50 on desktop like the consent dialog - Tighten the header, section spacing and device rows; hide a redundant host - Add exact date/time tooltips to the connected and expiry labels - Align the scope-list folder icons with their labels Misc: - Use fewer near-identical grays across the cards and modal - Drop the redundant top margin on the app grid Part of #254
39 lines
1.7 KiB
ERB
39 lines
1.7 KiB
ERB
<div class="h-full" data-controller="modal" data-action="keydown.esc->modal#close">
|
|
<button type="button"
|
|
class="rs-auth-card group flex h-full w-full flex-col rounded-lg border border-gray-200
|
|
bg-white p-4 text-left transition
|
|
hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm
|
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
|
|
data-action="click->modal#open">
|
|
<span class="flex items-center gap-3">
|
|
<span class="h-12 w-12 flex-none">
|
|
<%= render AppCatalog::WebAppIconComponent.new(web_app: @web_app) %>
|
|
</span>
|
|
|
|
<span class="min-w-0 flex-grow">
|
|
<span class="mb-1 block truncate text-lg font-bold"><%= @auth.display_name %></span>
|
|
<% if @auth.client_id != @auth.display_name %>
|
|
<span class="block truncate text-sm text-gray-500"><%= @auth.client_id %></span>
|
|
<% end %>
|
|
</span>
|
|
|
|
<span class="flex-none text-gray-300 transition group-hover:text-gray-500" aria-hidden="true">
|
|
<%= render partial: "icons/chevron-right", locals: { custom_class: "h-5 w-5" } %>
|
|
</span>
|
|
</span>
|
|
|
|
<span class="mt-auto flex flex-wrap items-center gap-x-4 gap-y-1 pt-4 text-sm text-gray-500">
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<%= render partial: "icons/monitor", locals: { custom_class: "h-4 w-4 flex-none text-gray-400" } %>
|
|
<%= device_summary %>
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<%= render partial: "icons/folder", locals: { custom_class: "h-4 w-4 flex-none text-gray-400" } %>
|
|
<%= category_summary %>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
|
|
<%= render RsAuthDetailsModalComponent.new(authorizations: @authorizations) %>
|
|
</div>
|