[Sistent] Move `code` section of identity to table format

[sudhanshutech]

Current Behavior

The identity section under https://layer5.io/projects/sistent/identity/color like color, typography and spacing these sections code part is currently a image so user can't copy the color code.

Desired Behavior

Move these images to table format instead of images, same structure just use table to display the colors and rest code section of identity. Design can be found here: Figma

Screenshots / Mockups

Implementation

Acceptance Tests

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[github-actions[bot]]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

[github-actions[bot]]

This issue has been labeled with 'component/ui'. 🧰 Here are docs on Contributing to Meshery UI. 🎨 Here is the Meshery UI Figma File File. Lastly, here are docs on Contributing to Meshery's End-to-End Tests Using Cypress.

---

        Be sure to join the community, if you haven't yet and please leave a :star: star on the project :smile:

[Aviral0702]

For color -> code section an issue has already been opened.

[Aviral0702]

https://github.com/layer5io/sistent/issues/646

[Aviral0702]

Ok . Can i take up this issue ?

[mannika763]

Hey @sudhanshutech I would like to work on this issue

[sudhanshutech]

@Aviral0702 you have few issues assigned in meshery , lets give this issue to @mannika763 and you can assist and review the pr when it will be raised.

[Aviral0702]

@Aviral0702 you have few issues assigned in meshery , lets give this issue to @mannika763 and you can assist and review the pr when it will be raised.

Sure @sudhanshutech

[mannika763]

Hey @sudhanshutech I would like to confirm a few things. These images need to be converted into code form. We have sections for color, spacing, and typography, and within each of them, we have overview, guidance, and code. Should these changes be applied to each section?

[sudhanshutech]

In code section, just put the colors in table and ui should be same as current just it should not be a image but content inside table

[sudhanshutech]

@mannika763 i am seeing you are already working on a issue, will you be managing this also?

[mannika763]

@sudhanshutech yeah, can manage. otherwise i'll post a message here. Thank you for asking

[mannika763]

Hey @sudhanshutech, I would like to confirm if there is any table-related component available in Layer5, or should I create table from scratch? Thanks!

[mannika763]

Hey @sudhanshutech I apologize for any inconvenience, but I am currently a bit busy with my work. Therefore, I am unassigning this task from my name so that others can work on it and close it earlier. Thank you for your understanding.

[siddharthbaleja7]

@sudhanshutech Can you please assign this issue to me?

[sudhanshutech]

here you go @siddharthbaleja7

[sudhanshutech]

you are aware of the issue right @siddharthbaleja7 ?

[siddharthbaleja7]

@sudhanshutech Sorry I am not aware of this issue.

[BarryByte]

@sudhanshutech Hello, @siddharthbaleja7 just unassigned himself, can i take it issue forward ?

[BarryByte]

@sudhanshutech Update : Styling and logic part is complete, now i just need to harcode the 100s token, values and description etc. Here is the sample, please look into it.