Inconsistent table styling

[ekidneyrh]

Is your enhancement related to a problem? Please describe

This was brought up during the UX call 20/06/2024. There are a number of inconsistencies between the different pages.

Describe the solution you'd like

Establish one visual style of all the tables to follow - perhaps small deviations if necessary.

Describe alternatives you've considered

No response

Additional context

No response

[deboer-tim]

Just to reiterate what I was hoping for here is confirmation that:

• Main/Name column is table-highlight colour, rest are normal table text colour.
• Only one column should be a 'label'.
• Styling of main/name column - currently containers page is different from others, should second line always be purple+highlight text? Or purple+regular text?
• Would be nice if we can confirm what 'group' rows should look like too, e.g. in Containers page we show pods and compose groups as "My compose group (compose)" or "Mypod (pod)", and in images we now show manifests as "My manifest (manifest)", I don't know if this is really ideal or we now think different icon is enough. (in which case we should probably have compose icon)

[ekidneyrh]

Main/Name column is table-highlight colour, rest are normal table text colour.

Yes that is corrent. This is to make the name stand out from the rest of the info.

Only one column should be a 'label'.

Yes it's the Enviroment column that is a label. I'd like to get a library at some stage of all the available labels.

Styling of main/name column - currently containers page is different from others, should second line always be purple+highlight text? Or purple+regular text?

Do you think we would benefit from getting rid of the ID and such from underneath the name? These details for the item can be viewed on the details page, where they will be properly labelled. I agree that there's too much going on there.

If it's necessary to keep the ID there, I would have just that under the name and

Would be nice if we can confirm what 'group' rows should look like too, e.g. in Containers page we show pods and compose groups as "My compose group (compose)" or "Mypod (pod)", and in images we now show manifests as "My manifest (manifest)", I don't know if this is really ideal or we now think different icon is enough. (in which case we should probably have compose icon)

I'll have to look into this, as I'm unsure why we do it now? It seems a bit confusing but I'll get back to you when I look at it more.

[ekidneyrh]

Had a look at the tables on the different pages and the main differences I noted were:

• Tabs on top of page:

An alternative to sorting this way can be the use of the Status sorting button. We will either implement it across all the tables or get rid of it. I vote in favour of keeping them. I think it’s a clean way to organise the objects and the groupings are clear.

Do we know if users find those tabs useful and use them?

• Spacing of headers

Space all out evenly and have in the same order and variables in the same slot.

| STATUS | NAME | ENVIRONMENT | [VARIABLE] | AGE | ACTIONS

The variables would be:

• Containers page -> IMAGES

• Pods page -> CONTAINERS

• Images page -> SIZE

• Volumes page -> SIZE

• Number of buttons

We need to reduce the visual clutter when there are more than 2 buttons. Having five call-to-action buttons that all look the same can be confusing.

When there’s more that 1 button other than PRUNE, I propose to have them behind one + ADD button. This will reduce the distractions in the upper right corner and have everything organised.

There could be a more suitable word than ADD so let me know what you think.

• Action buttons

The introduction of primary and secondary action buttons here would be beneficial. The PRUNE changed to a secondary and the ADD remaining as the primary.

[Secondary is gray-200]

• Additional:

Something I would like to see is the search bar / input field being half the width it is at the moment. I find it’s distractingly long

Current:

Proposed:

Another nit would be the line that divides the tabs from the lower part of the page. It’s currently going through the whole page:

Would there be a way to adjust that so it lines up with the header, input field line, and the rows at the start, and lines up with the action buttons and end of the rows at the end as such:

• Full mock-up:

I don't have the labels set up on Penpot yet, so that's lacking from the screenshot below, but here’s what each table should look like on each of the pages:

I'm going to look into the 'group' rows as mentioned by Tim above. I'll comment here with more updates soon.

[ekidneyrh]

Looked into the groups some more today. Seems a bit clunky given there's a separate pod page, but I understand why it’s there. And I know there’s no separate page for manifests and the likes.

We need to have it more differentiated from the rest of the info in the table, as it just looks like the other rows. I dont think the merging of them is enough.

I’d suggest having the ‘Group’ row a different colour. This would be slight, just enough so that the user know it’s something different. Here’s an idea of what that would look like:

Again, this is so there’s more visual clues on the page that indicates that the ‘Group’ row is acting as the header for the group items.

I added a kebab menu to the group row, maybe we could have an option to ungroup here? And any other relevant functionalities.

[ekidneyrh]

I've added colour values for light mode here: #6929 (comment) and updated the wiki https://github.com/containers/podman-desktop/wiki/Design-System-Theming#nav-page