Problems with Buttons in sistent

[Muhammed-Moinuddin]

Description

Buttons in Sistent (specifically in sistent/components/modal) are not properly used.
URL: https://layer5.io/projects/sistent

1. The next button is not shown at the end of Components/Text Input/Code.
2. In Components/Modal there is no Previous Button.
3. The Next button and Previous button not working properly, as per decided in today's meeting the buttons should only work for switching Tabs. Currently they also work for switching within a single Tab (for example identity/color/overview to identity/color/guidance). The switching within single Tab should NOT happen
4. Buttons does not have preview (they don't show that where the button would lead).

Expected Behavior

1. In the end of Components/Text Input/Code, it should have Next button .
2. In Components/Modal/Overview there should be Previous Button.
3. They should switch only between Tabs, for example: from identity/color to identity/spacing to identity/typography to components/button.
4. Buttons should have preview (like here https://docs.layer5.io/cloud/). User should know that where the Button would lead.

Screenshots

Environment:

• Host OS:
• Browser: Chrome

---

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]

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 on the project 😄

[github-actions]

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 on the project 😄

[mannika763]

Hey @Muhammed-Moinuddin
I would like to work on this issue.

[Muhammed-Moinuddin]

Hey @Muhammed-Moinuddin I would like to work on this issue.

@mannika763 Last point is not decided (as mentioned). Please always wait for the assignment before making a PR.

[mannika763]

@Muhammed-Moinuddin
Okay, I'll remember that for the future.

[Ashparshp]

@Muhammed-Moinuddin Thank you for opening it. Let's discuss this on the website's call. Please add this as an agenda item to the [meeting minutes](https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit?usp=drivesdk

[mannika763]

@Muhammed-Moinuddin
I would like to confirm one thing: should the buttons look like this? Right now, the buttons are smaller. Should they be spread across the whole page with a preview, as shown in this image?

[Muhammed-Moinuddin]

@Muhammed-Moinuddin
I would like to confirm one thing: should the buttons look like this? Right now, the buttons are smaller. Should they be spread across the whole page with a preview, as shown in this image?

Not necessary. Just do the basic things that makes it look fine and readable.

And you can have suggestions via slack as well. Otherwise we normally review these things via website meeting.

[eyeaadil]

@Muhammed-Moinuddin can you assign this to me.