diff --git a/app/components/Scrollable/Scrollable.js b/app/components/Scrollable/Scrollable.js index ad88f4380..46df2e6d8 100644 --- a/app/components/Scrollable/Scrollable.js +++ b/app/components/Scrollable/Scrollable.js @@ -1,12 +1,39 @@ // @flow +import * as React from 'react'; +import { observable } from 'mobx'; +import { observer } from 'mobx-react'; import styled from 'styled-components'; -const Scrollable = styled.div` +type Props = { + shadow?: boolean, +}; + +@observer +class Scrollable extends React.Component { + @observable shadow: boolean = false; + + handleScroll = (ev: SyntheticMouseEvent<*>) => { + this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0); + }; + + render() { + const { shadow, ...rest } = this.props; + + return ( + + ); + } +} + +const Wrapper = styled.div` height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; -webkit-overflow-scrolling: touch; + box-shadow: ${props => + props.shadow ? '0 1px inset rgba(0,0,0,.1)' : 'none'}; + transition: all 250ms ease-in-out; `; export default Scrollable; diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js index 649d508c6..8c00488fa 100644 --- a/app/components/Sidebar/Main.js +++ b/app/components/Sidebar/Main.js @@ -52,7 +52,7 @@ class MainSidebar extends React.Component { } /> - +
}> Home diff --git a/app/components/Sidebar/Settings.js b/app/components/Sidebar/Settings.js index 18f70fd7e..2022e52c6 100644 --- a/app/components/Sidebar/Settings.js +++ b/app/components/Sidebar/Settings.js @@ -36,7 +36,7 @@ class SettingsSidebar extends React.Component { /> - +
Account
}> diff --git a/app/components/Sidebar/components/HeaderBlock.js b/app/components/Sidebar/components/HeaderBlock.js index 960f839ec..94077ad19 100644 --- a/app/components/Sidebar/components/HeaderBlock.js +++ b/app/components/Sidebar/components/HeaderBlock.js @@ -2,6 +2,7 @@ import * as React from 'react'; import styled from 'styled-components'; import { color } from 'shared/styles/constants'; +import { ExpandedIcon } from 'outline-icons'; import Flex from 'shared/components/Flex'; import TeamLogo from './TeamLogo'; @@ -16,13 +17,21 @@ function HeaderBlock({ teamName, subheading, logoUrl, ...rest }: Props) {
- {teamName} + + {teamName} + {subheading}
); } +const StyledExpandedIcon = styled(ExpandedIcon)` + position: relative; + top: 6px; + left: -4px; +`; + const Subheading = styled.div` padding-left: 10px; font-size: 11px; diff --git a/package.json b/package.json index 26dfb8d78..8eb00bf0e 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "nodemailer": "^4.4.0", "normalize.css": "^7.0.0", "normalizr": "2.0.1", - "outline-icons": "^1.0.2", + "outline-icons": "^1.1.0", "oy-vey": "^0.10.0", "pg": "^6.1.5", "pg-hstore": "2.3.2", diff --git a/yarn.lock b/yarn.lock index 23f615d2a..4d55d3ee2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7112,10 +7112,14 @@ osenv@^0.1.0, osenv@^0.1.4: os-homedir "^1.0.0" os-tmpdir "^1.0.0" -outline-icons@^1.0.0, outline-icons@^1.0.2: +outline-icons@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.0.3.tgz#f0928a8bbc7e7ff4ea6762eee8fb2995d477941e" +outline-icons@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.1.0.tgz#08eb188a97a1aa8970a4dded7841c3d8b96b8577" + oy-vey@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/oy-vey/-/oy-vey-0.10.0.tgz#16160f837f0ea3d0340adfc2377ba93d1ed9ce76"