Neaten

frontend/components/DropdownMenu/DropdownMenu.js

@@ -22,6 +22,7 @@ const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
 type DropdownMenuProps = {
   label: React.Element<any>,
   children?: React.Element<any>,
+  style?: Object,
 };
 
 @observer class DropdownMenu extends React.Component {
@@ -42,7 +43,7 @@ type DropdownMenuProps = {
         </Label>
 
         {this.menuOpen &&
-          <Menu>
+          <Menu style={this.props.style}>
             {this.props.children}
           </Menu>}
       </MenuContainer>
@@ -65,9 +66,7 @@ const Label = styled(Flex).attrs({
 })`
   cursor: pointer;
   z-index: 1000;
-
   min-height: 43px;
-  margin: 0 5px;
 `;
 
 const MenuContainer = styled.div`

frontend/components/Layout/Layout.js

@@ -131,29 +131,33 @@ type Props = {
             user &&
             team &&
             <Sidebar column editMode={ui.editMode}>
-              <HeaderBlock user={user} team={team}>
-                <DropdownMenu label={<Avatar src={user.avatarUrl} />}>
-                  <DropdownMenuItem onClick={this.handleOpenSettings}>
-                    Settings
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
-                    Keyboard shortcuts
-                  </DropdownMenuItem>
-                  <MenuLink to="/developers">
-                    <DropdownMenuItem>API</DropdownMenuItem>
-                  </MenuLink>
-                  <DropdownMenuItem onClick={this.handleLogout}>
-                    Logout
-                  </DropdownMenuItem>
-                </DropdownMenu>
-              </HeaderBlock>
+              <DropdownMenu
+                style={{ marginRight: 10, marginTop: -10 }}
+                label={
+                  <HeaderBlock user={user} team={team}>
+                    <Avatar src={user.avatarUrl} />
+                  </HeaderBlock>
+                }
+              >
+                <DropdownMenuItem onClick={this.handleOpenSettings}>
+                  Settings
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
+                  Keyboard shortcuts
+                </DropdownMenuItem>
+                <MenuLink to="/developers">
+                  <DropdownMenuItem>API</DropdownMenuItem>
+                </MenuLink>
+                <DropdownMenuItem onClick={this.handleLogout}>
+                  Logout
+                </DropdownMenuItem>
+              </DropdownMenu>
+
               <Flex column>
                 <Scrollable>
-                  <LinkSection>
-                    <SidebarLink to="/search">Search</SidebarLink>
-                  </LinkSection>
                   <LinkSection>
                     <SidebarLink to="/dashboard">Home</SidebarLink>
+                    <SidebarLink to="/search">Search</SidebarLink>
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
                   <LinkSection>
@@ -225,7 +229,7 @@ type Props = {
 
 const CollectionAction = styled.a`
   position: absolute;
-  top: 8px;
+  top: -2px;
   right: ${layout.hpadding};
 
   svg {
@@ -264,14 +268,13 @@ const MenuLink = styled(Link)`
 const Sidebar = styled(Flex)`
   width: ${layout.sidebarWidth};
   margin-left: ${props => (props.editMode ? `-${layout.sidebarWidth}` : 0)};
-  background: rgba(250, 251, 252, 0.71);
-  border-right: 1px solid #eceff3;
+  background: ${color.smoke};
   transition: margin-left 200ms ease-in-out;
 `;
 
 const LinkSection = styled(Flex)`
   flex-direction: column;
-  padding: 10px 0;
+  margin: 24px 0;
   position: relative;
 `;
 

frontend/components/Layout/components/HeaderBlock.js

@@ -14,18 +14,21 @@ type Props = {
 
 function HeaderBlock({ user, team, children }: Props) {
   return (
-    <Header justify="space-between">
-      <Flex align="center">
+    <Header justify="space-between" align="center">
+      <Flex align="center" column>
         <LogoLink to="/">{team.name}</LogoLink>
-        <p>{user.username}</p>
+        <Name>{user.name}</Name>
       </Flex>
       {children}
     </Header>
   );
 }
 
+const Name = styled.div`
+  font-size: 13px;
+`;
+
 const LogoLink = styled(Link)`
-  margin-top: 15px;
   font-family: 'Atlas Grotesk';
   font-weight: bold;
   color: ${color.text};
@@ -36,7 +39,23 @@ const LogoLink = styled(Link)`
 const Header = styled(Flex)`
   flex-shrink: 0;
   padding: ${layout.padding};
-  padding-bottom: 10px;
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+
+  &:hover {
+    background: rgba(0,0,0,.05);
+  }
+
+  &::after {
+    content: "";
+    left: ${layout.hpadding};
+    right: ${layout.hpadding};
+    background: rgba(0,0,0,.075);
+    height: 1px;
+    position: absolute;
+    bottom: 0;
+  }
 `;
 
 export default HeaderBlock;