diff --git a/package.json b/package.json index cb5e547..93b100f 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "@material-ui/styles": "^4.3.3", "@nozbe/watermelondb": "^0.9.0", "@nozbe/with-observables": "^1.0.2", + "@rehooks/window-scroll-position": "^1.0.1", "@rehooks/window-size": "^1.0.2", "@svgr/webpack": "4.1.0", "@trailofbits/embark-contract-info": "^1.1.0", diff --git a/src/components/MainCointainer.jsx b/src/components/MainCointainer.jsx index ab7f5d8..4ee9e1c 100644 --- a/src/components/MainCointainer.jsx +++ b/src/components/MainCointainer.jsx @@ -1,5 +1,6 @@ import React,{ Suspense, lazy, useState, useEffect } from 'react'; import { Route, Link, Switch, withRouter } from 'react-router-dom' +import useWindowScrollPosition from '@rehooks/window-scroll-position' import PropTypes from 'prop-types'; import classNames from 'classnames'; import queryString from 'query-string' @@ -62,8 +63,11 @@ const useStyles = makeStyles(theme => ({ duration: theme.transitions.duration.enteringScreen, }), }, + appBarTop: { + boxShadow: 'none' + }, appBarBg: { - backgroundColor: '#fff' + backgroundColor: '#FAFAFA' }, accountText: { color: '#939BA1' @@ -150,6 +154,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca const [open, setOpen] = useState(false) const [queryParams, setQueryParams] = useState({}) const [logs, setLogs] = useState([]) + const position = useWindowScrollPosition() useEffect(() => { const queryParams = queryString.parse(search) @@ -173,6 +178,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca const classes = useStyles() const isHome = pathname === "/" + const popoverPosition = position.y < 100 return (
@@ -181,6 +187,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca position="fixed" className={classNames(classes.appBar, classes.appBarBg, { [classes.appBarShift]: open, + [classes.appBarTop]: popoverPosition })} > @@ -197,7 +204,7 @@ function PersistentDrawerLeft({ loading, account, children, enableEthereum, loca color={'#FFFFFF'} />} {!loading && } } - {!isHome && + {(!isHome || !popoverPosition) && Liquid Funding } diff --git a/yarn.lock b/yarn.lock index 0fc7dc5..419e906 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1302,6 +1302,13 @@ hoist-non-react-statics "^3.3.0" rxjs "^6.4.0" +"@rehooks/window-scroll-position@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@rehooks/window-scroll-position/-/window-scroll-position-1.0.1.tgz#3cb80f22cbf9cdbd2041b5236ae1fce8245b2f1c" + integrity sha512-+7uUcU2DBzXW4ygKTCqjCrtT4Nq0f+hNxQvAw69pXSBc7DbqmzfpxrYu27dT4tXrUKSQPFPpo5AdMv2oUJVM7g== + dependencies: + lodash.throttle "^4.1.1" + "@rehooks/window-size@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@rehooks/window-size/-/window-size-1.0.2.tgz#24583dda021969e7b7166b923b055a47cca4e4b5"