Team details settings page

app/components/Input/Input.js

@@ -30,7 +30,9 @@ const RealInput = styled.input`
   }
 `;
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  max-width: ${props => (props.short ? '350px' : '100%')};
+`;
 
 export const Outline = styled(Flex)`
   display: flex;
@@ -58,18 +60,20 @@ export type Props = {
   value?: string,
   label?: string,
   className?: string,
+  short?: boolean,
 };
 
 export default function Input({
   type = 'text',
   label,
   className,
+  short,
   ...rest
 }: Props) {
   const InputComponent = type === 'textarea' ? RealTextarea : RealInput;
 
   return (
-    <Wrapper className={className}>
+    <Wrapper className={className} short={short}>
       <label>
         {label && <LabelText>{label}</LabelText>}
         <Outline>

app/index.js

@@ -21,6 +21,7 @@ import Collection from 'scenes/Collection';
 import Document from 'scenes/Document';
 import Search from 'scenes/Search';
 import Settings from 'scenes/Settings';
+import Details from 'scenes/Settings/Details';
 import Members from 'scenes/Settings/Members';
 import Slack from 'scenes/Settings/Slack';
 import Shares from 'scenes/Settings/Shares';
@@ -67,6 +68,11 @@ if (element) {
                       <Route exact path="/starred" component={Starred} />
                       <Route exact path="/drafts" component={Drafts} />
                       <Route exact path="/settings" component={Settings} />
+                      <Route
+                        exact
+                        path="/settings/details"
+                        component={Details}
+                      />
                       <Route
                         exact
                         path="/settings/members"

app/menus/ShareMenu.js

@@ -12,7 +12,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 type Props = {
   label?: React.Node,
   onOpen?: () => *,
-  onClose?: () => *,
+  onClose: () => *,
   history: Object,
   shares: SharesStore,
   share: Share,

app/scenes/Settings/Details.js

@@ -0,0 +1,145 @@
+// @flow
+import * as React from 'react';
+import { observable } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import styled from 'styled-components';
+import { color, size } from 'shared/styles/constants';
+
+import AuthStore from 'stores/AuthStore';
+import UiStore from 'stores/UiStore';
+import ImageUpload from './components/ImageUpload';
+import Input, { LabelText } from 'components/Input';
+import Button from 'components/Button';
+import CenteredContent from 'components/CenteredContent';
+import PageTitle from 'components/PageTitle';
+import Flex from 'shared/components/Flex';
+
+type Props = {
+  auth: AuthStore,
+  ui: UiStore,
+};
+
+@observer
+class Details extends React.Component<Props> {
+  timeout: TimeoutID;
+  form: ?HTMLFormElement;
+
+  @observable name: string;
+  @observable avatarUrl: ?string;
+
+  componentDidMount() {
+    if (this.props.auth.team) {
+      this.name = this.props.auth.team.name;
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  handleSubmit = async (ev: SyntheticEvent<*>) => {
+    ev.preventDefault();
+
+    await this.props.auth.updateTeam({
+      name: this.name,
+      avatarUrl: this.avatarUrl,
+    });
+    this.props.ui.showToast('Details saved', 'success');
+  };
+
+  handleNameChange = (ev: SyntheticInputEvent<*>) => {
+    this.name = ev.target.value;
+  };
+
+  handleAvatarUpload = (avatarUrl: string) => {
+    this.avatarUrl = avatarUrl;
+  };
+
+  handleAvatarError = (error: ?string) => {
+    this.props.ui.showToast(error || 'Unable to upload new avatar');
+  };
+
+  get isValid() {
+    return this.form && this.form.checkValidity();
+  }
+
+  render() {
+    const { team, isSaving } = this.props.auth;
+    if (!team) return null;
+    const avatarUrl = this.avatarUrl || team.avatarUrl;
+
+    return (
+      <CenteredContent>
+        <PageTitle title="Details" />
+        <h1>Details</h1>
+        <ProfilePicture column>
+          <LabelText>Logo</LabelText>
+          <AvatarContainer>
+            <ImageUpload
+              onSuccess={this.handleAvatarUpload}
+              onError={this.handleAvatarError}
+            >
+              <Avatar src={avatarUrl} />
+              <Flex auto align="center" justify="center">
+                Upload
+              </Flex>
+            </ImageUpload>
+          </AvatarContainer>
+        </ProfilePicture>
+        <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
+          <Input
+            label="Name"
+            value={this.name}
+            onChange={this.handleNameChange}
+            required
+            short
+          />
+          <Button type="submit" disabled={isSaving || !this.isValid}>
+            {isSaving ? 'Saving…' : 'Save'}
+          </Button>
+        </form>
+      </CenteredContent>
+    );
+  }
+}
+
+const ProfilePicture = styled(Flex)`
+  margin-bottom: ${size.huge};
+`;
+
+const avatarStyles = `
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+`;
+
+const AvatarContainer = styled(Flex)`
+  ${avatarStyles};
+  position: relative;
+  box-shadow: 0 0 0 1px #dae1e9;
+  background: ${color.white};
+
+  div div {
+    ${avatarStyles};
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+    transition: all 250ms;
+  }
+
+  &:hover div {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.75);
+    color: ${color.white};
+  }
+`;
+
+const Avatar = styled.img`
+  ${avatarStyles};
+`;
+
+export default inject('auth', 'ui')(Details);

app/scenes/Settings/Profile.js

@@ -22,6 +22,7 @@ type Props = {
 @observer
 class Profile extends React.Component<Props> {
   timeout: TimeoutID;
+  form: ?HTMLFormElement;
 
   @observable name: string;
   @observable avatarUrl: ?string;
@@ -58,6 +59,10 @@ class Profile extends React.Component<Props> {
     this.props.ui.showToast(error || 'Unable to upload new avatar');
   };
 
+  get isValid() {
+    return this.form && this.form.checkValidity();
+  }
+
   render() {
     const { user, isSaving } = this.props.auth;
     if (!user) return null;
@@ -81,14 +86,15 @@ class Profile extends React.Component<Props> {
             </ImageUpload>
           </AvatarContainer>
         </ProfilePicture>
-        <form onSubmit={this.handleSubmit}>
-          <StyledInput
+        <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
+          <Input
             label="Name"
             value={this.name}
             onChange={this.handleNameChange}
             required
+            short
           />
-          <Button type="submit" disabled={isSaving || !this.name}>
+          <Button type="submit" disabled={isSaving || !this.isValid}>
             {isSaving ? 'Saving…' : 'Save'}
           </Button>
         </form>
@@ -134,8 +140,4 @@ const Avatar = styled.img`
   ${avatarStyles};
 `;
 
-const StyledInput = styled(Input)`
-  max-width: 350px;
-`;
-
 export default inject('auth', 'ui')(Profile);

app/stores/AuthStore.js

@@ -66,6 +66,22 @@ class AuthStore {
     }
   };
 
+  @action
+  updateTeam = async (params: { name: string, avatarUrl: ?string }) => {
+    this.isSaving = true;
+
+    try {
+      const res = await client.post(`/team.update`, params);
+      invariant(res && res.data, 'Team response not available');
+
+      runInAction('AuthStore#updateTeam', () => {
+        this.team = res.data;
+      });
+    } finally {
+      this.isSaving = false;
+    }
+  };
+
   @action
   logout = async () => {
     this.user = null;