@sis-cc/dotstatsuite-visions 10.5.1 → 10.6.0

package/es/VirtualizedTree/utils.js

@@ -0,0 +1,150 @@
+import * as R from 'ramda';
+
+export var getHierarchicalId = function getHierarchicalId(item) {
+  return R.prop('hierarchicalId', item) || R.prop('id', item);
+};
+
+export var getDescendants = function getDescendants(id, groupedItems) {
+  var reccurse = function reccurse(_id) {
+    var children = R.propOr([], _id, groupedItems);
+    return R.pipe(R.map(function (item) {
+      var __id = getHierarchicalId(item);
+      var descendants = reccurse(__id);
+      return R.prepend(item, descendants);
+    }), R.unnest)(children);
+  };
+
+  return reccurse(id);
+};
+
+export var isItemSelected = function isItemSelected(selectIds) {
+  return function (item) {
+    if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
+      return !item.isSelected;
+    }
+    return !!item.isSelected;
+  };
+};
+
+export var getDepth = function getDepth(indexedItems) {
+  return function (item) {
+    if (R.isNil(item.parentId)) {
+      return 0;
+    }
+    var parent = R.prop(item.parentId, indexedItems);
+    return getDepth(indexedItems)(parent) + 1;
+  };
+};
+
+export var getDuplicates = function getDuplicates(items, indexedItems) {
+  var itemsIds = R.pluck('id', items);
+  var grouped = R.pipe(R.values, R.groupBy(R.prop('id')))(indexedItems);
+  return R.pipe(R.props(itemsIds), R.unnest)(grouped);
+};
+
+export var getDeprecatedIds = function getDeprecatedIds(ids, items, selectedIds) {
+  var groupedItemsByParentId = items.groupedItemsByParentId,
+      indexedItemsById = items.indexedItemsById;
+
+  var _ids = ids;
+  var reccurse = function reccurse(scopeIds) {
+    var scopeItems = R.props(scopeIds, indexedItemsById);
+    var grouped = R.groupBy(R.propOr('#ROOT', 'parentId'), scopeItems);
+    var refined = R.omit(R.append('#ROOT', _ids), grouped);
+
+    var deprecatedParents = R.reduce(function (acc, id) {
+      var _item = R.prop(id, indexedItemsById);
+      if (!isItemSelected(selectedIds)(_item)) {
+        return acc;
+      }
+      var _itemsIds = R.has('hierarchicalId', _item) ? R.pipe(R.values, R.filter(R.propEq('id', _item.id)), R.map(getHierarchicalId))(indexedItemsById) : [id];
+
+      if (R.propOr(true, 'isEnabled', _item)) {
+        return acc;
+      }
+      var children = R.pipe(R.props(_itemsIds), R.unnest)(groupedItemsByParentId);
+      var selectedChild = R.find(function (child) {
+        return !R.includes(getHierarchicalId(child), _ids) && isItemSelected(selectedIds)(child);
+      }, children);
+      if (R.isNil(selectedChild)) {
+        return R.concat(acc, _itemsIds);
+      }
+      return acc;
+    }, [], R.keys(refined));
+
+    if (!R.isEmpty(deprecatedParents)) {
+      _ids = R.concat(_ids, deprecatedParents);
+      var deprecatedAncestors = reccurse(deprecatedParents);
+      return R.concat(deprecatedParents, deprecatedAncestors);
+    }
+
+    return deprecatedParents;
+  };
+
+  return reccurse(ids);
+};
+
+export var getSingleDisableAccessor = function getSingleDisableAccessor(groupedItems, disableAccessor) {
+  // items => total list
+  return function (item, selectedIds) {
+    if (!isItemSelected(selectedIds)(item) && disableAccessor(item)) {
+      var descendants = getDescendants(getHierarchicalId(item), groupedItems);
+      var validDescendant = R.find(isItemSelected(selectedIds), descendants);
+      return R.isNil(validDescendant);
+    }
+    return false;
+  };
+};
+
+export var getHierDisableAccessor = function getHierDisableAccessor(groupedItems, spotlightedGroupedItems, disableAccessor) {
+  var accessor = function accessor(item, selectedIds) {
+    if (!isItemSelected(selectedIds)(item) && disableAccessor(item)) {
+      var spotlightedDescendants = getDescendants(getHierarchicalId(item), spotlightedGroupedItems);
+      var validSpotlightedDescendant = R.find(function (_item) {
+        return !accessor(_item, spotlightedGroupedItems);
+      }, spotlightedDescendants);
+      if (R.isNil(validSpotlightedDescendant)) {
+        var descendants = getDescendants(getHierarchicalId(item), groupedItems);
+        var validDescendant = R.find(isItemSelected(selectedIds), descendants);
+        return R.isNil(validDescendant);
+      }
+    }
+    return false;
+  };
+  return accessor;
+};
+
+export var getScopeGetters = {
+  all: function all(items) {
+    return function () {
+      return R.reject(R.prop('isDisabled'), R.values(items.indexedItemsById));
+    };
+  },
+  single: function single() {
+    return function (item) {
+      return [item];
+    };
+  },
+  children: function children(items) {
+    return function (item) {
+      var childItems = R.propOr([], getHierarchicalId(item), items.groupedItemsByParentId);
+      return R.reject(R.prop('isDisabled'), R.prepend(item, childItems));
+    };
+  },
+  branch: function branch(items) {
+    return function (item) {
+      var descendants = getDescendants(getHierarchicalId(item), items.groupedItemsByParentId);
+      var res = R.reject(R.prop('isDisabled'), R.prepend(item, descendants));
+      return res;
+    };
+  },
+  level: function level(items) {
+    return function (item) {
+      var indexed = items.indexedItemsById;
+      var depth = getDepth(indexed)(item);
+      return R.filter(function (it) {
+        return !R.prop('isDisabled', it) && getDepth(indexed)(it) === depth;
+      }, R.values(indexed));
+    };
+  }
+};

