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-color: ${props => (props.hasError ? 'red' : color.slateLight)};
-  border-radius: ${size.small};
+  border-radius: 4px;
+  font-weight: normal;
 
-  &:focus,
+  &:focus {
-  &:active {
+    border-color: ${color.slate}
-    border-color: rgba(0, 0, 0, .25);
   }
 `;
 
+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) {
+export default function Input({ type, label, ...rest }: Props) {
-  const Component = type === 'textarea' ? RealTextarea : RealInput;
+  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>
+        <Content column>
-          <button onClick={onRequestClose}>Close</button>
+          <h1>{title}</h1>
-          {title}
+          <Close onClick={onRequestClose}><CloseIcon /></Close>
-        </Header>
           {children}
-      </ReactModal>
+        </Content>
+      </StyledModal>
     );
   }
 }
 
-const Header = styled.div`
+const Content = styled(Flex)`
-  text-align: center;
+  width: 640px;
-  font-weight: semibold;
+  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;

frontend/models/Document.js

@@ -152,9 +152,9 @@ class Document {
     return this;
   };
 
-  updateData(data: Object = {}) {
+  updateData(data: Object = {}, dirty: boolean = false) {
     if (data.text) data.title = parseHeader(data.text);
-    data.hasPendingChanges = true;
+    if (dirty) data.hasPendingChanges = true;
     extendObservable(this, data);
   }
 

frontend/scenes/CollectionNew/CollectionNew.js

@@ -3,24 +3,41 @@ import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import Button from 'components/Button';
 import Input from 'components/Input';
+import HelpText from 'components/HelpText';
+
 import Collection from 'models/Collection';
+import CollectionsStore from 'stores/CollectionsStore';
 
 @observer class CollectionNew extends Component {
+  props: {
+    history: Object,
+    collection: Collection,
+    collections: CollectionsStore,
+    onCollectionCreated: () => void,
+  };
+  state: { name: string, isSaving: boolean };
+  state = { name: '', isSaving: false };
+
   static defaultProps = {
     collection: new Collection(),
   };
 
   handleSubmit = async (ev: SyntheticEvent) => {
     ev.preventDefault();
-    await this.props.collection.save();
+    this.setState({ isSaving: true });
+    const { collection, collections } = this.props;
+
+    collection.updateData(this.state);
+    await collection.save();
+    collections.add(collection);
+
+    this.setState({ isSaving: false });
+    this.props.onCollectionCreated();
+    this.props.history.push(collection.url);
   };
 
   handleNameChange = (ev: SyntheticInputEvent) => {
-    this.props.collection.updateData({ name: ev.target.value });
+    this.setState({ name: ev.target.value });
-  };
-
-  handleDescriptionChange = (ev: SyntheticInputEvent) => {
-    this.props.collection.updateData({ description: ev.target.value });
   };
 
   render() {
@@ -29,21 +46,23 @@ import Collection from 'models/Collection';
     return (
       <form onSubmit={this.handleSubmit}>
         {collection.errors.errors.map(error => <span>{error}</span>)}
+        <HelpText>
+          Collections are for grouping your Atlas. They work best when organized
+          around a topic or internal team — Product or Engineering for example.
+        </HelpText>
         <Input
           type="text"
-          placeholder="Name"
+          label="Name"
           onChange={this.handleNameChange}
-          value={collection.name}
+          value={this.state.name}
+          required
           autoFocus
         />
-        <Input
+        <Button
-          type="textarea"
+          type="submit"
-          placeholder="Description (optional)"
+          disabled={this.state.isSaving || !this.state.name}
-          onChange={this.handleDescriptionChange}
+        >
-          value={collection.description}
+          {this.state.isSaving ? 'Creating…' : 'Create'}
-        />
-        <Button type="submit" disabled={collection.isSaving}>
-          {collection.isSaving ? 'Creating…' : 'Create'}
         </Button>
       </form>
     );

frontend/scenes/Document/Document.js

@@ -120,7 +120,7 @@ type Props = {
 
   onChange = text => {
     if (!this.document) return;
-    this.document.updateData({ text });
+    this.document.updateData({ text }, true);
   };
 
   onCancel = () => {

frontend/stores/CollectionsStore.js

@@ -42,6 +42,14 @@ class CollectionsStore {
     return _.find(this.data, { id });
   };
 
+  @action add = (collection: Collection): void => {
+    this.data.push(collection);
+  };
+
+  @action remove = (id: string): void => {
+    this.data.splice(this.data.indexOf(id), 1);
+  };
+
   constructor(options: Options) {
     this.client = client;
     this.errors = stores.errors;

frontend/styles/animations.js

@@ -0,0 +1,14 @@
+// @flow
+import { keyframes } from 'styled-components';
+
+export const modalFadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.98);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;

frontend/styles/constants.js

@@ -40,7 +40,7 @@ export const color = {
   text: '#171B35',
 
   /* Brand */
-  primary: '#73DF7B',
+  primary: '#2B8FBF',
 
   /* Dark Grays */
   slate: '#9BA6B2',