Cleanup

frontend/assets/icons/menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" style="enable-background:new 0 0 100 100;" xml:space="preserve"><g><path d="M18.7,27.5h62.7c2.5,0,4.5-2,4.5-4.5s-2-4.5-4.5-4.5H18.7c-2.5,0-4.5,2-4.5,4.5S16.2,27.5,18.7,27.5z"/><path d="M81.4,45.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,45.5,81.4,45.5z"/><path d="M81.4,72.5H18.7c-2.5,0-4.5,2-4.5,4.5s2,4.5,4.5,4.5h62.7c2.5,0,4.5-2,4.5-4.5S83.9,72.5,81.4,72.5z"/></g></svg>

frontend/assets/icons/search.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 40 50" enable-background="new 0 0 40 40" xml:space="preserve"><g><path fill="#000000" d="M35.9,39.3l-12-12c-0.9-0.9-0.9-2.5,0-3.4l0,0c0.9-0.9,2.5-0.9,3.4,0l12,12c0.9,0.9,0.9,2.5,0,3.4l0,0   C38.3,40.2,36.8,40.2,35.9,39.3z"/><path fill="#000000" d="M4.7,4.7c-6.2,6.2-6.2,16.3,0,22.5s16.3,6.2,22.5,0s6.2-16.3,0-22.5S10.9-1.6,4.7,4.7z M23.8,24   c-4.3,4.3-11.4,4.3-15.7,0s-4.3-11.4,0-15.7s11.4-4.3,15.7,0S28.1,19.6,23.8,24z"/></g></svg>

frontend/components/Button/Button.js

@@ -1,17 +1,18 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import { size, color } from 'styles/constants';
+import { color } from 'styles/constants';
-import { darken } from 'polished';
+import { darken, lighten } from 'polished';
 
 const RealButton = styled.button`
   display: inline-block;
-  margin: 0 ${size.medium} ${size.large} 0;
+  margin: 0;
   padding: 0;
   border: 0;
-  background: ${props => (props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+  background: ${color.primary};
   color: ${color.white};
   border-radius: 4px;
+  font-size: 15px;
   min-width: 32px;
   min-height: 32px;
   text-decoration: none;
@@ -23,30 +24,70 @@ const RealButton = styled.button`
     border: 0;
   }
   &:hover {
-    background: ${props => darken(0.05, props.neutral ? color.slate : props.danger ? color.danger : color.primary)};
+    background: ${darken(0.05, color.primary)};
   }
+
+  svg {
+    position: relative;
+    top: .05em;
+  }
+
+  ${props => props.light && `
+    color: ${color.text};
+    background: ${lighten(0.08, color.slateLight)};
+
+    &:hover {
+      background: ${color.slateLight};
+    }
+  `}
+
+  ${props => props.neutral && `
+    background: ${color.slate};
+
+    &:hover {
+      background: ${darken(0.05, color.slate)};
+    }
+  `}
+
+  ${props => props.danger && `
+    background: ${color.danger};
+
+    &:hover {
+      background: ${darken(0.05, color.danger)};
+    }
+  `}
+
   &:disabled {
     background: ${color.slateLight};
   }
 `;
 
 const Label = styled.span`
-  padding: 4px 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-weight: 500;
+
+  ${props => props.hasIcon && 'padding-left: 2px;'}
 `;
 
 const Inner = styled.span`
+  padding: 4px 16px;
   display: flex;
   line-height: 28px;
   justify-content: center;
+  align-items: center;
+
+  ${props => props.small && `
+    padding: 1px 10px;
+  `}
+
+  ${props => props.hasIcon && (props.small ? 'padding-left: 6px;' : 'padding-left: 10px;')}
 `;
 
 export type Props = {
   type?: string,
   value?: string,
+  small?: boolean,
   icon?: React$Element<any>,
   className?: string,
   children?: React$Element<any>,
@@ -56,6 +97,7 @@ export default function Button({
   type = 'text',
   icon,
   children,
+  small,
   value,
   ...rest
 }: Props) {
@@ -64,9 +106,9 @@ export default function Button({
 
   return (
     <RealButton {...rest}>
-      <Inner>
+      <Inner hasIcon={hasIcon} small={small}>
         {hasIcon && icon}
-        {hasText && <Label>{children || value}</Label>}
+        {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
       </Inner>
     </RealButton>
   );

frontend/components/DropdownMenu/DropdownMenu.js

@@ -64,9 +64,7 @@ const Label = styled(Flex).attrs({
   justify: 'center',
   align: 'center',
 })`
-  cursor: pointer;
   z-index: 1000;
-  min-height: 43px;
 `;
 
 const MenuContainer = styled.div`

frontend/scenes/Document/Document.js

@@ -216,21 +216,24 @@ type Props = {
                           }
                           isNew={!!isNew}
                         />
-                      : <a onClick={this.onClickEdit}>
+                      : <Button onClick={this.onClickEdit} light small>
-                          <Icon type="Edit2" /> Edit
+                          Edit
-                        </a>}
+                        </Button>}
-                  </HeaderAction>
-                  <HeaderAction>
-                    {isEditing
-                      ? undefined
-                      : <a onClick={this.onClickEdit}>
-                          <Icon type="Plus" /> New
-                        </a>}
                   </HeaderAction>
                   <HeaderAction>
                     {isEditing
                       ? <a onClick={this.onCancel}>Cancel</a>
-                      : <Menu document={document} />}
+                      : <Button
+                          icon={<Menu document={document} />}
+                          light
+                          small
+                        />}
+                  </HeaderAction>
+                  <HeaderAction>
+                    {!isEditing &&
+                      <Button onClick={this.onClickEdit} light small>
+                        New
+                      </Button>}
                   </HeaderAction>
                 </Flex>
               </Meta>
@@ -246,7 +249,7 @@ const HeaderAction = styled(Flex)`
   align-items: center;
   min-height: 43px;
   color: ${color.text};
-  padding: 0 0 0 16px;
+  padding: 0 0 0 10px;
 
   a {
     color: ${color.text};