Remove Rebass

frontend/components/Layout/Layout.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { browserHistory, Link } from 'react-router';
 import Helmet from 'react-helmet';
+import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import keydown from 'react-keydown';
 import _ from 'lodash';
@@ -9,7 +10,6 @@ import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import { Flex } from 'reflexbox';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Alert from 'components/Alert';
-import { Avatar } from 'rebass';
 
 import styles from './Layout.scss';
 import classNames from 'classnames/bind';
@@ -87,11 +87,7 @@ class Layout extends React.Component {
                         />
                       </div>
                     </Flex>}
-                  <DropdownMenu
+                  <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
-                    label={
-                      <Avatar circle size={24} src={user.user.avatarUrl} />
-                    }
-                  >
                     <MenuItem to="/settings">Settings</MenuItem>
                     <MenuItem to="/keyboard-shortcuts">
                       Keyboard shortcuts
@@ -112,4 +108,10 @@ class Layout extends React.Component {
   }
 }
 
+const Avatar = styled.img`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+`;
+
 export default Layout;

frontend/components/PublishingInfo/PublishingInfo.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import moment from 'moment';
+import styled from 'styled-components';
 
-import { Avatar } from 'rebass';
 import { Flex } from 'reflexbox';
 
 import styles from './PublishingInfo.scss';
