Polish

frontend/components/Button/Button.js

@@ -25,13 +25,17 @@ const RealButton = styled.button`
   &:hover {
     background: ${darken(0.05, color.primary)};
   }
+  &:disabled {
+    background: ${color.slateLight};
+  }
 `;
 
 const Label = styled.span`
-  padding: 2px 12px;
+  padding: 4px 16px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-weight: 500;
 `;
 
 const Inner = styled.span`

frontend/components/HelpText/HelpText.js

@@ -0,0 +1,10 @@
+// @flow
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+const HelpText = styled.p`
+  user-select: none;
+  color: ${color.slateDark};
+`;
+
+export default HelpText;

frontend/components/HelpText/index.js

@@ -0,0 +1,3 @@
+// @flow
+import HelpText from './HelpText';
+export default HelpText;

frontend/components/Icon/AddIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function AddIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
+      </svg>
+    </Icon>
+  );
+}

frontend/components/Input/Input.js

@@ -2,13 +2,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
-import { size } from 'styles/constants';
+import { size, color } from 'styles/constants';
 
 const RealTextarea = styled.textarea`
   border: 0;
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slate};
+  }
 `;
 
 const RealInput = styled.input`
@@ -16,36 +21,56 @@ const RealInput = styled.input`
   flex: 1;
   padding: 8px 12px;
   outline: none;
+  background: none;
+
+  &::placeholder {
+    color: ${color.slateLight};
+  }
 `;
 
-const Wrapper = styled(Flex)`
+const Wrapper = styled.div`
+
+`;
+
+const Outline = styled(Flex)`
   display: flex;
   flex: 1;
   margin: 0 0 ${size.large};
   color: inherit;
-  border-width: 2px;
+  border-width: 1px;
   border-style: solid;
-  border-color: ${props => (props.hasError ? 'red' : 'rgba(0, 0, 0, .15)')};
-  border-radius: ${size.small};
+  border-color: ${props => (props.hasError ? 'red' : color.slateLight)};
+  border-radius: 4px;
+  font-weight: normal;
 
-  &:focus,
-  &:active {
-    border-color: rgba(0, 0, 0, .25);
+  &:focus {
+    border-color: ${color.slate}
   }
 `;
 
+const LabelText = styled.div`
+  font-weight: 500;
+  padding-bottom: 4px;
+`;
+
 export type Props = {
   type: string,
   value: string,
+  label?: string,
   className?: string,
 };
 
-export default function Input({ type, ...rest }: Props) {
-  const Component = type === 'textarea' ? RealTextarea : RealInput;
+export default function Input({ type, label, ...rest }: Props) {
+  const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
     <Wrapper>
-      <Component {...rest} />
+      <label>
+        {label && <LabelText>{label}</LabelText>}
+        <Outline>
+          <InputComponent {...rest} />
+        </Outline>
+      </label>
     </Wrapper>
   );
 }

frontend/components/Layout/Layout.js

@@ -14,6 +14,7 @@ import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
 import Avatar from 'components/Avatar';
 import Modal from 'components/Modal';
+import AddIcon from 'components/Icon/AddIcon';
 import CollectionNew from 'scenes/CollectionNew';
 
 import SidebarCollection from './components/SidebarCollection';
@@ -72,7 +73,7 @@ type Props = {
   };
 
   render() {
-    const { user, auth, ui } = this.props;
+    const { user, auth, collections, history, ui } = this.props;
 
     return (
       <Container column auto>
@@ -123,10 +124,10 @@ type Props = {
                     <SidebarLink to="/dashboard">Home</SidebarLink>
                     <SidebarLink to="/starred">Starred</SidebarLink>
                   </LinkSection>
-                  <a onClick={this.handleCreateCollection}>
-                    Create new collection
-                  </a>
                   <LinkSection>
+                    <CreateCollection onClick={this.handleCreateCollection}>
+                      <AddIcon />
+                    </CreateCollection>
                     {ui.activeCollection
                       ? <SidebarCollection
                           document={ui.activeDocument}
@@ -146,14 +147,37 @@ type Props = {
         <Modal
           isOpen={this.state.createCollectionModalOpen}
           onRequestClose={this.handleCloseModal}
+          title="Create a collection"
         >
-          <CollectionNew />
+          <CollectionNew
+            collections={collections}
+            history={history}
+            onCollectionCreated={this.handleCloseModal}
+          />
         </Modal>
       </Container>
     );
   }
 }
 
+const CreateCollection = styled.a`
+  position: absolute;
+  top: 8px;
+  right: ${layout.hpadding};
+
+  svg {
+    opacity: .35;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    svg {
+      opacity: 1;
+    }
+  }
+`;
+
 const Container = styled(Flex)`
   position: relative;
   width: 100%;
@@ -200,6 +224,7 @@ const Header = styled(Flex)`
 const LinkSection = styled(Flex)`
   flex-direction: column;
   padding: 10px 0;
+  position: relative;
 `;
 
 export default withRouter(inject('user', 'auth', 'ui', 'collections')(Layout));

frontend/components/Modal/Modal.js

@@ -2,6 +2,10 @@
 import React, { Component } from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
+import { modalFadeIn } from 'styles/animations';
+
+import CloseIcon from '../Icon/CloseIcon';
+import Flex from '../Flex';
 
 class Modal extends Component {
   render() {
@@ -13,24 +17,53 @@ class Modal extends Component {
     } = this.props;
 
     return (
-      <ReactModal
+      <StyledModal
         contentLabel={title}
         onRequestClose={onRequestClose}
         {...rest}
       >
-        <Header>
-          <button onClick={onRequestClose}>Close</button>
-          {title}
-        </Header>
-        {children}
-      </ReactModal>
+        <Content column>
+          <h1>{title}</h1>
+          <Close onClick={onRequestClose}><CloseIcon /></Close>
+          {children}
+        </Content>
+      </StyledModal>
     );
   }
 }
 
-const Header = styled.div`
-  text-align: center;
-  font-weight: semibold;
+const Content = styled(Flex)`
+  width: 640px;
+  max-width: 100%;
+  position: relative;
+`;
+
+const StyledModal = styled(ReactModal)`
+  animation: ${modalFadeIn} 250ms ease;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: white;
+  padding: 15vh 2rem 2rem
+`;
+
+const Close = styled.a`
+  position: fixed;
+  top: 3rem;
+  right: 3rem;
+  opacity: .5;
+
+  &:hover {
+    opacity: 1;
+  }
 `;
 
 export default Modal;

frontend/components/NewCollection/NewCollection.js

@@ -1,6 +0,0 @@
-// @flow
-import React from 'react';
-
-const NewCollection = () => <span>NEW COLLECTION</span>;
-
-export default NewCollection;

frontend/components/NewCollection/index.js

@@ -1,3 +0,0 @@
-// @flow
-import NewCollection from './NewCollection';
-export default NewCollection;