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
-                    label={
-                      <Avatar circle size={24} src={user.user.avatarUrl} />
-                    }
-                  >
+                  <DropdownMenu label={<Avatar 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,18 +19,15 @@ class PublishingInfo extends React.Component {
     return (
       <Flex align="center" className={styles.user}>
         <Flex className={styles.avatarLine}>
-          {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}
-            />
-          ))}
+          {this.props.collaborators
+            .reverse()
+            .map(user => (
+              <Avatar
+                key={`avatar-${user.id}`}
+                src={user.avatarUrl}
+                title={user.name}
+              />
+            ))}
         </Flex>
         <span className={styles.userName}>
           {this.props.createdBy.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;