update filter/sort heading sizes

package.json

@@ -19,7 +19,7 @@
   "dependencies": {
     "classnames": "^2.2.3",
     "debounce": "^1.0.0",
-    "grommet": "^1.0.0"
+    "grommet": "^1.2.1"
   },
   "devDependencies": {
     "babel-plugin-add-module-exports": "^0.1.2",

src/js/components/Filter.js

@@ -116,7 +116,7 @@ export default class Filter extends Component {
     const { active } = this.state;
     let boxProps = Props.pick(this.props, Object.keys(Box.propTypes));
 
-    let header = <Heading tag="h3">{label}</Heading>;
+    let header = <Heading tag="h4">{label}</Heading>;
     if (! inline) {
       let summary = this._renderSummary();
       let icon;
@@ -146,7 +146,10 @@ export default class Filter extends Component {
     }
 
     return (
-      <Box {...boxProps} pad={{...boxProps.pad, ...{between: 'small'}}}>
+      <Box
+        {...boxProps}
+        flex={false}
+        pad={{...boxProps.pad, between: 'small'}}>
         {header}
         {choices}
       </Box>

src/js/components/Filters.js

@@ -6,7 +6,9 @@ import Menu from 'grommet/components/Menu';
 import Box from 'grommet/components/Box';
 import Sidebar from 'grommet/components/Sidebar';
 import FilterIcon from 'grommet/components/icons/base/Filter';
+import Heading from 'grommet/components/Heading';
 import Header from 'grommet/components/Header';
+import Footer from 'grommet/components/Footer';
 import Button from 'grommet/components/Button';
 import Filter from './Filter';
 import Sort from './Sort';
@@ -123,19 +125,24 @@ export default class Filters extends Component {
     return (
       <Sidebar colorIndex="light-2">
         <Header size="large" pad={{horizontal: 'medium'}} justify="between">
-          {Intl.getMessage(this.context.intl, 'Filter by')}
+          <Box pad={{horizontal: 'medium'}}>
+            <Heading tag="h3" margin="none">
+              {Intl.getMessage(this.context.intl, 'Filter by')}
+            </Heading>
+          </Box>
           <Box className={`${CLASS_ROOT}__filters`} flex={false}>
             <Button icon={icon} plain={true} onClick={this.props.onClose}/>
             {this._renderCounts()}
           </Box>
         </Header>
         <Box
           direction={direction}
-          pad={{horizontal: 'large', vertical: 'medium', between: 'medium'}}
+          pad={{horizontal: 'large', between: 'medium'}}
           className={classNames.join(' ')}>
           {filters}
           {sort}
         </Box>
+        <Footer />
       </Sidebar>
     );
   }

src/js/components/Sort.js

@@ -2,6 +2,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import Header from 'grommet/components/Header';
+import Heading from 'grommet/components/Heading';
 import Button from 'grommet/components/Button';
 import Box from 'grommet/components/Box';
 import AscIcon from 'grommet/components/icons/base/LinkDown';
@@ -61,8 +62,10 @@ export default class Sort extends Component {
     let title = Intl.getMessage(this.context.intl, 'Sort');
 
     return (
-      <Box {...boxProps} className={classNames.join(' ')}>
-        <Header size="small">{title}</Header>
+      <Box {...boxProps} flex={false} className={classNames.join(' ')}>
+        <Header size="small">
+          <Heading tag="h4">{title}</Heading>
+        </Header>
         <Box direction="row" justify="between" align="center">
           <select ref="sort" value={this.state.name} onChange={this._onChange}>
             {options}