350 add a tooltip

[ShifuBadal]

closes #350

What is it supposed to do
Whenever you are creating a post, or editing a post a tooltip needs to appear after selecting some text. With this tooltip you can apply some markdown to your written text. For mobile and tablet devices a mobile bar should appear which needs to be scrollable if there are a lot of buttons. It has the same behaviour as the tooltip, which is applying markdown to text.

The icon component got refactored. If you use a prefix, and an iconname which is found on: https://mui.com/components/material-icons/. If you have a custom svg you can use that too by using the prefix 'custom'. You then give the iconName the image file, which will eventually render it on your screen.

How can we test your branch

1. Create a post
2. Write some text
3. Select text

It should look like this:

And for mobile it should look like this:

If the icons are appearing the icon component using MUI works. Inspect code to further examine the component.

Additional notes

• Adding active to the mobile bar was to broad for this feature, because the mobile bar component is a generic component which will be used for mobile/tablet devices.

1. General checklist

• [x] a. Tested happy flow.
• [x] b. Tested unhappy flow.
• [x] c. No unexpected exceptions.
• [x] d. No code with high complexity. (Big O)
• [x] e. EOF newline.
• [x] f. No linter warnings or errors.

2. If relevant, front-end checklist

• [x] a. Responsive. (Desktop all the way to mobile 320px)
• [x] b. Using SCSS variables where relevant.
• [x] c. Relevant class names
• [x] d. No modified global SCSS properties, except if necessary and fully tested the impact.
• [ ] e. Checked caniuse for more modern CSS properties.

3. If relevant, back-end checklist

• [ ] a. No unhandled promise rejections.
• [ ] b. Seeders still functional.
• [ ] c. No primary-key violations.
• [ ] d. Normalization, at least 3NF.
• [ ] e. Used guards (middleware) where necessary and tested if route is guarded.

4. If relevant, test these browsers

• [x] a. Chrome
• [x] b. Firefox
• [x] c. Opera
• [x] d. Edge
• [ ] e. Safari

---

PR Rules
1. Add relevant labels.
2. Select at least two reviewers.
3. Assign all reviewers allowed to merge the branch, including yourself.
4. If relevant to the sprint, put related issue in 'Awaiting Approval' column on project board.
5. Add to the corresponding milestone.

Reviewer info
1. You can use aliases to refer to specific PR checklist items. For example 'Hey @JohnDoe, for this line please check 3.a and 1.d.'
2. Where possible, please use the suggestions feature in github so the author has a better idea of the solution you had in mind.

This form should be filled in by the author of this PR.

[ShifuBadal]

Changes proposed:

• [x] Pointers on buttons
• [x] Show/hide toolbar based on text that is selected
• [x] H1, H2, H3 functional with align (fixed by not using h1 tag, but by making font size bigger)
• [x] Turning off Z-index did not work, but i resolved the issue by increasing z-index of mobile bar. (maybe look for a fix together?)
• [x] Added more box-shadow to mobile bar

Changes above can be found in commits:

• a40f88dc688486a7c7dc47f3aef4e636fd113497
• a2616afa711e3c35c5ecb9c1cfdafc7faca45c5e

Could not find a way to fix seperator in tooltip, and the h1, h2, h3 fix with align is not optimal for SEO

[AjobK]

Closing for now, needs more research. Is still in sprint @shivam-badal

Will re-open when it's ready

[ShifuBadal]

After merging the following PR looks like this, after the postContent revamp: