Problems with Buttons in sistent

[mannika763]

Description

This PR fixes #5695

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit 5ce6086 at: https://669c1405710cf52bef257bf2--layer5.netlify.app

[leecalcote]

Thanks, @mannika763!

Ideally, this navigation is dynamically driven... @sudhanshutech, @vishalvivekm

[Ashparshp]

@mannika763 Thanks for your contribution, let's discuss this on the website's call. Please add this as an agenda item to the meeting minutes.

[Muhammed-Moinuddin]

@mannika763 requirements are updated now. Kindly check it.

[Muhammed-Moinuddin]

@mannika763 Are you going to work on the issue with updates within this PR? so I assigned that task (issue) to you.
Otherwise I will close this PR and will assign it to someone else. Kindly let me know.

[mannika763]

@Muhammed-Moinuddin
Thank you for asking.
I am working on it. will give you an update shortly

[mannika763]

Hey @Muhammed-Moinuddin
I have updated the code but I am not sure about the styling of the buttons. Please let me know if there are any necessary changes.

[l5io]

🚀 Preview for commit 4e2dc76 at: https://66a1fcd665ce06c820dcbb91--layer5.netlify.app

[Muhammed-Moinuddin]

Hey @Muhammed-Moinuddin I have updated the code but I am not sure about the styling of the buttons. Please let me know if there are any necessary changes.

Kindly try to follow css of those buttons for font-size, font-weight, button padding.
Add a bit space between both texts (like inbetween Next and Text-Input -> ). I think opacity of 0.8 will make Next and Previous texts more suitable.
Please use icons as well (like we have done on those docs).

[mannika763]

Hey @Muhammed-Moinuddin
I have made some CSS changes. Please let me know what works for you and what doesn't. Additionally, here's how the buttons will look with an opacity of 0.8.

[l5io]

🚀 Preview for commit 48881ab at: https://66a3b3aedc39401c7ed57d18--layer5.netlify.app

[leecalcote]

@Muhammed-Moinuddin, I wonder if you have additional feedback.

[Muhammed-Moinuddin]

Hey @Muhammed-Moinuddin I have made some CSS changes. Please let me know what works for you and what doesn't. Additionally, here's how the buttons will look with an opacity of 0.8.

You didn't got my point. I've mentioned opacity for just those (Next and Previous) texts. In below image I've used 0.9 opacity for those texts (Next and Previous). You have also not followed font-weight from that docs site. The padding is also not right.
In the live preview link the icons do not have proper color.

I was looking for above kind of buttons (ignore those arrows).

Will you be able to join Monday meeting (Layer5 website discussion meeting)?. I can explain in detail over there.
Calender link: https://layer5.io/community/calendar

[mannika763]

Could you please share the link to the documentation for padding and font size? I'm having a hard time finding it.

[Muhammed-Moinuddin]

Could you please share the link to the documentation for padding and font size? I'm having a hard time finding it.

This can help you: https://layer5.io/projects/sistent/components/button
You can simply follow font-size and padding from those docs button, what is your confusion?.You should join Website meeting for detailed discussion.
Optimally I can explain via slack huddle.

[mannika763]

okay @Muhammed-Moinuddin
Just to clarify, was the website meeting on Monday? Also, could you please explain what a Slack huddle is?

[Ashparshp]

@mannika763.. Yes, you're right about the meeting. The Slack huddle is a feature for video call or voice meeting within Slack for quick discussions...

[mannika763]

Hi @Muhammed-Moinuddin
I've added padding, font size, and font weight. Could you please let me know if there's anything else that needs adjustment? I'll go through it step by step for clarity.

[l5io]

🚀 Preview for commit 7fc22a3 at: https://66aa5948d596281322069d7d--layer5.netlify.app

[Ashparshp]

@mannika763, Failing!!