Merge pull request #643 from outline/issue-627

Clarify account dropdown

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<Props> {
+  @observable shadow: boolean = false;
+
+  handleScroll = (ev: SyntheticMouseEvent<*>) => {
+    this.shadow = !!(this.props.shadow && ev.currentTarget.scrollTop > 0);
+  };
+
+  render() {
+    const { shadow, ...rest } = this.props;
+
+    return (
+      <Wrapper onScroll={this.handleScroll} shadow={this.shadow} {...rest} />
+    );
+  }
+}
+
+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;

app/components/Sidebar/Main.js

@@ -52,7 +52,7 @@ class MainSidebar extends React.Component<Props> {
           }
         />
         <Flex auto column>
-          <Scrollable>
+          <Scrollable shadow>
             <Section>
               <SidebarLink to="/dashboard" icon={<HomeIcon />}>
                 Home

app/components/Sidebar/Settings.js

@@ -36,7 +36,7 @@ class SettingsSidebar extends React.Component<Props> {
         />
 
         <Flex auto column>
-          <Scrollable>
+          <Scrollable shadow>
             <Section>
               <Header>Account</Header>
               <SidebarLink to="/settings" icon={<ProfileIcon />}>

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) {
     <Header justify="flex-start" align="center" {...rest}>
       <TeamLogo src={logoUrl} />
       <Flex align="flex-start" column>
-        <TeamName>{teamName}</TeamName>
+        <TeamName>
+          {teamName} <StyledExpandedIcon color={color.text} />
+        </TeamName>
         <Subheading>{subheading}</Subheading>
       </Flex>
     </Header>
   );
 }
 
+const StyledExpandedIcon = styled(ExpandedIcon)`
+  position: relative;
+  top: 6px;
+  left: -4px;
+`;
+
 const Subheading = styled.div`
   padding-left: 10px;
   font-size: 11px;

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",

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"