package/es/VirtualizedTree/withExpansionTree.js

@@ -5,7 +5,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 /* eslint react/prop-types: 0 */
 import React, { useState, useEffect } from 'react';
 import * as R from 'ramda';
-import { getHierarchicalId } from './VirtualizedTree';
+import { getHierarchicalId } from './utils';
 
 var withExpansionTree = function withExpansionTree(Component) {
   return function (_ref) {

package/es/VirtualizedTree/withSpotlight.js

@@ -5,7 +5,7 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 /* eslint react/prop-types: 0 */
 import * as R from 'ramda';
 import React, { useEffect, useMemo, useState } from 'react';
-import { getHierarchicalId } from './VirtualizedTree';
+import { getHierarchicalId } from './utils';
 
 export var spotlightFilter = function spotlightFilter(term) {
   var labelRenderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : R.prop('label');
@@ -55,6 +55,7 @@ var withSpotlight = function withSpotlight(Component) {
     }, [term, items]);
 
     return React.createElement(Component, _extends({}, rest, {
+      allItems: items,
       items: filteredItems,
       labelRenderer: labelRenderer,
       hasSpotlight: R.length(items) >= 8,

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -1,7 +1,6 @@
 'use strict';
 
 exports.__esModule = true;
-exports.getScopeGetters = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -21,7 +20,7 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _VirtualizedTree = require('../VirtualizedTree/VirtualizedTree');
+var _utils = require('../VirtualizedTree/utils');
 
 var _Button = require('@material-ui/core/Button');
 
@@ -43,14 +42,6 @@ var _DialogActions = require('@material-ui/core/DialogActions');
 
 var _DialogActions2 = _interopRequireDefault(_DialogActions);
 
-var _Card = require('@material-ui/core/Card');
-
-var _Card2 = _interopRequireDefault(_Card);
-
-var _CardContent = require('@material-ui/core/CardContent');
-
-var _CardContent2 = _interopRequireDefault(_CardContent);
-
 var _Paper = require('@material-ui/core/Paper');
 
 var _Paper2 = _interopRequireDefault(_Paper);
@@ -67,10 +58,6 @@ var _Close = require('@material-ui/icons/Close');
 
 var _Close2 = _interopRequireDefault(_Close);
 
-var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
-
-var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
-
 var _ExpandMore = require('@material-ui/icons/ExpandMore');
 
 var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
@@ -83,6 +70,10 @@ var _reactDraggable = require('react-draggable');
 
 var _reactDraggable2 = _interopRequireDefault(_reactDraggable);
 
+var _SelectionModeMenu = require('./SelectionModeMenu');
+
+var _SelectionModeMenu2 = _interopRequireDefault(_SelectionModeMenu);
+
 var _ = require('..');
 
 var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
@@ -247,110 +238,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var getScopeGetters = exports.getScopeGetters = function getScopeGetters(items, groupedItems, disableAccessor) {
-  var indexed = R.indexBy(_VirtualizedTree.getHierarchicalId, items);
-  return {
-    all: function all() {
-      return R.reject(disableAccessor, items);
-    },
-    single: function single(item) {
-      return [item];
-    },
-    children: function children(item) {
-      var childItems = R.propOr([], (0, _VirtualizedTree.getHierarchicalId)(item), groupedItems);
-      return R.reject(disableAccessor, R.prepend(item, childItems));
-    },
-    branch: function branch(item) {
-      var reccurse = function reccurse(_item) {
-        var childItems = R.pipe(R.propOr([], (0, _VirtualizedTree.getHierarchicalId)(_item)), R.map(reccurse), R.unnest)(groupedItems);
-
-        return R.prepend(_item, childItems);
-      };
-      var items = reccurse(item);
-      return R.reject(disableAccessor, items);
-    },
-    level: function level(item) {
-      var depth = (0, _VirtualizedTree.getDepth)(indexed)(item);
-      return R.filter(function (it) {
-        return !disableAccessor(it) && (0, _VirtualizedTree.getDepth)(indexed)(it) === depth;
-      }, items);
-    }
-  };
-};
-
-var SelectionModeMenu = function SelectionModeMenu(_ref) {
-  var isOpen = _ref.isOpen,
-      onSelect = _ref.onSelect,
-      options = _ref.options,
-      selected = _ref.selected,
-      classes = _ref.classes,
-      isNarrow = _ref.isNarrow,
-      hint = _ref.hint,
-      maxHeight = _ref.maxHeight;
-
-  if (!isOpen) {
-    return null;
-  }
-  return _react2.default.createElement(
-    'div',
-    { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
-    _react2.default.createElement(
-      _Card2.default,
-      { style: { maxHeight: maxHeight - 5, overflow: 'auto' } },
-      _react2.default.createElement(
-        _CardContent2.default,
-        { className: classes.selectModeContainer },
-        R.map(function (_ref2) {
-          var value = _ref2.value,
-              label = _ref2.label,
-              img = _ref2.img;
-          return _react2.default.createElement(
-            _.Button,
-            {
-              className: classes.selectButton,
-              selected: value === selected,
-              key: value,
-              onClick: function onClick() {
-                return onSelect(value);
-              }
-            },
-            _react2.default.createElement(
-              _Paper2.default,
-              { className: classes.selectModeItem, key: value },
-              _react2.default.createElement(
-                _Typography2.default,
-                { variant: 'body2' },
-                label
-              ),
-              !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
-            )
-          );
-        }, options)
-      ),
-      _react2.default.createElement(
-        'div',
-        { className: classes.hint },
-        _react2.default.createElement(_EmojiObjects2.default, null),
-        _react2.default.createElement(
-          _Typography2.default,
-          { variant: 'body2' },
-          hint
-        )
-      )
-    )
-  );
-};
-SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  classes: _propTypes2.default.object,
-  hint: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
-  isNarrow: _propTypes2.default.bool,
-  isOpen: _propTypes2.default.bool,
-  onSelect: _propTypes2.default.func,
-  options: _propTypes2.default.array,
-  selected: _propTypes2.default.string,
-  maxHeight: _propTypes2.default.number
-} : {};
-
 var icons = {
   single: _smallSingleSelection2.default,
   children: _smallChildrenSelection2.default,
@@ -371,13 +258,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       isOpen = props.isOpen,
       isNarrow = props.isNarrow,
       labels = props.labels,
-      disableAccessor = props.disableAccessor,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
       expandAll = props.expandAll,
       collapseAll = props.collapseAll,
       spotlight = props.spotlight,
       setSpotlight = props.setSpotlight,
       expandedIds = props.expandedIds,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds']);
+      allItems = props.allItems,
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds', 'allItems']);
 
   var _useState = (0, _react.useState)('single'),
       selectionMode = _useState[0],
@@ -433,10 +322,16 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     img: _allSelection2.default
   }];
 
+  var _allGroupedItems = R.pipe(R.map(function (item) {
+    return _extends({}, item, {
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    });
+  }), R.groupBy(R.propOr('#ROOT', 'parentId')))(allItems);
+  var _disableAccessor = selectionMode === 'single' || selectionMode === 'level' ? (0, _utils.getSingleDisableAccessor)(_allGroupedItems, disableAccessor) : (0, _utils.getHierDisableAccessor)(_allGroupedItems, groupedFilteredItems, disableAccessor);
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
   };
-  var scopeGetters = getScopeGetters(selectionItems, groupedFilteredItems, isDisabled);
+  var scopeGetter = R.prop(selectionMode, _utils.getScopeGetters);
 
   var onChangeSelection = function onChangeSelection(ids) {
     var nextSelection = R.reduce(function (acc, id) {
@@ -541,7 +436,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
         _react2.default.createElement(
           _Grid2.default,
           { item: true, xs: 12 },
-          _react2.default.createElement(SelectionModeMenu, {
+          _react2.default.createElement(_SelectionModeMenu2.default, {
             classes: classes,
             isOpen: isOpenSelectionMenu,
             isNarrow: isNarrow,
@@ -555,14 +450,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             maxHeight: listHeight
           }),
           _react2.default.createElement(_.VirtualizedTree, _extends({}, rest, {
-            disableAccessor: disableAccessor,
+            disableAccessor: _disableAccessor,
+            isGreyed: isDisabled,
             labels: labels,
             labelRenderer: labelRenderer,
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
             treeHeight: listHeight,
-            getItemScope: R.prop(selectionMode, scopeGetters),
+            scopeGetter: scopeGetter,
             expandedIds: expandedIds
           }))
         )
@@ -645,7 +541,9 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   collapseAll: _propTypes2.default.func,
   spotlight: _propTypes2.default.object,
   setSpotlight: _propTypes2.default.func,
-  expandedIds: _propTypes2.default.object
+  expandedIds: _propTypes2.default.object,
+  allItems: _propTypes2.default.array
 } : {};
 
-exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(AdvancedFilterDialog));
+exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(AdvancedFilterDialog));
+module.exports = exports['default'];

package/lib/AdvancedFilterDialog/SelectionModeMenu.js

@@ -0,0 +1,118 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _Card = require('@material-ui/core/Card');
+
+var _Card2 = _interopRequireDefault(_Card);
+
+var _CardContent = require('@material-ui/core/CardContent');
+
+var _CardContent2 = _interopRequireDefault(_CardContent);
+
+var _Paper = require('@material-ui/core/Paper');
+
+var _Paper2 = _interopRequireDefault(_Paper);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _EmojiObjects = require('@material-ui/icons/EmojiObjects');
+
+var _EmojiObjects2 = _interopRequireDefault(_EmojiObjects);
+
+var _ = require('..');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SelectionModeMenu = function SelectionModeMenu(_ref) {
+  var isOpen = _ref.isOpen,
+      onSelect = _ref.onSelect,
+      options = _ref.options,
+      selected = _ref.selected,
+      classes = _ref.classes,
+      isNarrow = _ref.isNarrow,
+      hint = _ref.hint,
+      maxHeight = _ref.maxHeight;
+
+  if (!isOpen) {
+    return null;
+  }
+  return _react2.default.createElement(
+    'div',
+    { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
+    _react2.default.createElement(
+      _Card2.default,
+      { style: { maxHeight: maxHeight - 5, overflow: 'auto' } },
+      _react2.default.createElement(
+        _CardContent2.default,
+        { className: classes.selectModeContainer },
+        R.map(function (_ref2) {
+          var value = _ref2.value,
+              label = _ref2.label,
+              img = _ref2.img;
+          return _react2.default.createElement(
+            _.Button,
+            {
+              className: classes.selectButton,
+              selected: value === selected,
+              key: value,
+              onClick: function onClick() {
+                return onSelect(value);
+              }
+            },
+            _react2.default.createElement(
+              _Paper2.default,
+              { className: classes.selectModeItem, key: value },
+              _react2.default.createElement(
+                _Typography2.default,
+                { variant: 'body2' },
+                label
+              ),
+              !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
+            )
+          );
+        }, options)
+      ),
+      _react2.default.createElement(
+        'div',
+        { className: classes.hint },
+        _react2.default.createElement(_EmojiObjects2.default, null),
+        _react2.default.createElement(
+          _Typography2.default,
+          { variant: 'body2' },
+          hint
+        )
+      )
+    )
+  );
+};
+
+SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: _propTypes2.default.object,
+  hint: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
+  isNarrow: _propTypes2.default.bool,
+  isOpen: _propTypes2.default.bool,
+  onSelect: _propTypes2.default.func,
+  options: _propTypes2.default.array,
+  selected: _propTypes2.default.string,
+  maxHeight: _propTypes2.default.number
+} : {};
+
+exports.default = SelectionModeMenu;
+module.exports = exports['default'];

package/lib/ExpansionPanel/ExpansionPanel.js

@@ -59,7 +59,7 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
-  var _cx, _cx2;
+  var _cx, _cx2, _cx3, _cx4, _cx5;
 
   var id = _ref.id,
       topElementComponent = _ref.topElementComponent,
@@ -103,10 +103,10 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       _AccordionSummary2.default,
       {
         'data-testid': testId + '_panel',
-        className: classes.container,
+        className: (0, _classnames2.default)(classes.container, (_cx2 = {}, _cx2[classes.moreFiltersContainer] = moreFilters, _cx2)),
         classes: {
-          content: (0, _classnames2.default)(classes.content, classes.ellipsis),
-          expandIcon: classes.iconSummaryPanel
+          content: (0, _classnames2.default)(classes.content, classes.ellipsis, (_cx3 = {}, _cx3[classes.moreFiltersContent] = moreFilters, _cx3)),
+          expandIcon: (0, _classnames2.default)(classes.iconSummaryPanel, (_cx4 = {}, _cx4[classes.moreFiltersExpandIcon] = moreFilters, _cx4))
         },
         expandIcon: _react2.default.createElement(_ExpandMore2.default, null),
         'aria-controls': id,
@@ -155,7 +155,7 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
     _react2.default.createElement(
       _AccordionDetails2.default,
       {
-        className: (0, _classnames2.default)(classes.details, (_cx2 = {}, _cx2[classes.overflow] = overflow, _cx2[classes.height] = maxHeight, _cx2))
+        className: (0, _classnames2.default)(classes.details, (_cx5 = {}, _cx5[classes.overflow] = overflow, _cx5[classes.height] = maxHeight, _cx5))
       },
       children
     )

package/lib/ExpansionPanel/styles.js

@@ -23,6 +23,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       alignItems: 'flex-start',
       padding: theme.spacing(0)
     },
+    moreFiltersContainer: {
+      alignItems: 'flex-end'
+    },
     ellipsis: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -34,6 +37,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       alignContent: 'space-between',
       margin: theme.spacing(0.5, 0) + ' !important'
     },
+    moreFiltersContent: {
+      margin: theme.spacing(0, 0) + ' !important'
+    },
     details: {
       display: 'flex',
       padding: theme.spacing(0),
@@ -68,6 +74,9 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       padding: theme.spacing(0.5, 0.5),
       margin: theme.spacing(0, 1, 0, 0)
     },
+    moreFiltersExpandIcon: {
+      padding: theme.spacing(0, 0.5)
+    },
     fullWidth: {
       width: '100%'
     },
@@ -83,8 +92,8 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     title: {
       padding: 0,
       fontFamily: 'Roboto Slab, serif',
-      fontSize: '17px',
-      color: 'Body'
+      fontSize: 17,
+      color: theme.palette.grey['A700']
     }
   };
 });