From e97ca3a43db9103c7418e1e95b45754824c0a87f Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Thu, 2 Jun 2022 11:54:39 +0200 Subject: [PATCH] M #~: Minor fixes on styles (#2121) --- .../client/components/FormStepper/Stepper.js | 3 +-- .../components/List/ListInfiniteScroll.js | 12 +++++------ .../components/Sidebar/SidebarCollapseItem.js | 6 +++--- .../src/client/components/Sidebar/styles.js | 17 ++++++++-------- .../client/components/Tables/Hosts/actions.js | 4 ++-- .../Tables/MarketplaceApps/actions.js | 20 +++++++++++++++---- .../components/Tables/VmTemplates/actions.js | 4 ++-- .../client/components/Tables/Vms/actions.js | 4 ++-- 8 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/fireedge/src/client/components/FormStepper/Stepper.js b/src/fireedge/src/client/components/FormStepper/Stepper.js index 03304a35b7..f16c8db5b3 100644 --- a/src/fireedge/src/client/components/FormStepper/Stepper.js +++ b/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, })) diff --git a/src/fireedge/src/client/components/List/ListInfiniteScroll.js b/src/fireedge/src/client/components/List/ListInfiniteScroll.js index 0b1a0eabbd..301659e554 100644 --- a/src/fireedge/src/client/components/List/ListInfiniteScroll.js +++ b/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 ( -
-
+ {shortList?.map(renderResult)} -
+ {!finish && ( { sx={{ width: '100%', marginTop: 10 }} /> )} -
+ ) } diff --git a/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js b/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js index fffdba7a06..e5d9b19570 100644 --- a/src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js +++ b/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 ( <> {Icon && ( diff --git a/src/fireedge/src/client/components/Sidebar/styles.js b/src/fireedge/src/client/components/Sidebar/styles.js index 2c29745251..d15b610bf2 100644 --- a/src/fireedge/src/client/components/Sidebar/styles.js +++ b/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: {}, })) diff --git a/src/fireedge/src/client/components/Tables/Hosts/actions.js b/src/fireedge/src/client/components/Tables/Hosts/actions.js index 0cbbe1bd70..dcbe7b42bd 100644 --- a/src/fireedge/src/client/components/Tables/Hosts/actions.js +++ b/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), }, { diff --git a/src/fireedge/src/client/components/Tables/MarketplaceApps/actions.js b/src/fireedge/src/client/components/Tables/MarketplaceApps/actions.js index 304dfed235..726cbd2b87 100644 --- a/src/fireedge/src/client/components/Tables/MarketplaceApps/actions.js +++ b/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) }, diff --git a/src/fireedge/src/client/components/Tables/VmTemplates/actions.js b/src/fireedge/src/client/components/Tables/VmTemplates/actions.js index c576c59bea..112328c328 100644 --- a/src/fireedge/src/client/components/Tables/VmTemplates/actions.js +++ b/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), }, { diff --git a/src/fireedge/src/client/components/Tables/Vms/actions.js b/src/fireedge/src/client/components/Tables/Vms/actions.js index 53f13474b1..ece85dc1de 100644 --- a/src/fireedge/src/client/components/Tables/Vms/actions.js +++ b/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,