Move settings to modal (#139)

frontend/components/Layout/Layout.js

@@ -14,11 +14,12 @@ import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
-import KeyboardShortcuts from 'components/KeyboardShortcuts';
 import Avatar from 'components/Avatar';
 import Modal from 'components/Modal';
 import AddIcon from 'components/Icon/AddIcon';
 import CollectionNew from 'scenes/CollectionNew';
+import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
+import Settings from 'scenes/Settings';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
@@ -78,6 +79,10 @@ type Props = {
     this.modal = 'keyboard-shortcuts';
   }
 
+  handleOpenSettings = () => {
+    this.modal = 'settings';
+  };
+
   handleCreateCollection = () => {
     this.modal = 'create-collection';
   };
@@ -114,9 +119,9 @@ type Props = {
                   <LogoLink to="/">Atlas</LogoLink>
                 </Flex>
                 <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
-                  <MenuLink to="/settings">
-                    <DropdownMenuItem>Settings</DropdownMenuItem>
-                  </MenuLink>
+                  <DropdownMenuItem onClick={this.handleOpenSettings}>
+                    Settings
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
                     Keyboard shortcuts
                   </DropdownMenuItem>
@@ -176,6 +181,13 @@ type Props = {
         >
           <KeyboardShortcuts />
         </Modal>
+        <Modal
+          isOpen={this.modal === 'settings'}
+          onRequestClose={this.handleCloseModal}
+          title="Settings"
+        >
+          <Settings />
+        </Modal>
       </Container>
     );
   }

frontend/index.js

@@ -27,7 +27,6 @@ import Starred from 'scenes/Starred';
 import Collection from 'scenes/Collection';
 import Document from 'scenes/Document';
 import Search from 'scenes/Search';
-import Settings from 'scenes/Settings';
 import SlackAuth from 'scenes/SlackAuth';
 import Flatpage from 'scenes/Flatpage';
 import ErrorAuth from 'scenes/ErrorAuth';
@@ -121,7 +120,7 @@ render(
 
                   <Route exact path="/search" component={Search} />
                   <Route exact path="/search/:query" component={Search} />
-                  <Route exact path="/settings" component={Settings} />
+                  <Route exact path="/developers" component={Api} />
 
                   <Route path="/404" component={Error404} />
 
@@ -135,9 +134,6 @@ render(
                     path="/collections/:id/new"
                     component={DocumentNew}
                   />
-
-                  <Route exact path="/developers" component={Api} />
-
                   <Route component={notFoundSearch} />
                 </Switch>
               </Layout>

frontend/scenes/Settings/Settings.js

@@ -1,17 +1,17 @@
 // @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-import Flex from 'components/Flex';
-
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import ApiKeyRow from './components/ApiKeyRow';
-import styles from './Settings.scss';
 import SettingsStore from './SettingsStore';
+import { color } from 'styles/constants';
 
+import Flex from 'components/Flex';
 import Button from 'components/Button';
 import Input from 'components/Input';
-import CenteredContent from 'components/CenteredContent';
+import HelpText from 'components/HelpText';
 import SlackAuthLink from 'components/SlackAuthLink';
-import PageTitle from 'components/PageTitle';
 
 @observer class Settings extends React.Component {
   store: SettingsStore;
@@ -25,15 +25,14 @@ import PageTitle from 'components/PageTitle';
     const showSlackSettings = DEPLOYMENT === 'hosted';
 
     return (
-      <CenteredContent>
-        <PageTitle title="Settings" />
+      <Flex column>
         {showSlackSettings &&
-          <div className={styles.section}>
-            <h2 className={styles.sectionHeader}>Slack</h2>
-            <p>
+          <Section>
+            <h2>Slack</h2>
+            <HelpText>
               Connect Atlas to your Slack to instantly search for your documents
               using <code>/atlas</code> command.
-            </p>
+            </HelpText>
 
             <SlackAuthLink
               scopes={['commands']}
@@ -47,17 +46,17 @@ import PageTitle from 'components/PageTitle';
                 srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"
               />
             </SlackAuthLink>
-          </div>}
+          </Section>}
 
-        <div className={styles.section}>
-          <h2 className={styles.sectionHeader}>API access</h2>
-          <p>
+        <Section>
+          <h2>API access</h2>
+          <HelpText>
             Create API tokens to hack on your Atlas.
-            Learn more in <a href>API documentation</a>.
-          </p>
+            Learn more in <Link to="/developers">API documentation</Link>.
+          </HelpText>
 
           {this.store.apiKeys &&
-            <table className={styles.apiKeyTable}>
+            <Table>
               <tbody>
                 {this.store.apiKeys &&
                   this.store.apiKeys.map(key => (
@@ -70,9 +69,7 @@ import PageTitle from 'components/PageTitle';
                     />
                   ))}
               </tbody>
-            </table>}
-
-          <div>
+            </Table>}
           <InlineForm
             placeholder="Token name"
             buttonLabel="Create token"
@@ -82,9 +79,8 @@ import PageTitle from 'components/PageTitle';
             onSubmit={this.store.createApiKey}
             disabled={this.store.isFetching}
           />
-          </div>
-        </div>
-      </CenteredContent>
+        </Section>
+      </Flex>
     );
   }
 }
@@ -148,4 +144,18 @@ class InlineForm extends React.Component {
   }
 }
 
+const Section = styled.div`
+  margin-bottom: 40px;
+`;
+
+const Table = styled.table`
+  margin-bottom: 20px;
+  width: 100%;
+
+  td {
+    margin-right: 20px;
+    color: ${color.slate};
+  }
+`;
+
 export default Settings;

frontend/scenes/Settings/Settings.scss

@@ -1,19 +0,0 @@
-@import '~styles/constants.scss';
-
-.section {
-  margin-bottom: 40px;
-}
-
-.sectionHeader {
-  border-bottom: 1px solid #eee;
-}
-
-.apiKeyTable {
-  margin-bottom: 20px;
-  width: 100%;
-
-  td {
-    margin-right: 20px;
-    color: #969696;
-  }
-}