Improve visibility of Save button on Settings page

[gorkem-bwl]

Currently, when users make changes on any of the Settings page, the Save button is often not visible because it sits at the very bottom of the page. This can cause confusion, as users might think their changes are automatically saved.

Proposed solutions:

• Make the Save button sticky at the bottom of the viewport so it's always visible while scrolling.

• Alternatively (or additionally), show a small banner or notification ("You have unsaved changes") once the user modifies a setting, with a visible Save button inside the banner.

Expected behavior: Users should always be clearly aware that their changes are unsaved and should be able to easily access the Save button at any time without needing to scroll to the bottom.

[Thirukumaran-T]

Hi, I'd love to work on this enhancement. Could you please assign it to me?

[gorkem-bwl]

Sure thing @Thirukumaran-T - please check this link for anything contributing related :)

Thank you for your interest and please let me know a rough deadline to complete this task.

[Thirukumaran-T]

Hi @bluewave-labs,

Thanks for the details! I’ve started working on the save-button-enhancement as per the contributing guidelines.

Could you please let me know if there’s a preferred timeline or deadline you'd like me to follow for completing this task?

Looking forward to your guidance!

[gorkem-bwl]

Hi @bluewave-labs,

Thanks for the details! I’ve started working on the save-button-enhancement as per the contributing guidelines.

Could you please let me know if there’s a preferred timeline or deadline you'd like me to follow for completing this task?

Looking forward to your guidance!

It would be great if you can send your pr by next week.

Let me know if you need help with the design.

[Thirukumaran-T]

Yes, I'll send a PR within the week.

I could use your help with the design. could you send over some images and details so we can get a better idea of what we can do?

[gorkem-bwl]

Very roughtly it'll look like this one. There might be minor look and feel changes, as we are not using Figma anymore due to the fact that our initial Figma designs are very different from what you see on the dashboard design-wise (Figma designs are quite old).

You may want to add:

• A slight shadow on the upper part of the white block so it stands out
• Change the transparency settings of the block a bit so the user would know there is a part of the UI underneath.

Let me know what you think!

[Thirukumaran-T]

.. this is not the final output , as of now i have made the button should be sticky, comment your thoughts is it fine or we make the save button sticky and make an snackbar to make the user aware that their changes are unsaved .

[gorkem-bwl]

For now let's leave the snackbar our of this. Can you lower down the shadow a bit, and decrease the height of the bar and let's see how it goes.

First I thought it'd left and right align the whole content area (excluding sidebar). Can you check my screenshot as well?

[Thirukumaran-T]

i'll lower down the shadow and height it's fine, in your screesnhot it seems like perfectly fitted but just see mine it has more spacing in both the open and closed side bar.

[gorkem-bwl]

Can you please lower the height of the bar, and also align it left and right on the content area - if possible?

Similar to this:

[Thirukumaran-T]

Yes i'll do like that

[gorkem-bwl]

Just wanted to check back here to see if you have any updates :) Bear with me as we are about to make a release, and want this go in after a test.

[Thirukumaran-T]

I have reduced the height and reduced shadow , but the layout is responding the global styles, if you need the save button container only align left and right end we have to overwrite the styles specifically for that to not respond the global styles, would you have a plan to make like that

[Br0wnHammer]

I have reduced the height and reduced shadow , but the layout is responding the global styles, if you need the save button container only align left and right end we have to overwrite the styles specifically for that to not respond the global styles, would you have a plan to make like that

@Thirukumaran-T, Since these changes are specific to this page and should not impact the layout of other pages, you can proceed with overriding it here. However, I have a small suggestion: could you reduce the shadow intensity even further? Currently, it's quite prominent and draws immediate attention. A more subtle shadow would be easier on the eyes and less distracting.

[Thirukumaran-T]

Hii yes i'll reduce the shadow , it seems like overriding the styles from this file not helps, it is responding for the overall global layout

[gorkem-bwl]

Great. Seems to be progressing well. Are you going to apply this to all Settings pages in general later on?

[Thirukumaran-T]

sure, as of now shall i raise PR for the current settings page changes

[gorkem-bwl]

Yes. Let's raise a PR, and go from there :)