[Cleanup] remove z-index

[kevkevinpal]

Context

Right now we're using z-index in a lot of places.

Z-index takes a component and moves it forward/backward a certain amount. For example, say you have a button overlapping another component, if you give a button a higher z-index it’ll cover the other one.

More practically, issue #225 is a great example of the types of unwanted visual effects it can introduce.

In #225, the z-index on the tag (titles of boxes in the profile that appears on top of the drop down) is higher than the drop down. The hunter proposed a solution which was to simply increase the z-index on the dropdown menu. As you can see, manually setting z-indexes aren't a great approach to layering components especially if we introduce another component.

Therefore we should try and minimize the amount of z-index's we use because they can end up covering other components and are inefficient to manage. The only caveat being that the times when z-indexes are useful are inside of modals.

Below is a search command to look for z-index however the ones related to modals have been removed.

./src/components/form/style.ts:48:  z-index: 10;
./src/components/form/inputs/index.tsx:88:      z-index: 10;
./src/components/form/inputs/TextInput.tsx:22:        z-index: 10;
./src/components/form/inputs/TextInput.tsx:35:        z-index: 10;
./src/components/form/inputs/GalleryInput.tsx:38:  z-index: 10;
./src/components/form/inputs/SelectInput.tsx:51:        z-index: 10;
./src/components/form/inputs/TextAreaInput.tsx:37:        z-index: 10;
./src/components/form/inputs/TextAreaInput.tsx:50:        z-index: 10;
./src/components/form/inputs/TextAreaInputNew.tsx:47:  z-index: 999;
./src/components/form/inputs/TextInputNew2.tsx:14:  z-index: 999;
./src/components/form/inputs/NumberInput.tsx:23:        z-index: 10;
./src/components/form/inputs/NumberInput.tsx:36:        z-index: 10;
./src/components/common/SearchableSelect.tsx:18:    z-index:1000;
./src/components/common/SearchableSelect.tsx:21:    z-index:1000;
./src/components/common/SearchableSelect.tsx:24:    z-index:1000;
./src/components/common/SearchableSelect.tsx:27:    z-index:1000;
./src/components/common/SearchableSelect.tsx:30:    z-index:1000;
./src/components/common/SearchableSelect.tsx:33:    z-index:1000;
./src/components/common/SearchableSelect.tsx:36:    z-index:1000;
./src/components/common/SearchableSelect.tsx:39:    z-index:1000;
./src/components/common/SearchableSelect.tsx:42:    z-index:1000;
./src/components/common/SearchableSelect.tsx:45:    z-index:1000;
./src/components/common/MultiSelect.tsx:23:    z-index:1000;
./src/components/common/MultiSelect.tsx:26:    z-index:1000;
./src/components/common/MultiSelect.tsx:29:    z-index:1000;
./src/components/common/MultiSelect.tsx:32:    z-index:1000;
./src/components/common/MultiSelect.tsx:35:    z-index:1000;
./src/components/common/MultiSelect.tsx:38:    z-index:1000;
./src/components/common/MultiSelect.tsx:41:    z-index:1000;
./src/components/common/MultiSelect.tsx:44:    z-index:1000;
./src/components/common/MultiSelect.tsx:47:    z-index:1000;
./src/components/common/MultiSelect.tsx:50:    z-index:1000;
./src/components/common/CreatableMultiSelect.tsx:25:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:28:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:31:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:34:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:37:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:40:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:43:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:46:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:49:    z-index: 1000;
./src/components/common/CreatableMultiSelect.tsx:52:    z-index: 1000;
./src/people/widgetViews/organization/HistoryModal.tsx:102:  z-index: 100;
./src/people/widgetViews/organization/DeleteOrgWindow.tsx:11:  z-index: 20;
./src/people/widgetViews/organization/UserInfo.tsx:31:  z-index: 1;
./src/people/widgetViews/organization/style.ts:56:  z-index: 100;
./src/people/widgetViews/summaries/wantedSummaries/style.ts:356:  z-index: 10;
./src/people/main/style.ts:16:  z-index: 100;
./src/pages/bots/BotView.tsx:27:  z-index: 2;
./src/pages/tickets/org/orgHeader/OrgHeaderStyles.tsx:226:  z-index: 999;
./src/pages/tickets/style.ts:23:  z-index: 1;
./src/pages/superadmin/statistics/StatisticsStyles.tsx:98:  z-index: 0;
./src/pages/superadmin/statistics/StatisticsStyles.tsx:109:  z-index: 0;
./src/pages/superadmin/tableComponent/TableStyle.tsx:19:    z-index: 99999999;
./src/pages/superadmin/tableComponent/TableStyle.tsx:33:    z-index: 99999999;
./src/pages/superadmin/header/components/Calendar/CalendarStyles.tsx:10:  z-index: 999;
./src/pages/superadmin/header/components/Calendar/CalendarStyles.tsx:16:  z-index: 999;
./src/pages/superadmin/header/HeaderStyles.tsx:28:  z-index: 9999999;
./src/pages/superadmin/header/HeaderStyles.tsx:149:  z-index: 1;
./src/pages/people/peopleList/PeopleList.tsx:27:  z-index: 0;

