Merge pull request #643 from outline/issue-627

Clarify account dropdown

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;