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;