[Nametag] UI improvement for self disclosure

[Shaomei]

It is currently unclearly what the "Self Disclosure" box is meant to used for, consider adding some example or default text or tooltip to explain what "self disclosure" is used for, e.g. "something you want to share with other participants about yourself".

Here are a few things we should do to improve current UI:

1. Use Switch component instead of checkbox for display/hide nametag
2. Change the text "Self disclosure" to "Something about me"
3. Add default text or tooltip for the self disclosure field to explain what this is, e.g. "I am a person who stutter, or I have a sore throat".
4. Change the css to add some padding between fields.

[Shaomei]

Also, make sure the self disclosure text doesn't go over the nametag image. We can either limit the # of characters for the self disclosure or wrap the text when generating nametag image.

[Shaomei]

Related to issue #76

[charansr]

I pulled off the 49-nametag-ui-improvement-for-self-disclosure branch, which already included an updated default text. I added the padding between nametag fields, changed self-disclosure to something about me, and changed the checkbox system to a toggle switch. I also merged main into this branch, and it had no conflicts.

[charansr]

I added a save button that saves the nametag without displaying it. I then tested different values for the max length of the About Me section and settled on 30 because larger values would shrink the other text in the nametag too much. Here are the screen shot for a max length of 30 and then the screen shot for a max length of 40.