Refactor icons: harmonize contextually, use filled status icons

[pat-s]

Follow-up to #4414 which started to use the outline icon-set for the pipeline status icons.

• Changed duration and settings icon

• Changed alert and attention icons to alert-circle-outline

• Changed download icon

Other changes

• Changed "bandage" icon to "wrenchCogOutline"

[xoxys]

This is another all or nothing discussion:

• all icons should be used from the same library
• all semantically related icons (e.g. all pipeline status icons) should use the same style
• NOT all used icons need to use the same style (just because pipeline status icons are outlined doesn't mean everything need to be outlined)

To me, there is no need to use ALL outlined icons whenever possible. But this time I'll leave the decision to someone else 😃 Personally, I don't like the octagon icons.

[xoxys]

@pat-s what do you think about alert-circle-outline for the linter tab instead of the octagon icons?

[pat-s]

Fine with me. Overall I am wondering if there should be different icons for error and warning.

[xoxys]

If we stick with different colors, I don't think it's necessary. Do you have an idea for different icons?

[pat-s]

Maybe mdi:stop-circle-outline in red for errors and mdi:alert-circle-outline in yellow for warnings

[pat-s]

@xoxys In addition to the points discussed in chat I opted for cogOutline for the admin list panels as the adjacent icon (e.g. trash) is also outlined. Hope that is OK?

[xoxys]

Wasnt the idea to harmonize the icons? Why mixing outlined and regular ones again?

[pat-s]

Wasnt the idea to harmonize the icons? Why mixing outlined and regular ones again?

Harmonizing on a contextual level. Some were outlined before, e.g. trashcan. The regular trashcan looks bulky, I think you agree?

Here's a preview of what I mean:

-> Both outlined

All status icons are now filled. The other standalone ones (e.g. cog in the navbar) are regular.

[xoxys]

Sure some were outlined before nevertheless we wanted to harmonize it.

IMO trash-can looks good and not too bulky, if we want to avoid individual preferences (as much as possible) this looks a bit random to me and could cause discussions in the future again.

[pat-s]

Hm. To me, the combined outlined icons from my previous comment look way more harmonic together than the current state:

---

If you agree with the other changes of the current state here, I'd draw my "virtual joker" and ask for this combination (both outlined as in my previous comment) to get accepted 😅️

[xoxys]

Alright lets keep it this way.

[xoxys]

This change is wrong. Status icons should now all be the filled circle.

[anbraten]

Changed icon button size to w-9 (2.25 rem) from w-8 as this aligns better with the line height the icons are in.

For consistency I would suggest to stick to a 4-point / 8-point UI system. Those spacing issues often result from other parts having a wrong margin, padding or border not being aligned to it.

[pat-s]

For consistency I would suggest to stick to a 4-point / 8-point UI system. Those spacing issues often result from other parts having a wrong margin, padding or border not being aligned to it.

So you mean reduce the line-height from 1.3rem to something like 1.2? This would then likely match with h-8.

[anbraten]

That would be probably the easiest here, right?

[pat-s]

To match with h-8, yes. But I am not sure 1.2 is maybe a bit to narrow. Need to check.

[xoxys]

But how exactly does 1.2rem (14.4pt) fit into an 8 point grid system that suggests using multiples of 8 and 4? Then we can stick to 1.3rem (15.6pt) as well, no?

[pat-s]

Yeah it doesn't fit so well. I think my thought was wrong.

So now, h-8 w-8 paired with 1.3rem. Is that good for everyone?

[xoxys]

While it might make sense to use w-8 h-8 instead of -9 how is this related to the default size of the icons? Changing them to 1.2rem will not make them fit with the default line height of 24px. Would just like to understand how to use the 8-point grid correctly.

[pat-s]

Can we outsource this into a discussion/chat?