Adding zIndex object to theme styling

src/components/EventCard/EventCard.tsx

@@ -9,6 +9,7 @@ import ImageTargetBlank from 'src/assets/icons/link-target-blank.svg'
 import { IEvent } from '../../models/events.models'
 import { getMonth, getDay } from 'src/utils/helpers'
 import Heading from 'src/components/Heading'
+import { zIndex } from 'src/themes/styled.theme'
 
 const GoToEventLink = styled(ExternalLink)`
   padding-right: 30px;
@@ -18,7 +19,7 @@ const GoToEventLink = styled(ExternalLink)`
     background-image: url(${ImageTargetBlank});
     width: 20px;
     height: 20px;
-    z-index: 0;
+    z-index: ${zIndex.level};
     background-size: contain;
     background-repeat: no-repeat;
     position: absolute;

src/components/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Portal } from 'react-portal'
 import { Box } from 'rebass'
 import styled from 'styled-components'
+import { zIndex } from 'src/themes/styled.theme'
 
 interface IProps {
   // provide onDidDismiss function to enable backdrop click dismiss
@@ -18,7 +19,7 @@ const ModalBackdrop = styled(Box)`
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 9;
+  z-index: ${zIndex.modalBackdrop};
   background: rgba(0, 0, 0, 0.4);
 `
 const ModalContent = styled(Box)`
@@ -31,7 +32,7 @@ const ModalContent = styled(Box)`
   max-width: 100%;
   max-height: 100%;
   position: fixed;
-  z-index: 10;
+  z-index: ${zIndex.modalContent};
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

src/components/MoreContainer/MoreContainer.tsx

@@ -7,6 +7,7 @@ import WhiteBubble1 from 'src/assets/images/white-bubble_1.svg'
 import WhiteBubble2 from 'src/assets/images/white-bubble_2.svg'
 import WhiteBubble3 from 'src/assets/images/white-bubble_3.svg'
 import { BoxProps } from 'rebass'
+import { zIndex } from 'src/themes/styled.theme'
 
 const MoreModalContainer = styled(Box)`
   position: relative;
@@ -16,7 +17,7 @@ const MoreModalContainer = styled(Box)`
     background-image: url(${WhiteBubble0});
     width: 100%;
     height: 100%;
-    z-index: -1;
+    z-index: ${zIndex.behind};
     background-size: contain;
     background-repeat: no-repeat;
     position: absolute;

src/components/ProfileModal/ProfileModal.tsx

@@ -6,7 +6,7 @@ import { inject, observer } from 'mobx-react'
 import { COMMUNITY_PAGES_PROFILE } from 'src/pages/PageList'
 import { NavLink } from 'react-router-dom'
 import Flex from 'src/components/Flex'
-import theme from 'src/themes/styled.theme'
+import theme, { zIndex } from 'src/themes/styled.theme'
 
 interface IProps {
   username: string
@@ -24,11 +24,11 @@ const ModalContainer = styled(Box)`
   position: absolute;
   right: 10px;
   top: 60px;
-  z-index: 900;
+  z-index: ${zIndex.modalContainer};
   height: 100%;
 `
-const ModalContent = styled(Box)`
-  z-index: 900;
+const ModalContainerInner = styled(Box)`
+  z-index: ${zIndex.modalContainerInner};
   position: relative;
   background: white;
   border: 2px solid black;
@@ -38,7 +38,7 @@ const ModalContent = styled(Box)`
 const ModalLink = styled(NavLink).attrs(({ name }) => ({
   activeClassName: 'current',
 }))`
-  z-index: 900;
+  z-index: ${zIndex.modalLink};
   display: flex;
   flex-direction: column;
   color: #000;
@@ -80,7 +80,7 @@ export class ProfileModal extends React.Component<IProps> {
     const { username } = this.props
     return (
       <ModalContainer data-cy="user-menu-list">
-        <ModalContent>
+        <ModalContainerInner>
           <Flex>
             <ModalLink to={'/u/' + username} data-cy="menu-item">
               <Flex>Profile</Flex>
@@ -94,11 +94,15 @@ export class ProfileModal extends React.Component<IProps> {
             ))}
           </Flex>
           <Flex>
-            <ModalLink onClick={() => this.logout()} to={'/how-to'} data-cy="menu-item">
+            <ModalLink
+              onClick={() => this.logout()}
+              to={'/how-to'}
+              data-cy="menu-item"
+            >
               <Flex color="rgba(27,27,27,0.5)">Log out</Flex>
             </ModalLink>
           </Flex>
-        </ModalContent>
+        </ModalContainerInner>
       </ModalContainer>
     )
   }

src/pages/Howto/Content/Howto/Howto.tsx

@@ -19,6 +19,7 @@ import WhiteBubble2 from 'src/assets/images/white-bubble_2.svg'
 import WhiteBubble3 from 'src/assets/images/white-bubble_3.svg'
 import { IUser } from 'src/models/user.models'
 import { Link } from 'src/components/Links'
+import { zIndex } from 'src/themes/styled.theme'
 
 // The parent container injects router props along with a custom slug parameter (RouteComponentProps<IRouterCustomParams>).
 // We also have injected the doc store to access its methods to get doc by slug.
