Refactored collections store and layout components

frontend/components/Layout/Layout.js

@@ -6,24 +6,19 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import _ from 'lodash';
 import keydown from 'react-keydown';
-import classNames from 'classnames/bind';
 import searchIcon from 'assets/icons/search.svg';
 import { Flex } from 'reflexbox';
-import { textColor } from 'styles/constants.scss';
-import styles from './Layout.scss';
+import { textColor, headerHeight } from 'styles/constants.scss';
 
 import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
 import LoadingIndicator from 'components/LoadingIndicator';
 import UserStore from 'stores/UserStore';
 
-const cx = classNames.bind(styles);
-
 type Props = {
   history: Object,
   children?: ?React.Element<any>,
   actions?: ?React.Element<any>,
   title?: ?React.Element<any>,
-  titleText?: string,
   loading?: boolean,
   user: UserStore,
   search: ?boolean,
@@ -57,11 +52,9 @@ type Props = {
     };
 
     return (
-      <div className={styles.container}>
+      <Container column auto>
         <Helmet
-          title={
-            this.props.titleText ? `${this.props.titleText} - Atlas` : 'Atlas'
-          }
+          title="Atlas"
           meta={[
             {
               name: 'viewport',
@@ -74,16 +67,16 @@ type Props = {
 
         {this.props.notifications}
 
-        <div className={cx(styles.header)}>
-          <div className={styles.headerLeft}>
-            <Link to="/" className={styles.team}>Atlas</Link>
-            <span className={styles.title}>
+        <Header>
+          <Flex align="center">
+            <LogoLink to="/">Atlas</LogoLink>
+            <Title>
               {this.props.title}
-            </span>
-          </div>
-          <Flex className={styles.headerRight}>
+            </Title>
+          </Flex>
+          <Flex>
             <Flex>
-              <Flex align="center" className={styles.actions}>
+              <Flex align="center">
                 {this.props.actions}
               </Flex>
               {user.user &&
@@ -91,9 +84,9 @@ type Props = {
                   {this.props.search &&
                     <Flex>
                       <Link to="/search">
-                        <div className={styles.search} title="Search (/)">
-                          <img src={searchIcon} alt="Search" />
-                        </div>
+                        <Search title="Search (/)">
+                          <SearchIcon src={searchIcon} alt="Search" />
+                        </Search>
                       </Link>
                     </Flex>}
                   <DropdownMenu label={<Avatar src={user.user.avatarUrl} />}>
@@ -113,16 +106,67 @@ type Props = {
                 </Flex>}
             </Flex>
           </Flex>
-        </div>
+        </Header>
 
-        <div className={cx(styles.content)}>
+        <Content auto justify="center">
           {this.props.children}
-        </div>
-      </div>
+        </Content>
+      </Container>
     );
   }
 }
 
+const Container = styled(Flex)`
+  width: 100%;
+  height: 100%;
+`;
+
+const Header = styled(Flex)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 0 20px;
+
+  z-index: 1;
+  background: #fff;
+  height: ${headerHeight};
+  border-bottom: 1px solid #eee;
+
+  font-size: 14px;
+  line-height: 1;
+`;
+
+const LogoLink = styled(Link)`
+  font-family: 'Atlas Grotesk';
+  font-weight: bold;
+  color: ${textColor};
+  text-decoration: none;
+  font-size: 16px;
+`;
+
+const Title = styled.span`
+  color: #ccc;
+
+  a {
+    color: #ccc;
+  }
+
+  a:hover {
+    color: $textColor;
+  }
+`;
+
+const Search = styled(Flex)`
+  margin: 0 5px;
+  padding: 15px 5px 0 5px;
+  cursor: pointer;
+`;
+
+const SearchIcon = styled.img`
+  height: 20px;
+`;
+
 const Avatar = styled.img`
   width: 24px;
   height: 24px;
@@ -133,4 +177,9 @@ const MenuLink = styled(Link)`
   color: ${textColor};
 `;
 
+const Content = styled(Flex)`
+  height: 100%;
+  overflow: scroll;
+`;
+
 export default withRouter(inject('user')(Layout));