Feedbacks | Search results | hover and selected state

OpenConceptLab · Oct 14, 2024 · db723eb · db723eb
1 parent 92d9891
commit db723eb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/concepts/ConceptCard.jsx b/src/components/concepts/ConceptCard.jsx
@@ -18,7 +18,23 @@ const ConceptCard = ({ concept, onSelect, isSelected, onCardClick, bgColor, isSh
   const isSelectedToShow = isShown(id)
   const border = (isChecked || isSelectedToShow) ? `1px solid ${COLORS.primary.main}` : '0.3px solid rgba(0, 0, 0, 0.12)'
   return (
-    <Card variant='outlined' className={'col-xs-12' + (isSelectedToShow ? ' show-item' : '')} sx={{padding: '16px', border: border, borderRadius: '10px', display: 'flex', alignItems: 'center', margin: firstChild ? '0 0 4px 0' : '4px 0', cursor: 'pointer', backgroundColor: isSelectedToShow ? COLORS.primary.contrastText : bgColor}} onClick={event => onCardClick(event, id)}>
+    <Card
+      variant='outlined'
+      className={'col-xs-12' + (isSelectedToShow ? ' show-item' : '')}
+      sx={{
+        padding: '16px',
+        border: border, borderRadius: '10px',
+        display: 'flex',
+        alignItems: 'center',
+        margin: firstChild ? '0 0 4px 0' : '4px 0',
+        cursor: 'pointer',
+        backgroundColor: isSelectedToShow ? 'primary.90' : bgColor,
+        '&:hover': {
+          backgroundColor: isSelectedToShow ? 'primary.90' : 'primary.95'
+        }
+      }}
+      onClick={event => onCardClick(event, id)}
+    >
       <div className='col-xs-1 padding-0' style={{maxWidth: '24px'}}>
         <Checkbox
           color="primary"

diff --git a/src/components/search/TableResults.jsx b/src/components/search/TableResults.jsx
@@ -111,7 +111,7 @@ const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSel
               const isItemSelectedToShow = isItemShown(id)
               const labelId = `enhanced-table-checkbox-${index}`;
               const color = row.retired ? SECONDARY_COLORS.main : 'none'
-              let bgColor = isItemSelected ? 'primary.80' : (isItemSelectedToShow ? 'primary.90' : '')
+              let bgColor = isItemSelectedToShow ? 'primary.90' : ''
 
               return (
                 <TableRow
@@ -125,11 +125,12 @@ const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSel
                   className={isItemSelectedToShow ? 'show-item' : ''}
                   sx={{
                     cursor: 'pointer',
-                    '&.Mui-selected': {backgroundColor: bgColor},
-                    '&.Mui-selected:hover': {backgroundColor: bgColor},
                     backgroundColor: bgColor,
-                    '&.MuiTableRow-hover:hover': {
+                    '&.Mui-selected': {
                       backgroundColor: bgColor
+                    },
+                    '&.MuiTableRow-hover:hover': {
+                      backgroundColor: isItemSelectedToShow ? bgColor : 'primary.95'
                     }
                   }}
                 >