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;