From 01cf035e6aede9bd7edc3138565336f6c691ec7d Mon Sep 17 00:00:00 2001 From: Dryden Williams Date: Fri, 1 Nov 2019 14:18:10 +0000 Subject: [PATCH 1/3] Adding zIndex object to theme styling --- src/components/EventCard/EventCard.tsx | 3 ++- src/components/Modal/Modal.tsx | 5 +++-- .../MoreContainer/MoreContainer.tsx | 3 ++- src/components/ProfileModal/ProfileModal.tsx | 20 +++++++++++-------- src/pages/Howto/Content/Howto/Howto.tsx | 7 +++++-- src/pages/Maps/Content/Controls/index.tsx | 3 ++- src/pages/User/content/UserPage/UserPage.tsx | 5 +++-- src/pages/common/Header/Menu/Logo/Logo.tsx | 3 ++- src/pages/common/Header/Menu/MenuDesktop.tsx | 5 +++-- src/themes/app.globalStyle.js | 4 ++-- src/themes/styled.theme.tsx | 15 ++++++++++++++ 11 files changed, 51 insertions(+), 22 deletions(-) diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx index 9657a8bca7..8f7bdad03b 100644 --- a/src/components/EventCard/EventCard.tsx +++ b/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; diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 1183c2712a..ad28c856bd 100644 --- a/src/components/Modal/Modal.tsx +++ b/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%); diff --git a/src/components/MoreContainer/MoreContainer.tsx b/src/components/MoreContainer/MoreContainer.tsx index 0ad8345ce0..a56f4e6cb0 100644 --- a/src/components/MoreContainer/MoreContainer.tsx +++ b/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; diff --git a/src/components/ProfileModal/ProfileModal.tsx b/src/components/ProfileModal/ProfileModal.tsx index dc6ffa82ad..e846ade097 100644 --- a/src/components/ProfileModal/ProfileModal.tsx +++ b/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 { const { username } = this.props return ( - + Profile @@ -94,11 +94,15 @@ export class ProfileModal extends React.Component { ))} - this.logout()} to={'/how-to'} data-cy="menu-item"> + this.logout()} + to={'/how-to'} + data-cy="menu-item" + > Log out - + ) } diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx index 8eee57f1e6..2e752665ad 100644 --- a/src/pages/Howto/Content/Howto/Howto.tsx +++ b/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). // 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< - + diff --git a/src/pages/Maps/Content/Controls/index.tsx b/src/pages/Maps/Content/Controls/index.tsx index c7be7a82a1..b5f0f139f9 100644 --- a/src/pages/Maps/Content/Controls/index.tsx +++ b/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 @@ -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%); ` diff --git a/src/pages/User/content/UserPage/UserPage.tsx b/src/pages/User/content/UserPage/UserPage.tsx index 289241e902..0f67f17edc 100644 --- a/src/pages/User/content/UserPage/UserPage.tsx +++ b/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; diff --git a/src/pages/common/Header/Menu/Logo/Logo.tsx b/src/pages/common/Header/Menu/Logo/Logo.tsx index bdd3a380b4..1b2bdf3337 100644 --- a/src/pages/common/Header/Menu/Logo/Logo.tsx +++ b/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; diff --git a/src/pages/common/Header/Menu/MenuDesktop.tsx b/src/pages/common/Header/Menu/MenuDesktop.tsx index 458ef36bfe..ec716e7d90 100644 --- a/src/pages/common/Header/Menu/MenuDesktop.tsx +++ b/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%; diff --git a/src/themes/app.globalStyle.js b/src/themes/app.globalStyle.js index 0ca9153b3a..72cbbfa1a6 100644 --- a/src/themes/app.globalStyle.js +++ b/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; } diff --git a/src/themes/styled.theme.tsx b/src/themes/styled.theme.tsx index 1182a218c1..ee3b17a9e0 100644 --- a/src/themes/styled.theme.tsx +++ b/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, } From df78a558bd2e8b835d266151e966de009bf76160 Mon Sep 17 00:00:00 2001 From: Dryden Williams Date: Fri, 1 Nov 2019 14:21:13 +0000 Subject: [PATCH 2/3] Updating default value --- src/pages/User/content/UserPage/UserPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/User/content/UserPage/UserPage.tsx b/src/pages/User/content/UserPage/UserPage.tsx index 0f67f17edc..9f60b05995 100644 --- a/src/pages/User/content/UserPage/UserPage.tsx +++ b/src/pages/User/content/UserPage/UserPage.tsx @@ -79,7 +79,7 @@ interface IProps {} const UserCategory = styled.div` position: relative; display: inline-block; - z-index: ${zIndex.level}; + z-index: ${zIndex.default}; &:after { content: ''; From a57b8753037442197747582ea90484186e152c0e Mon Sep 17 00:00:00 2001 From: Benjamin Gammaire Date: Fri, 1 Nov 2019 18:22:33 +0100 Subject: [PATCH 3/3] use modalProfile instead of 3 values for more readability --- src/components/ProfileModal/ProfileModal.tsx | 6 +++--- src/themes/styled.theme.tsx | 4 +--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/ProfileModal/ProfileModal.tsx b/src/components/ProfileModal/ProfileModal.tsx index e846ade097..0b2401fd33 100644 --- a/src/components/ProfileModal/ProfileModal.tsx +++ b/src/components/ProfileModal/ProfileModal.tsx @@ -24,11 +24,11 @@ const ModalContainer = styled(Box)` position: absolute; right: 10px; top: 60px; - z-index: ${zIndex.modalContainer}; + z-index: ${zIndex.modalProfile}; height: 100%; ` const ModalContainerInner = styled(Box)` - z-index: ${zIndex.modalContainerInner}; + z-index: ${zIndex.modalProfile}; position: relative; background: white; border: 2px solid black; @@ -38,7 +38,7 @@ const ModalContainerInner = styled(Box)` const ModalLink = styled(NavLink).attrs(({ name }) => ({ activeClassName: 'current', }))` - z-index: ${zIndex.modalLink}; + z-index: ${zIndex.modalProfile}; display: flex; flex-direction: column; color: #000; diff --git a/src/themes/styled.theme.tsx b/src/themes/styled.theme.tsx index 746d98d41b..abba6cb439 100644 --- a/src/themes/styled.theme.tsx +++ b/src/themes/styled.theme.tsx @@ -23,9 +23,7 @@ export const zIndex = { modalBackdrop: 9, modalContent: 10, slickArrows: 100, - modalContainer: 900, - modalContainerInner: 900, - modalLink: 900, + modalProfile: 900, logoContainer: 999, mapFlexBar: 99999, }