@@ -41,7 +42,7 @@ const MoreBox = styled(Box)`
     background-image: url(${WhiteBubble0});
     width: 100%;
     height: 100%;
-    z-index: -1;
+    z-index: ${zIndex.back};
     background-size: contain;
     background-repeat: no-repeat;
     position: absolute;
@@ -120,7 +121,9 @@ export class Howto extends React.Component<
             </Text>
             <Flex justifyContent={'center'} mt={2}>
               <Link to={'/how-to/'}>
-                <Button variant={'secondary'} data-cy="go-back">Back</Button>
+                <Button variant={'secondary'} data-cy="go-back">
+                  Back
+                </Button>
               </Link>
             </Flex>
           </MoreBox>

src/pages/Maps/Content/Controls/index.tsx

@@ -12,6 +12,7 @@ import { HashLink } from 'react-router-hash-link'
 import { AuthWrapper } from 'src/components/Auth/AuthWrapper'
 import { Map } from 'react-leaflet'
 import { ILocation } from 'src/models/common.models'
+import { zIndex } from 'src/themes/styled.theme'
 
 interface IProps {
   mapRef: React.RefObject<Map>
@@ -30,7 +31,7 @@ const MapFlexBar = styled(Flex)`
   position: absolute;
   top: 25px;
   width: 100%;
-  z-index: 99999;
+  z-index: ${zIndex.mapFlexBar};
   left: 50%;
   transform: translateX(-50%);
 `

src/pages/User/content/UserPage/UserPage.tsx

@@ -17,6 +17,7 @@ import styled from 'styled-components'
 import Icon from 'src/components/Icons'
 import Flex from 'src/components/Flex'
 import ElWithBeforeIcon from 'src/components/ElWithBeforeIcon'
+import { zIndex } from 'src/themes/styled.theme'
 
 import theme from 'src/themes/styled.theme'
 import { capitalizeFirstLetter } from 'src/utils/helpers'
@@ -78,7 +79,7 @@ interface IProps {}
 const UserCategory = styled.div`
   position: relative;
   display: inline-block;
-  z-index: 1;
+  z-index: ${zIndex.level};
 
   &:after {
     content: '';
@@ -87,7 +88,7 @@ const UserCategory = styled.div`
     position: absolute;
     top: 0;
 
-    z-index: -1;
+    z-index: ${zIndex.behind};
     background-repeat: no-repeat;
     background-size: contain;
     left: 0;

src/pages/common/Header/Menu/Logo/Logo.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import LogoImage from 'src/assets/images/logo.svg'
 import LogoBackground from 'src/assets/images/logo-background.svg'
 import Text from 'src/components/Text'
+import { zIndex } from 'src/themes/styled.theme'
 
 const LogoContainer = styled(Flex)`
   height: 60px;
@@ -17,7 +18,7 @@ const LogoContainer = styled(Flex)`
     background-image: url(${LogoBackground});
     width: 250px;
     height: 70px;
-    z-index: 999;
+    z-index: ${zIndex.logoContainer};
     background-size: contain;
     background-repeat: no-repeat;
     top: 0;

src/pages/common/Header/Menu/MenuDesktop.tsx

@@ -5,6 +5,7 @@ import theme from 'src/themes/styled.theme'
 import { Flex } from 'rebass/styled-components'
 import styled from 'styled-components'
 import MenuCurrent from 'src/assets/images/menu-current.svg'
+import { zIndex } from 'src/themes/styled.theme'
 
 const MenuLink = styled(NavLink).attrs(({ name }) => ({
   activeClassName: 'current',
@@ -13,7 +14,7 @@ const MenuLink = styled(NavLink).attrs(({ name }) => ({
   color: ${'black'};
   position: relative;
   > div {
-    z-index: 1;
+    z-index: ${zIndex.default};
     position: relative;
     &:hover {
       opacity: 0.7;
@@ -28,7 +29,7 @@ const MenuLink = styled(NavLink).attrs(({ name }) => ({
       position: absolute;
       bottom: -6px;
       background-image: url(${MenuCurrent});
-      z-index: 0;
+      z-index: ${zIndex.level};
       background-repeat: no-repeat;
       background-size: contain;
       left: 50%;

src/themes/app.globalStyle.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components'
-import theme from 'src/themes/styled.theme'
+import theme, { zIndex } from 'src/themes/styled.theme'
 // Import css files for Slick-slider
 // import "../../node_modules/slick-carousel/slick/slick.css";
 // import "../../node_modules/slick-carousel/slick/slick-theme.css";
@@ -34,7 +34,7 @@ export const GlobalStyle = createGlobalStyle`
   .slick-next {
     position: absolute;
     top: 50%;
-    z-index: 100;
+    z-index: ${zIndex.slickArrows};
     transform: translateY(-50%);
     cursor: pointer;
   }

src/themes/styled.theme.tsx

@@ -15,6 +15,20 @@ export const colors = {
   background: '#f4f6f7',
 }
 
+export const zIndex = {
+  behind: -1,
+  level: 0,
+  default: 1,
+  modalBackdrop: 9,
+  modalContent: 10,
+  slickArrows: 100,
+  modalContainer: 900,
+  modalContainerInner: 900,
+  modalLink: 900,
+  logoContainer: 999,
+  mapFlexBar: 99999,
+}
+
 export type ButtonVariants =
   | 'primary'
   | 'secondary'
@@ -175,4 +189,5 @@ export default {
   maxContainerWidth,
   regular,
   bold,
+  zIndex,
 }