styling tweaks to model catalog cards

[gitdallas]

part of https://issues.redhat.com/browse/RHOAIENG-19203

Description

tweaks to model catalog cards based on discussion with @yih-wang and her latest figma mockups. includes

• the redhat ui tags icon (replacing the default pf tags icon)
• some spacing changes around the tags icon
• put the labels in the card footer to force a little more padding between description and label (vs stack gutter padding)

How Has This Been Tested?

locally on green cluster

Test Impact

none

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[mturley]

@yih-wang @gitdallas I imagine we should also use this new tag icon on the details page? the old tag icon is used twice there

[gitdallas]

just to show what that looks like:

btw - if you notice how my icon within a label seems off centered? i was chatting with coker about that, it doesn't happen on his PC, but happens in mine, both using macos and same version of chrome, incognito etc... can't figure out why it shows up like that for me 😆

[codecov]

Codecov Report

Attention: Patch coverage is 91.66667% with 1 line in your changes missing coverage. Please review.

Project coverage is 84.57%. Comparing base (0a4fd27) to head (c660e48).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
frontend/src/concepts/design/utils.ts	75.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3803      +/-   ##
==========================================
- Coverage   84.58%   84.57%   -0.01%     
==========================================
  Files        1529     1531       +2     
  Lines       35557    35566       +9     
  Branches     9960     9964       +4     
==========================================
+ Hits        30075    30081       +6     
- Misses       5482     5485       +3     

Files with missing lines	Coverage Δ
frontend/src/concepts/design/TypedObjectIcon.tsx	98.13% <100.00%> (+0.05%)	⬆️
frontend/src/images/icons/ModelCatalogIcon.ts	100.00% <100.00%> (ø)
frontend/src/images/icons/RhUiTagIcon.ts	100.00% <100.00%> (ø)
...pages/modelCatalog/components/ModelCatalogCard.tsx	100.00% <100.00%> (ø)
...nd/src/pages/modelCatalog/screens/ModelCatalog.tsx	100.00% <ø> (ø)
...rc/pages/modelCatalog/screens/ModelDetailsPage.tsx	100.00% <100.00%> (ø)
...rc/pages/modelCatalog/screens/ModelDetailsView.tsx	88.88% <ø> (ø)
frontend/src/concepts/design/utils.ts	72.10% <75.00%> (+0.03%)	⬆️

... and 7 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0a4fd27...c660e48. Read the comment docs.

[yih-wang]

@gitdallas Changes look great!
Some layout details seem off in the 2nd screen of Figma. Sorry I should’ve called all these details out in our discussion yesterday!

• Add small spacing between the model name and version to give it some breathing room.
  
• I know we don’t have many labels now, but for future-proofing, we could use the overflow label group and collapse labels when there are more than three.
  
• Reduce the logo size to 40*40 to make the card feel more balanced.
  Edit: I realized the logo doesn't work as I originally suggested. Only the height is fixed at 40px to accommodate various logos. I think it makes sense and I can see it aligns with what we do for the Resources page. But I was confused about why the logo on catalog card looks much bigger than it looks on the Resources page's card. So I looked into it a little bit and found two things we could improve:
  --1) there's a 4px padding for img on the resource card while we don't have. That's the main reason that the logo there is actually smaller than catalog. It would be good if we can address it the same way.
  
  --2) Since the catalog card is smaller, I think it would look better if we reduce the fixed height from 40px to 36px.
  
  Utimately, it should look like this
  

@gitdallas Not sure if that's clear enough. LMK if you want to talk more offline!

[yih-wang]

For details page, I'm nitpicking based on what's currently pusblished in the green's cluster:

• Logo should be aligned with the vertical center
  

• Add a little more space between logo/text, and name/description as the measurement below
  

[yih-wang]

One more update - the model catalog icon is just created and shared from the branding team (download it from here). It should swap out the MR icon we're currently using as a placeholder. And we should use 'teal' (the same color as pipeline) for the icon container, check the screenshot below:

[Should be like]

[Current look]

[gitdallas]

discussion from the green meeting this morning is to leave most of these for later stories. i did update the page icon/description and icons on the detail page

[yih-wang]

Thank you @gitdallas, looks good!

[mturley]

@yih-wang not sure if I already shared this - I opened https://issues.redhat.com/browse/RHOAIENG-20552 to capture any style nitpicks we should address that aren't showstoppers for MVP. I know it's important to get the details right, we're just at the point now in our 2.19 timeline that it might have to be ok to roll some of the smaller details over as issues to follow up on. I anticipate we can get these and any other style fixes into 2.20 if we can get them laid out in that issue before next sprint. @gitdallas if they're quick we can knock them out asap, but let's make sure all our other deliverables are at least in progress first.

[mturley]

Good stuff, thanks @gitdallas

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: mturley

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [mturley]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment