Styling document actions more inline with medium

frontend/components/DropdownMenu/DropdownMenu.js

@@ -65,6 +65,7 @@ const Label = styled(Flex).attrs({
   align: 'center',
 })`
   z-index: 1000;
+  cursor: pointer;
 `;
 
 const MenuContainer = styled.div`

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -18,8 +18,8 @@ type Props = {
 };
 
 const activeStyle = {
-  color: '#000',
+  color: color.black,
-  background: '#E1E1E1',
+  background: color.slateDark,
 };
 
 @observer class SidebarCollection extends React.Component {

frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
-import { color, layout } from 'styles/constants';
+import { color, layout, fontWeight } from 'styles/constants';
 
 import SidebarLink from '../SidebarLink';
 import DropToImport from 'components/DropToImport';
@@ -16,8 +16,8 @@ type Props = {
 };
 
 const activeStyle = {
-  color: '#000',
+  color: color.black,
-  background: '#E1E1E1',
+  background: color.slateDark,
 };
 
 const SidebarCollectionList = observer(({ history, collections }: Props) => {
@@ -42,7 +42,7 @@ const SidebarCollectionList = observer(({ history, collections }: Props) => {
 
 const Header = styled(Flex)`
   font-size: 11px;
-  font-weight: 500;
+  font-weight: ${fontWeight.semiBold};
   text-transform: uppercase;
   color: ${color.slate};
   letter-spacing: 0.04em;

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,26 +1,28 @@
 // @flow
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { layout, color } from 'styles/constants';
+import { layout, color, fontWeight } from 'styles/constants';
-import { darken } from 'polished';
 import styled from 'styled-components';
 
 const activeStyle = {
-  color: '#000000',
+  color: color.black,
+  fontWeight: fontWeight.semiBold,
 };
 
 function SidebarLink(props: Object) {
-  return <StyledNavLink exact {...props} activeStyle={activeStyle} />;
+  return <StyledNavLink exact activeStyle={activeStyle} {...props} />;
 }
 
 const StyledNavLink = styled(NavLink)`
   display: block;
-  padding: 5px ${layout.hpadding};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 5px ${layout.hpadding};
   color: ${color.slateDark};
   font-size: 15px;
 
   &:hover {
-    color: ${darken(0.1, color.slateDark)};
+    color: ${color.text};
   }
 `;
 

frontend/scenes/Document/Document.js

@@ -13,9 +13,7 @@ import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
-import Button from 'components/Button';
 import Editor from 'components/Editor';
-import Icon from 'components/Icon';
 import DropToImport from 'components/DropToImport';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
@@ -105,6 +103,11 @@ type Props = {
     this.props.history.push(url);
   };
 
+  onClickNew = () => {
+    if (!this.document) return;
+    this.props.history.push(`${this.document.collection.url}/new`);
+  };
+
   onSave = async (redirect: boolean = false) => {
     if (this.document && !this.document.allowSave) return;
     let document = this.document;
@@ -216,24 +219,21 @@ type Props = {
                           }
                           isNew={!!isNew}
                         />
-                      : <Button onClick={this.onClickEdit} light small>
+                      : <a onClick={this.onClickEdit}>
                           Edit
-                        </Button>}
+                        </a>}
                   </HeaderAction>
                   <HeaderAction>
                     {isEditing
                       ? <a onClick={this.onCancel}>Cancel</a>
-                      : <Button
+                      : <Menu document={document} />}
-                          icon={<Menu document={document} />}
-                          light
-                          small
-                        />}
                   </HeaderAction>
+                  {!isEditing && <Separator />}
                   <HeaderAction>
                     {!isEditing &&
-                      <Button onClick={this.onClickEdit} light small>
+                      <a onClick={this.onClickNew}>
                         New
-                      </Button>}
+                      </a>}
                   </HeaderAction>
                 </Flex>
               </Meta>
@@ -244,15 +244,29 @@ type Props = {
   }
 }
 
+const Separator = styled.div`
+  margin-left: 12px;
+  width: 1px;
+  height: 20px;
+  background: ${color.slateLight};
+`;
+
 const HeaderAction = styled(Flex)`
   justify-content: center;
   align-items: center;
   min-height: 43px;
   color: ${color.text};
-  padding: 0 0 0 10px;
+  padding: 0 0 0 14px;
 
-  a {
+  a,
+  svg {
     color: ${color.text};
+    opacity: .8;
+    transition: opacity 100ms ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 `;
 

frontend/styles/constants.js

@@ -31,7 +31,7 @@ export const fontWeight = {
   light: 300,
   regular: 400,
   medium: 500,
-  demiBold: 600,
+  semiBold: 600,
   bold: 700,
   heavy: 800,
 };