fix: spacing between titlebar and filter badge (#1551)

The recent changes for responsive dashboard caused too much space between the titlebar and the filter badges

Minor refactoring:
* FilterBadge and FilterBar changed to functional components
* style moved to css module
* FilterBar simplified to basically just be a container for managing the position of the badges
* redux connected the FilterBadges resulting in simpler event callbacks

src/components/FilterBar/FilterBadge.js

@@ -1,75 +1,48 @@
-import React, { Component } from 'react'
+import React from 'react'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
-
 import i18n from '@dhis2/d2-i18n'
 
-import { colors } from '@dhis2/ui'
-
-const styles = {
-    badgeContainer: {
-        margin: '2px',
-        padding: '0 16px',
-        borderRadius: '4px',
-        color: colors.white,
-        backgroundColor: '#212934',
-        height: 36,
-        display: 'flex',
-        alignItems: 'center',
-    },
-    badge: {
-        fontSize: '13px',
-        cursor: 'pointer',
-        whiteSpace: 'nowrap',
-    },
-    badgeRemove: {
-        fontSize: '12px',
-        textDecoration: 'underline',
-        marginLeft: '24px',
-        cursor: 'pointer',
-    },
-}
-
-class FilterBadge extends Component {
-    onClick = id => () => this.props.onClick(id)
-    onRemove = id => () => this.props.onRemove(id)
-
-    render() {
-        const { data } = this.props
-
-        return (
-            <div
-                style={styles.badgeContainer}
-                data-test="dashboard-filter-badge"
-            >
-                <span style={styles.badge} onClick={this.onClick(data.id)}>
-                    {`${data.name}: ${
-                        data.values.length > 1
-                            ? i18n.t('{{count}} selected', {
-                                  count: data.values.length,
-                              })
-                            : data.values[0].name
-                    }`}
-                </span>
-                <span
-                    style={styles.badgeRemove}
-                    onClick={this.onRemove(data.id)}
-                >
-                    {i18n.t('Remove')}
-                </span>
-            </div>
-        )
-    }
-}
+import { acRemoveItemFilter } from '../../actions/itemFilters'
+import { acSetActiveModalDimension } from '../../actions/activeModalDimension'
+
+import classes from './styles/FilterBadge.module.css'
+
+const FilterBadge = ({ filter, openFilterModal, removeFilter }) => (
+    <div className={classes.container} data-test="dashboard-filter-badge">
+        <span
+            className={classes.badge}
+            onClick={() =>
+                openFilterModal({
+                    id: filter.id,
+                    name: filter.name,
+                })
+            }
+        >
+            {`${filter.name}: ${
+                filter.values.length > 1
+                    ? i18n.t('{{count}} selected', {
+                          count: filter.values.length,
+                      })
+                    : filter.values[0].name
+            }`}
+        </span>
+        <span
+            className={classes.removeButton}
+            onClick={() => removeFilter(filter.id)}
+        >
+            {i18n.t('Remove')}
+        </span>
+    </div>
+)
 
 FilterBadge.propTypes = {
-    data: PropTypes.object.isRequired,
-    onClick: PropTypes.func.isRequired,
-    onRemove: PropTypes.func.isRequired,
-}
-
-FilterBadge.defaultProps = {
-    onClick: Function.prototype,
-    onRemove: Function.prototype,
+    filter: PropTypes.object.isRequired,
+    openFilterModal: PropTypes.func.isRequired,
+    removeFilter: PropTypes.func.isRequired,
 }
 
-export default FilterBadge
+export default connect(null, {
+    openFilterModal: acSetActiveModalDimension,
+    removeFilter: acRemoveItemFilter,
+})(FilterBadge)

src/components/FilterBar/FilterBar.js

@@ -1,62 +1,31 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
 import FilterBadge from './FilterBadge'
-
 import { sGetNamedItemFilters } from '../../reducers/itemFilters'
-import { acRemoveItemFilter } from '../../actions/itemFilters'
-import { acSetActiveModalDimension } from '../../actions/activeModalDimension'
 
 import classes from './styles/FilterBar.module.css'
 
-class FilterBar extends Component {
-    onBadgeRemove = id => {
-        this.props.removeItemFilter(id)
-    }
-
-    onBadgeClick = id => {
-        this.props.setActiveModalDimension({
-            id,
-            name: this.props.filters.find(item => item.id === id).name,
-        })
-    }
-
-    render() {
-        const { filters } = this.props
-
-        return filters.length ? (
-            // the 3 is calculated so that the FilterBar has the same vertical position as the TitleBar in relation to the ControlBar
-            <div className={classes.bar} style={{ top: 3 }}>
-                {filters.map(filter => (
-                    <FilterBadge
-                        key={filter.id}
-                        data={filter}
-                        onClick={this.onBadgeClick}
-                        onRemove={this.onBadgeRemove}
-                    />
-                ))}
-            </div>
-        ) : null
-    }
-}
+const FilterBar = ({ filters }) =>
+    filters.length ? (
+        <div className={classes.bar}>
+            {filters.map(filter => (
+                <FilterBadge key={filter.id} filter={filter} />
+            ))}
+        </div>
+    ) : null
 
 FilterBar.propTypes = {
     filters: PropTypes.array.isRequired,
-    removeItemFilter: PropTypes.func.isRequired,
-    setActiveModalDimension: PropTypes.func,
 }
 
 FilterBar.defaultProps = {
     filters: [],
-    removeItemFIlter: Function.prototype,
 }
 
 const mapStateToProps = state => ({
     filters: sGetNamedItemFilters(state),
 })
 
-export default connect(mapStateToProps, {
-    setActiveModalDimension: acSetActiveModalDimension,
-    removeItemFilter: acRemoveItemFilter,
-})(FilterBar)
+export default connect(mapStateToProps)(FilterBar)

src/components/FilterBar/styles/FilterBadge.module.css

@@ -0,0 +1,23 @@
+.container {
+    margin: 2px;
+    padding: 0 var(--spacers-dp16);
+    border-radius: 4px;
+    color: var(--colors-white);
+    background-color: #212934;
+    height: 36px;
+    display: flex;
+    align-items: center;
+}
+
+.badge {
+    font-size: 13px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.removeButton {
+    font-size: 12px;
+    text-decoration: underline;
+    margin-left: var(--spacers-dp24);
+    cursor: pointer;
+}

src/components/FilterBar/styles/FilterBar.module.css

@@ -1,7 +1,8 @@
 .bar {
     position: sticky;
+    top: var(--spacers-dp12);
     z-index: 7;
-    padding: 8px 0;
+    margin-top: var(--spacers-dp8);
     display: flex;
     justify-content: center;
     flex-wrap: wrap;

src/components/ItemGrid/EditItemGrid.js

@@ -32,6 +32,8 @@ import ProgressiveLoadingContainer from '../Item/ProgressiveLoadingContainer'
 import { EDIT } from '../Dashboard/dashboardModes'
 import { useWindowDimensions } from '../WindowDimensionsProvider'
 
+import classes from './styles/ItemGrid.module.css'
+
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
 import './styles/ItemGrid.css'
@@ -102,6 +104,7 @@ const EditItemGrid = ({
                 </Layer>
             ) : null}
             <ResponsiveReactGridLayout
+                className={classes.grid}
                 rowHeight={GRID_ROW_HEIGHT_PX}
                 width={getGridWidth(width)}
                 cols={{ lg: GRID_COLUMNS }}

src/components/ItemGrid/ViewItemGrid.js

@@ -31,6 +31,8 @@ import ProgressiveLoadingContainer from '../Item/ProgressiveLoadingContainer'
 import { VIEW } from '../Dashboard/dashboardModes'
 import { getBreakpoint, isSmallScreen } from '../../modules/smallScreen'
 
+import classes from './styles/ItemGrid.module.css'
+
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
 import './styles/ItemGrid.css'
@@ -125,6 +127,7 @@ const ResponsiveItemGrid = ({ isLoading, dashboardItems }) => {
                 </Layer>
             ) : null}
             <ResponsiveReactGridLayout
+                className={classes.grid}
                 rowHeight={GRID_ROW_HEIGHT_PX}
                 width={getGridWidth(width)}
                 cols={{ lg: GRID_COLUMNS, sm: SM_SCREEN_GRID_COLUMNS }}

src/components/ItemGrid/styles/ItemGrid.module.css

@@ -0,0 +1,3 @@
+.grid {
+    margin-top: var(--spacers-dp16);
+}

src/components/TitleBar/styles/ViewTitleBar.module.css

@@ -1,6 +1,5 @@
 .container {
-    margin-top: 13px;
-    margin-bottom: 20px;
+    margin-top: var(--spacers-dp12);
 }
 
 .actions {