[UI]: add a version tag to CatalogCard component

[SAHU-01]

Notes for Reviewers

This PR fixes #688

Signed commits

• Yes, I signed my commits.

[sudhanshutech]

use color from palette @SAHU-01

[sudhanshutech]

not these, there is tokens we use you will get those in palette.js file.

[SAHU-01]

not these, there is tokens we use you will get those in palette.js file.

Thank you for sharing this, I'll make sure to take a look at it and modify this.

[sudhanshutech]

@dottharun

[SAHU-01]

@sudhanshutech based on the Wednesday call feedback that I received, I need to add the flipable thingy and also centralize the catalog card and add on flip all the details that were available on meshery cloud. I'll be done with this over the weekend and will make sure to notify you.

[sudhanshutech]

oh its good. I was tagging @dottharun to confirm does he has any things to confirm here?

[dottharun]

@SAHU-01 Does this support dark mode, and can you provide screenshots if you can?

[SAHU-01]

@dottharun the tag color doesn't change with dark or light mode switch as of now if you want me to enable that, do let me know

[dottharun]

@SAHU-01 Yes, please use the same shades as the footer.

[SAHU-01]

@dottharun I did add the version background based on the color palette used for metrics container and it looks something like this:
for dark theme:

for light theme:

[SAHU-01]

@sudhanshutech, I have a couple of questions here:

1. should I move all styled components like this to src>custom>CatalogCard>style.css:

const BackFaceContent = styled(Box)(({ theme }) => ({
  position: 'absolute',
  background: `linear-gradient(to bottom right, black 40%, ${theme.palette.background.brand?.default})`,
  width: '100%',
  top: 0,
  left: 0,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'left',
  padding: '16px',
  boxShadow: `2px 2px 3px 0px black`,
  borderRadius: '1rem'
}));

2. As discussed earlier for lining issues I've added a new interface do let em know if that requires changes.
3. @dottharun had suggested adding version background based on the color palette used for metrics container please take a look at it and let me know if that suits or we could opt for a different color palette
4. The linear gradient is not similar to the one on Catalog Page I was unable to find a figma for the flip catalog card, do let me know if that needs to be changed, I would need the exact hex codes though.

[SAHU-01]

Please find the demo screen here:

Screen.Recording.2024-08-05.at.12.03.27.PM.mov

[sudhanshutech]

@SAHU-01 yes the styles should be in separate style folder

[dottharun]

@SAHU-01 If we are using the flip card and showing the version only on the backside, just use the same shades as in https://meshery.layer5.io/.

[sudhanshutech]

any more help needed @SAHU-01 ?

[SAHU-01]

@sudhanshutech yes, the figma design? Does the gradient and padding look good to you in the recording? If yes I'll push the style file and tag theme changes now?

[sudhanshutech]

the color of metrics in from of card could be shade of white for dark mode. See which looks good from using the token.

[sudhanshutech]

@SAHU-01 have gone through the card here in cloud,: https://meshery.layer5.io/catalog?

[sudhanshutech]

@dottharun @vishalvivekm @captain-Akshay do we have figma design for this card?

[SAHU-01]

@dottharun, I've removed the flip logic from this PR and I've added the versionTag and the versionTagPosition props with proper styling as per your suggestion.
@sudhanshutech I'll be sending the other PR with centralized sistent logic soon.
Currently this is how it looks:

Screen.Recording.2024-08-12.at.5.20.34.PM.mov