F OpenNebula/One#6826: Fix selected row (#3407)

Co-authored-by: Tino Vázquez <cvazquez@opennebula.io>

src/fireedge/src/modules/components/Cards/SelectCard/SelectCard.js

@@ -13,15 +13,15 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { memo, useMemo } from 'react'
-import PropTypes from 'prop-types'
 import clsx from 'clsx'
+import PropTypes from 'prop-types'
+import { memo, useMemo } from 'react'
 
 import {
   Card,
   CardActionArea,
-  CardHeader,
   CardActions,
+  CardHeader,
   CardMedia,
   Skeleton,
   useTheme,
@@ -65,6 +65,7 @@ const SelectCard = memo(
         }),
       [theme]
     )
+
     const { isNearScreen, fromRef } = useNearScreen({
       distance: '100px',
     })
@@ -77,9 +78,13 @@ const SelectCard = memo(
         {observerOff || isNearScreen ? (
           <Card
             {...cardProps}
-            className={clsx(classes.root, cardProps?.className, {
+            className={clsx(
+              classes.root({ isSelected }),
+              cardProps?.className,
+              {
                 [classes.actionArea]: !handleClick,
-            })}
+              }
+            )}
             data-cy={dataCy ? `${dataCy}-card` : undefined}
           >
             {/* CARD ACTION AREA */}

src/fireedge/src/modules/components/Tables/Enhanced/WrapperRow.js

@@ -13,14 +13,14 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { Checkbox, Grid, TableCell, TableRow, useTheme } from '@mui/material'
-import EnhancedTableStyles from '@modules/components/Tables/Enhanced/styles'
 import { SERVER_CONFIG } from '@ConstantsModule'
 import { useAuth } from '@FeaturesModule'
+import { css } from '@emotion/css'
+import EnhancedTableStyles from '@modules/components/Tables/Enhanced/styles'
+import { Checkbox, Grid, TableCell, TableRow, useTheme } from '@mui/material'
 import get from 'lodash.get'
 import PropTypes from 'prop-types'
 import { ReactElement, memo, useMemo } from 'react'
-import { css } from '@emotion/css'
 
 const listStyles = ({ palette }) => ({
   row: css({
@@ -180,7 +180,8 @@ const SwitchRowComponent = memo(
 
     return Component
   },
-  (prev, next) => prev.RowCardComponent === next.RowCardComponent
+  (prev, next) =>
+    prev.RowCardComponent === next.RowCardComponent && prev.props === next.props
 )
 
 SwitchRowComponent.propTypes = {

src/fireedge/src/modules/components/Tables/Enhanced/styles.js

@@ -89,7 +89,7 @@ export const EnhancedTableStyles = ({ palette, typography, breakpoints }) => ({
         backgroundColor: palette.action.hover,
       },
       '&.selected': {
-        border: `2px solid ${palette.secondary.main}`,
+        border: `.2rem solid ${palette.secondary.main}`,
       },
     },
   }),