[Vayras]

@kevkevinpal @ecurrencyhodler @elraphty yeah I'm seeing a lot of these z-index values while creating this new input component. Which makes the ui bit wonky, if you adjust anything related to positioning, I'm thinking about re-ordering the structure, or using alternatives such as visibility or opacity, what are your thoughts?

[ecurrencyhodler]

@Vayras I updated the issue some more context. We are going to remove z-indexes when applicable but keep them in modals. Raph is going to go through these and create bounties.

[Vayras]

@ecurrencyhodler That's great I hope this brings some sort of uniformity and make the ui more cohesive 🚀

[ecurrencyhodler]

Here are my notes from chatting with Rasul.

The plan

1. Research how to move modals to work through portals
2. Move modals to portals
3. Downgrade z-indexes
4. Structure z-indexes well

1. On researching modals to portals Modals can be done through react portals.

Example:

<div id="app" />
<div id="modals-portal" />

In this scenario, modals are always over the main app. This will help with structuring our website well.

First we should know if we are using modals through portals. If not, we need to research how difficult that is.

2. On moving modals to portals This should be done before step 3. Downgrading z-indexes will not fix anything instantly but modals may fix a lot and remove a lot.

3. On downgrading z-indexes We should go through all the files and minimize z-indexes. For example if two elements have a large difference (1 or 100), we should make it smaller and logical such as: 1->2.

We will eventually replace and restructure z-indexes when appropriate but starting with downgrading will help prevent breaking the site and remain backwards compatible.

4. On restructuring z-indexes There are many factors to consider when using z-indexes well.

For example, z-indexes aren't applied all the time. It needs other styles and positioning to be applied in order to make it work. May have 1 z-index in one place but not in another because they have their own layering logic.

Also reusable components have the same initial z-index but can be overwritten in specific landing pages when needed.

Lastly, there are places where it should be avoided. For examples, #225. We are using z-indexes to handle drop down which isn't best practices. Instead dropdowns should have their own layer that stays above other content. This can be handled through markdown.

[ecurrencyhodler]

Another plan we discussed in standup today:

1. Downgrade z-indexes for backwards compatibility
2. Remove lowest z-indexes first. That’s because they won’t lose their positioning.
3. Then we should be left with mostly modals. We should stick to using our own custom modals because we already have a solution and we can avoid extra dependencies which introduce external security and maintenance risk. The specific issue that raised the z-index issue were components happening inside the same modal.
4. Fix any remaining z-indexes needed.

[ecurrencyhodler]

Okay here is the final discussion with kevin and rasul.

Portals is native to react and therefore isn't adding an extra dependency. The difference between using our custom modals vs. portals is that we are handling z-indexes ourselves. Using portals will help us avoid doing that.

In light of this, we have decided to use portals.

Rasul will also take a look over the weekend at our project and dig into the best way to handle z-indexes. He may also quickly address some issues. Then he will provide a specific plan for us to turn into a bounty to wrap up this issue.