Meshery: [UI] Enhance indication of enabled vs disabled in user preferences interface

[leecalcote]

Current Behavior
The current version of the user preferences UI looks like this:

It's difficult to tell which way is on and which way is off.

The toaster notification is of no help in this regard either:

Desired Behavior

1. Whether a given setting is enabled or disabled should be obvious to the user just looking at the page.
2. When the user changes the setting, the notification message should indicate enabled or disabled.

Implementation

1. Update UI to make it intuitive to distinguish on vs off for a given setting.
2. Update the text in the notification to indicate enabled vs disabled.
3. Add the label "Analytics and Improvement Program" as a group label around both of these options, ideally, in a format like this:
   

Acceptance Tests

1. Sending of usage statistics should be enabled by default.
2. Users should be able to understand whether a preference is enabled or disabled without having to take any action.
3. "enabled" and "disabled" should show in the notification text.
4. These two settings are grouped under a label (of some kind).

[alabobriggs]

I will like to work on this

[PluckyPrecious]

Hi @alabobriggs how is this coming up?😊

[alabobriggs]

Hello @PluckyPrecious still working on it. Had some challenges earlier

[shubhamgupta2956]

Hi everyone, I want to take this issue. Please assign it to me.

[leecalcote]

@shubhamgupta2956 checking on progress... how are you coming along here?

[Nikhil-Ladha]

@shubhamgupta2956 if you are not working on this, can I take it up?

[shubhamgupta2956]

Sorry for the late reply. I was a bit busy with my college assignment (I hope I can complete it till this weekend) so could not complete it. @leecalcote, I have experimented the mentioned things with this page but some of them does not look much elegant due to:-

• Group label - Embedding these settings in the format provided feels different from the app themes. I
• Also I could not find anything better to make it intuitive to distinguish on vs off for a given setting. If I change any color then it does not goes with the whole app theme. Apart from this, I am not much in favor of removing the current on/off component as this looks minimalistic and works great for this use case.

@Nikhil-Ladha sure you can take this issue. Feel free to ask for any help if required. :slightly_smiling_face:

[Nikhil-Ladha]

If you are done with your exams and hoping to work on it this weekend, then please feel free to do it.
I just wanted to make some PRs for hacktoberfest 😆

[shubhamgupta2956]

If you got any ideas for the above-mentioned problems, it would be better if you implement it. We can also discuss the ways to implement this after this weekend on slack also.

[Nikhil-Ladha]

Okay, then. I have some thoughts and will make a PR soon🙂.
Will tag you there too, to have a look.