M #~: Minor fixes on styles (#2121)

src/fireedge/src/client/components/FormStepper/Stepper.js

@@ -16,7 +16,7 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import PropTypes from 'prop-types'
 
-import { alpha, Box, Button, Typography } from '@mui/material'
+import { Box, Button, Typography } from '@mui/material'
 import Stepper from '@mui/material/Stepper'
 import Step from '@mui/material/Step'
 import StepLabel from '@mui/material/StepLabel'
@@ -35,7 +35,6 @@ const StepperStyled = styled(Stepper)(({ theme }) => ({
   position: 'sticky',
   top: -15,
   minHeight: 100,
-  background: alpha(theme.palette.background.paper, 0.95),
   zIndex: theme.zIndex.mobileStepper,
 }))
 

src/fireedge/src/client/components/List/ListInfiniteScroll.js

@@ -16,8 +16,8 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { useRef, useEffect, useCallback, createRef } from 'react'
 import PropTypes from 'prop-types'
+import { debounce, Box, LinearProgress } from '@mui/material'
 
-import { debounce, LinearProgress } from '@mui/material'
 import { useList, useNearScreen } from 'client/hooks'
 
 const ListInfiniteScroll = ({ list, renderResult }) => {
@@ -49,17 +49,17 @@ const ListInfiniteScroll = ({ list, renderResult }) => {
   }, [isNearScreen, finish, debounceHandleNextPage])
 
   return (
-    <div style={{ overflowY: 'auto', padding: 10 }}>
-      <div
+    <Box sx={{ overflowY: 'auto' }}>
+      <Box
         ref={gridRef}
-        style={{
+        sx={{
           display: 'grid',
           gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
           gridGap: 4,
         }}
       >
         {shortList?.map(renderResult)}
-      </div>
+      </Box>
       {!finish && (
         <LinearProgress
           ref={loaderRef}
@@ -67,7 +67,7 @@ const ListInfiniteScroll = ({ list, renderResult }) => {
           sx={{ width: '100%', marginTop: 10 }}
         />
       )}
-    </div>
+    </Box>
   )
 }
 

src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js

@@ -59,15 +59,15 @@ const SidebarCollapseItem = ({ title = '', routes = [], icon: Icon }) => {
 
   useEffect(() => {
     // force expanded
-    isFixMenu && !expanded && hasRouteSelected && setExpanded(true)
-  }, [isFixMenu, expanded, hasRouteSelected])
+    !expanded && hasRouteSelected && setExpanded(true)
+  }, [expanded, hasRouteSelected])
 
   return (
     <>
       <ListItemButton
         className={classes.parentSubItem}
         onClick={handleExpand}
-        selected={(!isFixMenu || !expanded) && hasRouteSelected}
+        selected={hasRouteSelected}
       >
         {Icon && (
           <ListItemIcon>

src/fireedge/src/client/components/Sidebar/styles.js

@@ -44,14 +44,6 @@ export default makeStyles((theme) => ({
           easing: theme.transitions.easing.sharp,
           duration: theme.transitions.duration.enteringScreen,
         }),
-        '& $parentSubItem': {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.secondary.main, 0.2),
-          },
-          '&.Mui-selected:hover': {
-            backgroundColor: alpha(theme.palette.secondary.main, 0.3),
-          },
-        },
         '& #logo__text': {
           visibility: 'visible',
         },
@@ -119,6 +111,13 @@ export default makeStyles((theme) => ({
     textTransform: 'capitalize',
     transition: 'color 0.3s',
   },
-  parentSubItem: {},
+  parentSubItem: {
+    '&.Mui-selected': {
+      backgroundColor: alpha(theme.palette.secondary.main, 0.2),
+    },
+    '&.Mui-selected:hover': {
+      backgroundColor: alpha(theme.palette.secondary.main, 0.3),
+    },
+  },
   subItemWrapper: {},
 }))

src/fireedge/src/client/components/Tables/Hosts/actions.js

@@ -15,7 +15,7 @@
  * ------------------------------------------------------------------------- */
 import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
-import { AddSquare, Trash } from 'iconoir-react'
+import { AddCircledOutline, Trash } from 'iconoir-react'
 
 import { useViews } from 'client/features/Auth'
 import { useAddHostToClusterMutation } from 'client/features/OneApi/cluster'
@@ -77,7 +77,7 @@ const Actions = () => {
             accessor: HOST_ACTIONS.CREATE_DIALOG,
             dataCy: `host_${HOST_ACTIONS.CREATE_DIALOG}`,
             tooltip: T.Create,
-            icon: AddSquare,
+            icon: AddCircledOutline,
             action: () => history.push(PATH.INFRASTRUCTURE.HOSTS.CREATE),
           },
           {

src/fireedge/src/client/components/Tables/MarketplaceApps/actions.js

@@ -13,10 +13,13 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-/* eslint-disable jsdoc/require-jsdoc */
 import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
-import { AddSquare, CloudDownload, DownloadCircledOutline } from 'iconoir-react'
+import {
+  AddCircledOutline,
+  CloudDownload,
+  DownloadCircledOutline,
+} from 'iconoir-react'
 
 import { useViews } from 'client/features/Auth'
 import { useGeneralApi } from 'client/features/General'
@@ -27,7 +30,11 @@ import {
 } from 'client/features/OneApi/marketplaceApp'
 
 import { ExportForm } from 'client/components/Forms/MarketplaceApp'
-import { createActions } from 'client/components/Tables/Enhanced/Utils'
+import {
+  createActions,
+  GlobalAction,
+} from 'client/components/Tables/Enhanced/Utils'
+
 import { PATH } from 'client/apps/sunstone/routesOne'
 import { T, RESOURCE_NAMES, MARKETPLACE_APP_ACTIONS } from 'client/constants'
 
@@ -49,6 +56,11 @@ const MessageToConfirmAction = (rows) => {
 
 MessageToConfirmAction.displayName = 'MessageToConfirmAction'
 
+/**
+ * Generates the actions to operate resources on Host table.
+ *
+ * @returns {GlobalAction} - Actions
+ */
 const Actions = () => {
   const history = useHistory()
   const { view, getResourceView } = useViews()
@@ -64,7 +76,7 @@ const Actions = () => {
           {
             accessor: MARKETPLACE_APP_ACTIONS.CREATE_DIALOG,
             tooltip: T.CreateMarketApp,
-            icon: AddSquare,
+            icon: AddCircledOutline,
             action: () => {
               history.push(PATH.STORAGE.MARKETPLACE_APPS.CREATE)
             },

src/fireedge/src/client/components/Tables/VmTemplates/actions.js

@@ -17,7 +17,7 @@ import { useMemo } from 'react'
 import { useHistory } from 'react-router-dom'
 import { Typography } from '@mui/material'
 import {
-  AddSquare,
+  AddCircledOutline,
   // Import,
   Trash,
   PlayOutline,
@@ -99,7 +99,7 @@ const Actions = () => {
           {
             accessor: VM_TEMPLATE_ACTIONS.CREATE_DIALOG,
             tooltip: T.Create,
-            icon: AddSquare,
+            icon: AddCircledOutline,
             action: () => history.push(PATH.TEMPLATE.VMS.CREATE),
           },
           {

src/fireedge/src/client/components/Tables/Vms/actions.js

@@ -18,7 +18,7 @@ import { useHistory } from 'react-router-dom'
 import { Typography } from '@mui/material'
 import { makeStyles } from '@mui/styles'
 import {
-  AddSquare,
+  AddCircledOutline,
   PlayOutline,
   SaveFloppyDisk,
   TransitionRight,
@@ -136,7 +136,7 @@ const Actions = () => {
             accessor: VM_ACTIONS.CREATE_DIALOG,
             dataCy: `vm_${VM_ACTIONS.CREATE_DIALOG}`,
             tooltip: T.Create,
-            icon: AddSquare,
+            icon: AddCircledOutline,
             options: [
               {
                 isConfirmDialog: true,