@@ -19,15 +19,12 @@ class PublishingInfo extends React.Component {
     return (
       <Flex align="center" className={styles.user}>
         <Flex className={styles.avatarLine}>
-          {this.props.collaborators.reverse().map(user => (
+          {this.props.collaborators
+            .reverse()
+            .map(user => (
               <Avatar
                 key={`avatar-${user.id}`}
                 src={user.avatarUrl}
-              size={26}
-              style={{
-                marginRight: '-12px',
-                border: '2px solid #FFFFFF',
-              }}
                 title={user.name}
               />
             ))}
@@ -52,4 +49,13 @@ class PublishingInfo extends React.Component {
   }
 }
 
+const Avatar = styled.img`
+  width: 26px;
+  height: 26px;
+  marginRight: '-12px',
+
+  border-radius: 50%;
+  border: '2px solid #FFFFFF';
+`;
+
 export default PublishingInfo;

frontend/components/Switch.js

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Base } from 'rebass';
-import { observer } from 'mobx-react';
-
-import { actionColor } from 'styles/constants.scss';
-
-/**
- * Binary toggle switch component
- */
-
-const Switch = observer(({ checked, ...props }) => {
-  const scale = '18';
-  const colors = {
-    success: actionColor,
-    white: '#fff',
-  };
-  const borderColor = actionColor;
-
-  const color = checked ? colors.success : borderColor;
-  const transform = checked ? `translateX(${scale * 0.5}px)` : 'translateX(0)';
-
-  const sx = {
-    root: {
-      display: 'inline-flex',
-      width: scale * 1.5,
-      height: scale,
-      color,
-      backgroundColor: checked ? 'currentcolor' : null,
-      borderRadius: 99999,
-      boxShadow: 'inset 0 0 0 2px',
-      cursor: 'pointer',
-    },
-    dot: {
-      width: scale,
-      height: scale,
-      transitionProperty: 'transform, color',
-      transitionDuration: '.1s',
-      transitionTimingFunction: 'ease-out',
-      transform,
-      boxShadow: 'inset 0 0 0 2px',
-      borderRadius: 99999,
-      color,
-      backgroundColor: colors.white,
-    },
-  };
-
-  return (
-    <Base
-      {...props}
-      className="Switch"
-      role="checkbox"
-      aria-checked={checked}
-      baseStyle={sx.root}
-    >
-      <div style={sx.dot} />
-    </Base>
-  );
-});
-
-Switch.propTypes = {
-  /** Sets the Switch to an active style */
-  checked: React.PropTypes.bool,
-};
-
-Switch.contextTypes = {
-  rebass: React.PropTypes.object,
-};
-
-export default Switch;

frontend/scenes/Application.js

@@ -3,44 +3,10 @@ import { observer } from 'mobx-react';
 import Helmet from 'react-helmet';
 
 @observer class Application extends React.Component {
-  static childContextTypes = {
-    rebass: React.PropTypes.object,
-  };
-
   static propTypes = {
     children: React.PropTypes.node.isRequired,
   };
 
-  getChildContext() {
-    return {
-      rebass: {
-        colors: {
-          primary: '#171B35',
-        },
-        // color: '#eee',
-        // backgroundColor: '#fff',
-        borderRadius: 2,
-        borderColor: '#eee',
-
-        // fontSizes: [64, 48, 28, 20, 18, 16, 14],
-        bold: 500,
-        scale: [0, 8, 18, 36, 72],
-        Input: {
-          // borderBottom: '1px solid #eee',
-        },
-        Button: {
-          // color: '#eee',
-          // backgroundColor: '#fff',
-          // border: '1px solid #ccc',
-        },
-        ButtonOutline: {
-          color: '#000',
-        },
-        InlineForm: {},
-      },
-    };
-  }
-
   render() {
     return (
       <div style={{ width: '100%', height: '100%', display: 'flex', flex: 1 }}>

frontend/scenes/DocumentEdit/DocumentEdit.js

@@ -5,7 +5,6 @@ import keydown from 'react-keydown';
 
 import DocumentEditStore, { DOCUMENT_EDIT_SETTINGS } from './DocumentEditStore';
 
-import Switch from 'components/Switch';
 import Layout, { Title, HeaderAction, SaveAction } from 'components/Layout';
 import { Flex } from 'reflexbox';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
@@ -141,7 +140,7 @@ class DocumentEdit extends Component {
         </HeaderAction>
         <DropdownMenu label={<MoreIcon />}>
           <MenuItem onClick={this.store.togglePreview}>
-            Preview <Switch checked={this.store.preview} />
+            Toggle Preview
           </MenuItem>
           <MenuItem onClick={this.onCancel}>
             Cancel

frontend/scenes/DocumentScene/components/Sidebar/Sidebar.js

@@ -13,8 +13,6 @@ const cx = classNames.bind(styles);
 import SidebarStore from './SidebarStore';
 
 @observer class Sidebar extends React.Component {
-  static store;
-
   static propTypes = {
     open: PropTypes.bool,
     onToggle: PropTypes.func.isRequired,

frontend/scenes/Settings/Settings.js

@@ -1,8 +1,8 @@
+// @flow
 import React from 'react';
 import { observer } from 'mobx-react';
-
+import styled from 'styled-components';
 import { Flex } from 'reflexbox';
-import { Input, ButtonOutline, InlineForm } from 'rebass';
 import Layout, { Title } from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
@@ -13,18 +13,13 @@ import styles from './Settings.scss';
 import SettingsStore from './SettingsStore';
 
 @observer class Settings extends React.Component {
-  static store;
+  store = SettingsStore;
 
   constructor(props) {
     super(props);
     this.store = new SettingsStore();
   }
 
-  onKeyCreate = e => {
-    e.preventDefault();
-    this.store.createApiKey();
-  };
-
   render() {
     const title = (
       <Title>
@@ -73,30 +68,30 @@ import SettingsStore from './SettingsStore';
 
             {this.store.apiKeys &&
               <table className={styles.apiKeyTable}>
+                <tbody>
                   {this.store.apiKeys.map(key => (
                     <ApiKeyRow
                       id={key.id}
+                      key={key.id}
                       name={key.name}
                       secret={key.secret}
                       onDelete={this.store.deleteApiKey}
                     />
                   ))}
+                </tbody>
               </table>}
 
             <div>
               <InlineForm
                 placeholder="Token name"
                 buttonLabel="Create token"
-                label="InlineForm"
                 name="inline_form"
                 value={this.store.keyName}
                 onChange={this.store.setKeyName}
-                onClick={this.onKeyCreate}
+                onSubmit={this.store.createApiKey}
-                style={{ width: '100%' }}
                 disabled={this.store.isFetching}
               />
             </div>
-
           </div>
         </CenteredContent>
       </Layout>
@@ -104,4 +99,76 @@ import SettingsStore from './SettingsStore';
   }
 }
 
+const InlineForm = ({
+  placeholder,
+  buttonLabel,
+  name,
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: {
+  placeholder: string,
+  buttonLabel: string,
+  name: string,
+  value: string,
+  onChange: Function,
+  onSubmit: Function,
+  disabled?: boolean,
+}) => {
+  const handleSubmit = event => {
+    event.preventDefault();
+    onSubmit();
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Flex auto>
+        <TextInput
+          type="text"
+          placeholder={placeholder}
+          value={value || ''}
+          onChange={onChange}
+        />
+        <Button type="submit" value={buttonLabel} />
+      </Flex>
+    </form>
+  );
+};
+
+const TextInput = styled.input`
+  display:flex;
+  flex: 1;
+  height:32px;
+  margin:0;
+  padding-left:8px;
+  padding-right:8px;
+  color:inherit;
+  background-color:rgba(255, 255, 255, .25);
+  border-width:1px;
+  border-style:solid;
+  border-color:rgba(0, 0, 0, .25);
+  border-radius:2px 0 0 2px;
+`;
+
+const Button = styled.input`
+  box-shadow:inset 0 0 0 1px;
+  font-family:inherit;
+  font-size:14px;
+  line-height:16px;
+  min-height:32px;
+  text-decoration:none;
+  display:inline-block;
+  margin:0;
+  padding-top:8px;
+  padding-bottom:8px;
+  padding-left:16px;
+  padding-right:16px;
+  cursor:pointer;
+  border:0;
+  color:black;
+  background-color:transparent;
+  border-radius:0 2px 2px 0;
+  margin-left:-1px;
+`;
+
 export default Settings;

package.json

@@ -138,7 +138,6 @@
     "react-helmet": "3.1.0",
     "react-keydown": "^1.6.1",
     "react-router": "2.8.0",
-    "rebass": "^0.3.4",
     "redis": "^2.6.2",
     "redis-lock": "^0.1.0",
     "reflexbox": "^2.2.3",

yarn.lock

@@ -5973,10 +5973,6 @@ object-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
 
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
@@ -6822,13 +6818,6 @@ react-addons-css-transition-group@15.3.2:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.3.2.tgz#d8fa52bec9bb61bdfde8b9e4652b80297cbff667"
 
-react-addons-pure-render-mixin@^15.4.2:
-  version "15.5.2"
-  resolved "https://registry.yarnpkg.com/react-addons-pure-render-mixin/-/react-addons-pure-render-mixin-15.5.2.tgz#ebb846aeb2fd771336c232822923108f87d5bff2"
-  dependencies:
-    fbjs "^0.8.4"
-    object-assign "^4.1.0"
-
 react-addons-test-utils@^15.3.1:
   version "15.3.2"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.3.2.tgz#c09a44f583425a4a9c1b38444d7a6c3e6f0f41f6"
@@ -7010,14 +6999,6 @@ readline2@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     mute-stream "0.0.5"
 
-rebass@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/rebass/-/rebass-0.3.4.tgz#88a16c6b6cf52e3b3e8d5a54fe42994bd04a4bf7"
-  dependencies:
-    classnames "^2.2.3"
-    object-assign "^4.1.1"
-    react-addons-pure-render-mixin "^15.4.2"
-
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"