From 4b6a9ef47fb05413f6969d508d3e89d54c36f913 Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Wed, 11 Mar 2020 13:27:59 +0100
Subject: [PATCH] #67 modified filter select and "Hit navigator" styling

---
 js/components/common/Surfaces/Panel/index.js  |  4 +--
 .../preview/molecule/moleculeList.js          | 27 +++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/js/components/common/Surfaces/Panel/index.js b/js/components/common/Surfaces/Panel/index.js
index 4532f6eb8..3365842e9 100644
--- a/js/components/common/Surfaces/Panel/index.js
+++ b/js/components/common/Surfaces/Panel/index.js
@@ -98,14 +98,14 @@ export const Panel = memo(
                 className={classes.headerGrid}
               >
                 {title && (
-                  <Grid item xs={hasExpansion || headerActions ? 6 : 12} className={classes.headerTitle}>
+                  <Grid item xs={hasExpansion || headerActions ? 4 : 12} className={classes.headerTitle}>
                     <Typography variant="h6" color="inherit" noWrap>
                       {title}
                     </Typography>
                   </Grid>
                 )}
                 {(headerActions || hasExpansion) && (
-                  <Grid item container direction="row" justify="flex-end" xs={title ? 6 : 12}>
+                  <Grid item container direction="row" justify="flex-end" xs={title ? 8 : 12}>
                     {headerActions &&
                       headerActions.map((action, index) => (
                         <Grid item key={index}>
diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
index eaf217f55..2a3b41c40 100644
--- a/js/components/preview/molecule/moleculeList.js
+++ b/js/components/preview/molecule/moleculeList.js
@@ -92,8 +92,21 @@ const useStyles = makeStyles(theme => ({
     minWidth: 87,
     fontSize: '1.2rem'
   },
-  colorInherit: {
-    color: 'inherit'
+  select: {
+    color: 'inherit',
+    fill: 'inherit',
+    '&:hover:not(.Mui-disabled):before': {
+      borderColor: 'inherit'
+    },
+    '&:before': {
+      borderColor: 'inherit'
+    },
+    '&:not(.Mui-disabled)': {
+      fill: theme.palette.white
+    }
+  },
+  selectIcon: {
+    fill: 'inherit'
   },
   molHeader: {
     marginLeft: 19,
@@ -152,7 +165,6 @@ const MoleculeList = memo(
 
     const isActiveFilter = !!(filterSettings || {}).active;
 
-    const dispatch = useDispatch();
     const { getNglView } = useContext(NglContext);
     const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
@@ -181,9 +193,7 @@ const MoleculeList = memo(
         setOldUrl: url => setOldUrl(url),
         old_url: oldUrl.current,
         list_type,
-        setObjectList: moleculeList => {
-          setMoleculeList(moleculeList);
-        },
+        setObjectList: setMoleculeList,
         setCachedMolLists,
         mol_group_on,
         cached_mol_lists
@@ -257,12 +267,13 @@ const MoleculeList = memo(
           headerActions={[
             <FormControl className={classes.formControl} disabled={!(object_selection || []).length}>
               <Select
-                className={classes.colorInherit}
+                className={classes.select}
                 value={predefinedFilter}
                 onChange={changePredefinedFilter}
                 inputProps={{
                   name: 'predefined',
-                  id: 'predefined-label-placeholder'
+                  id: 'predefined-label-placeholder',
+                  classes: { icon: classes.selectIcon }
                 }}
                 displayEmpty
                 name="predefined"