feat(visual): dashboard header

packages/component-faraday-ui/src/gridItems/Item.js

+import { isNumber } from 'lodash'
 import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 
@@ -5,7 +6,7 @@ export default styled.div.attrs({
   'data-test-id': props => props['data-test-id'] || 'item',
 })`
   display: flex;
-  flex: ${({ flex }) => flex || 1};
+  flex: ${({ flex }) => (isNumber(flex) ? flex : 1)};
   flex-direction: ${({ vertical }) => (vertical ? 'column' : 'row')};
   justify-content: ${({ centered }) => (centered ? 'center' : 'initial')};
   margin-right: ${({ withRightMargin }) =>

packages/component-faraday-ui/src/gridItems/Row.js

 import { get } from 'lodash'
-import styled, { css } from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
 
 export default styled.div.attrs({
   'data-test-id': props => props['data-test-id'] || 'row',
 })`
   align-items: ${props => get(props, 'alignItems', 'flex-start')};
+  background-color: ${props => props.bgColor || 'transparent'};
   display: flex;
   flex-direction: row;
   justify-content: ${({ justify }) => justify || 'space-evenly'};

packages/component-faraday-ui/src/gridItems/index.js

+export { default as Row } from './Row'
+export { default as Item } from './Item'

packages/component-faraday-ui/src/index.js

@@ -16,3 +16,4 @@ export { default as Text } from './Text'
 
 // modals
 export * from './modals'
+export * from './gridItems'

packages/components-faraday/src/components/Dashboard/Dashboard.js

 import React from 'react'
-import { Button } from '@pubsweet/ui'
 import styled from 'styled-components'
-import { th } from '@pubsweet/ui-toolkit'
+import { Button, H1 } from '@pubsweet/ui'
 import { compose, withProps } from 'recompose'
+import { Row } from 'pubsweet-component-faraday-ui'
 
 import { DashboardItems, DashboardFilters } from './'
 
@@ -16,19 +16,17 @@ const Dashboard = ({
   getDefaultFilterValue,
 }) => (
   <Root className="dashboard">
-    <Header>
-      <Heading>Manuscripts</Heading>
-      <HeaderButtons>
-        <Button
-          data-test="new-manuscript"
-          disabled={!canCreateDraft}
-          onClick={createDraftSubmission}
-          primary
-        >
-          New
-        </Button>
-      </HeaderButtons>
-    </Header>
+    <Row alignItems="center" justify="space-between">
+      <H1>Dashboard</H1>
+      <Button
+        data-test="new-manuscript"
+        disabled={!canCreateDraft}
+        onClick={createDraftSubmission}
+        primary
+      >
+        New
+      </Button>
+    </Row>
     <DashboardFilters
       changeFilterValue={changeFilterValue}
       getDefaultFilterValue={getDefaultFilterValue}
@@ -53,19 +51,4 @@ const Root = styled.div`
   min-height: 50vh;
   overflow: auto;
 `
-
-const Header = styled.div`
-  display: flex;
-  justify-content: space-between;
-`
-
-const Heading = styled.div`
-  color: ${th('colorPrimary')};
-  font-size: 1.6em;
-  text-transform: uppercase;
-`
-
-const HeaderButtons = styled.div`
-  display: flex;
-`
 // #endregion

packages/components-faraday/src/components/Dashboard/DashboardFilters.js

 import React from 'react'
 import { Menu } from '@pubsweet/ui'
-import styled from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 import { compose, withHandlers } from 'recompose'
+import { Row, Item, Text, Label } from 'pubsweet-component-faraday-ui'
 
 const DashboardFilters = ({
   getFilterOptions,
   changeFilterValue,
   getDefaultFilterValue,
 }) => (
-  <FiltersContainer>
-    <span>Filter view:</span>
-    <FilterGroup>
-      <span>Priority</span>
+  <Row alignItems="flex-end" justify="flex-start">
+    <FilterText secondary>Filters</FilterText>
+    <Item flex={0} vertical withRightMargin>
+      <Label>Priority</Label>
       <Menu
         inline
         onChange={changeFilterValue('priority')}
         options={getFilterOptions('priority')}
         value={getDefaultFilterValue('priority')}
       />
-    </FilterGroup>
-    <FilterGroup>
-      <span>Sort</span>
+    </Item>
+    <Item flex={0} vertical>
+      <Label>Sort</Label>
       <Menu
         inline
         onChange={changeFilterValue('order')}
         options={getFilterOptions('order')}
         value={getDefaultFilterValue('order')}
       />
-    </FilterGroup>
-  </FiltersContainer>
+    </Item>
+  </Row>
 )
 
 export default compose(
@@ -41,29 +41,8 @@ export default compose(
 )(DashboardFilters)
 
 // #region styles
-const FiltersContainer = styled.div`
-  align-items: center;
-  border-bottom: ${th('borderDefault')};
-  color: ${th('colorPrimary')};
-  display: flex;
-  justify-content: flex-start;
-  margin: calc(${th('subGridUnit')} * 2) 0;
-  padding-bottom: calc(${th('subGridUnit')} * 2);
-
-  > span {
-    align-self: flex-end;
-    margin-bottom: calc(${th('subGridUnit')} * 2);
-    padding: 0 calc(${th('subGridUnit')});
-  }
-`
-
-const FilterGroup = styled.div`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  margin-left: calc(${th('subGridUnit')} * 2);
-  > div {
-    min-width: 200px;
-  }
+const FilterText = Text.extend`
+  margin-right: ${th('gridUnit')};
+  padding-bottom: ${th('gridUnit')};
 `
 // #endregion

packages/hindawi-theme/src/elements/Menu.js

@@ -2,8 +2,13 @@ import { css } from 'styled-components'
 import { th } from '@pubsweet/ui-toolkit'
 
 export default {
+  Main: css`
+    height: calc(${th('gridUnit')} * 4);
+    min-width: 120px;
+  `,
   Value: css`
     border: none;
+    font-family: ${th('fontHeading')};
 
     &:hover {
       color: ${th('colorSecondary')};
@@ -15,6 +20,8 @@ export default {
   Opener: css`
     border-color: ${props =>
       props.open ? th('menu.hoverColor') : th('colorBorder')};
+    height: calc(${th('gridUnit')} * 4);
+
     &:hover {
       border-color: ${th('menu.hoverColor')};
     }
@@ -38,6 +45,8 @@ export default {
     font-family: ${th('fontHeading')};
     font-size: ${th('fontSizeBase')};
     line-height: ${th('lineHeightBase')};
+    height: calc(${th('gridUnit')} * 4);
+    padding: ${th('gridUnit')};
 
     &:hover {
       background-color: ${th('menu.optionBackground')};

packages/xpub-faraday/app/FaradayApp.js

@@ -44,6 +44,7 @@ export default compose(
 
 const Root = styled.div`
   height: 100%;
+  overflow-y: scroll;
   div[open] {
     width: auto;
   }