diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js index fd8e48b9b..709eb740c 100644 --- a/frontend/src/Components/Form/EnhancedSelectInput.js +++ b/frontend/src/Components/Form/EnhancedSelectInput.js @@ -12,9 +12,9 @@ import ModalBody from 'Components/Modal/ModalBody'; import Portal from 'Components/Portal'; import Scroller from 'Components/Scroller/Scroller'; import { icons, scrollDirections, sizes } from 'Helpers/Props'; +import { isMobile as isMobileUtil } from 'Utilities/browser'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; import HintedSelectInputOption from './HintedSelectInputOption'; import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue'; import TextInput from './TextInput'; diff --git a/frontend/src/Components/Modal/Modal.js b/frontend/src/Components/Modal/Modal.js index 6868d70b3..2a0e56fa7 100644 --- a/frontend/src/Components/Modal/Modal.js +++ b/frontend/src/Components/Modal/Modal.js @@ -6,9 +6,9 @@ import ReactDOM from 'react-dom'; import FocusLock from 'react-focus-lock'; import ErrorBoundary from 'Components/Error/ErrorBoundary'; import { sizes } from 'Helpers/Props'; +import { isIOS } from 'Utilities/browser'; import * as keyCodes from 'Utilities/Constants/keyCodes'; import getUniqueElememtId from 'Utilities/getUniqueElementId'; -import { isIOS } from 'Utilities/mobile'; import { setScrollLock } from 'Utilities/scrollLock'; import ModalError from './ModalError'; import styles from './Modal.css'; diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js index 69b6c79d5..1c93e575b 100644 --- a/frontend/src/Components/Page/PageContentBody.js +++ b/frontend/src/Components/Page/PageContentBody.js @@ -1,23 +1,12 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import OverlayScroller from 'Components/Scroller/OverlayScroller'; import Scroller from 'Components/Scroller/Scroller'; import { scrollDirections } from 'Helpers/Props'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; import { isLocked } from 'Utilities/scrollLock'; import styles from './PageContentBody.css'; class PageContentBody extends Component { - // - // Lifecycle - - constructor(props, context) { - super(props, context); - - this._isMobile = isMobileUtil(); - } - // // Listeners @@ -41,10 +30,8 @@ class PageContentBody extends Component { ...otherProps } = this.props; - const ScrollerComponent = this._isMobile ? Scroller : OverlayScroller; - return ( - {children} - + ); } } diff --git a/frontend/src/Components/Tooltip/Tooltip.js b/frontend/src/Components/Tooltip/Tooltip.js index 1867efe68..1499e7451 100644 --- a/frontend/src/Components/Tooltip/Tooltip.js +++ b/frontend/src/Components/Tooltip/Tooltip.js @@ -5,7 +5,7 @@ import { Manager, Popper, Reference } from 'react-popper'; import Portal from 'Components/Portal'; import { kinds, tooltipPositions } from 'Helpers/Props'; import dimensions from 'Styles/Variables/dimensions'; -import { isMobile as isMobileUtil } from 'Utilities/mobile'; +import { isMobile as isMobileUtil } from 'Utilities/browser'; import styles from './Tooltip.css'; let maxWidth = null; diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css index 09d26d083..29b2016b9 100644 --- a/frontend/src/Styles/Mixins/scroller.css +++ b/frontend/src/Styles/Mixins/scroller.css @@ -1,4 +1,7 @@ @define-mixin scrollbar { + scrollbar-color: var(--scrollbarBackgroundColor) transparent; + scrollbar-width: thin; + &::-webkit-scrollbar { width: 10px; height: 10px; diff --git a/frontend/src/Utilities/mobile.js b/frontend/src/Utilities/browser.js similarity index 69% rename from frontend/src/Utilities/mobile.js rename to frontend/src/Utilities/browser.js index e52975963..ff896e801 100644 --- a/frontend/src/Utilities/mobile.js +++ b/frontend/src/Utilities/browser.js @@ -10,3 +10,7 @@ export function isMobile() { export function isIOS() { return mobileDetect.is('iOS'); } + +export function isFirefox() { + return window.navigator.userAgent.toLowerCase().indexOf('firefox/') >= 0; +}