diff --git a/portal-ui/src/StyleHandler.tsx b/portal-ui/src/StyleHandler.tsx index bfe5cfcab9..cac46e871a 100644 --- a/portal-ui/src/StyleHandler.tsx +++ b/portal-ui/src/StyleHandler.tsx @@ -20,7 +20,6 @@ import { Theme, ThemeProvider, } from "@mui/material/styles"; -import withStyles from "@mui/styles/withStyles"; import theme from "./theme/main"; import "react-virtualized/styles.css"; import "react-grid-layout/css/styles.css"; @@ -46,48 +45,19 @@ const StyleHandler = ({ children }: IStyleHandler) => { (state: AppState) => state.system.overrideStyles ); - let thm = theme; - let globalBody: any = {}; - let rowColor: any = { color: "#393939" }; - let detailsListPanel: any = { backgroundColor: "#fff" }; + let thm = undefined; if (colorVariants) { thm = generateOverrideTheme(colorVariants); - - globalBody = { - backgroundColor: `${colorVariants.backgroundColor}!important`, - }; - rowColor = { color: `${colorVariants.fontColor}!important` }; - detailsListPanel = { - backgroundColor: colorVariants.backgroundColor, - color: colorVariants.fontColor, - }; } - // Kept for Compatibility purposes. Once mds migration is complete then this will be removed - const GlobalCss = withStyles({ - // @global is handled by jss-plugin-global. - "@global": { - body: { - ...globalBody, - }, - ".rowLine": { - ...rowColor, - }, - ".detailsListPanel": { - ...detailsListPanel, - }, - }, - })(() => null); - // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes. return ( - - - {children} + + {children} diff --git a/portal-ui/src/common/types.ts b/portal-ui/src/common/types.ts index b4ee6667ce..57133b661c 100644 --- a/portal-ui/src/common/types.ts +++ b/portal-ui/src/common/types.ts @@ -48,16 +48,58 @@ export interface IBytesCalc { } export interface IEmbeddedCustomButton { - backgroundColor?: string; - textColor?: string; - hoverColor?: string; - hoverText?: string; - activeColor?: string; - activeText?: string; + backgroundColor: string; + textColor: string; + hoverColor: string; + hoverText: string; + activeColor: string; + activeText: string; + disabledColor: string; + disabledText: string; +} + +export interface IEmbeddedCustomTable { + border: string; + disabledBorder: string; + disabledBG: string; + selected: string; + deletedDisabled: string; + hoverColor: string; +} + +export interface IEmbeddedInputBox { + border: string; + hoverBorder: string; + textColor: string; + backgroundColor: string; +} + +export interface IEmbeddedSwitch { + switchBackground: string; + bulletBorderColor: string; + bulletBGColor: string; + disabledBackground: string; + disabledBulletBorderColor: string; + disabledBulletBGColor: string; } export interface IEmbeddedCustomStyles { backgroundColor: string; fontColor: string; + secondaryFontColor: string; + borderColor: string; + loaderColor: string; + boxBackground: string; + okColor: string; + errorColor: string; + warnColor: string; + linkColor: string; + disabledLinkColor: string; + hoverLinkColor: string; + tableColors: IEmbeddedCustomTable; buttonStyles: IEmbeddedCustomButton; + secondaryButtonStyles: IEmbeddedCustomButton; + regularButtonStyles: IEmbeddedCustomButton; + inputBox: IEmbeddedInputBox; + switch: IEmbeddedSwitch; } diff --git a/portal-ui/src/index.css b/portal-ui/src/index.css index d230bc2dec..887b6c9ffb 100644 --- a/portal-ui/src/index.css +++ b/portal-ui/src/index.css @@ -12,12 +12,15 @@ code { /* Chrome, Safari, Edge, Opera */ input.removeArrows::-webkit-outer-spin-button, -input.removeArrows::-webkit-inner-spin-button { +input.removeArrows::-webkit-inner-spin-button, +.removeArrows input::-webkit-outer-spin-button, +.removeArrows input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ -input.removeArrows[type="number"] { +input.removeArrows[type="number"], +.removeArrows input[type="number"] { -moz-appearance: textfield; } diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ActionsListSection.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ActionsListSection.tsx deleted file mode 100644 index 694608694a..0000000000 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ActionsListSection.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// This file is part of MinIO Console Server -// Copyright (c) 2022 MinIO, Inc. -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU Affero General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU Affero General Public License for more details. -// -// You should have received a copy of the GNU Affero General Public License -// along with this program. If not, see . - -import React, { Fragment } from "react"; -import ObjectActionButton from "./ObjectActionButton"; -import { withStyles } from "@mui/styles"; -import createStyles from "@mui/styles/createStyles"; -import { detailsPanel } from "../../../../Common/FormComponents/common/styleLibrary"; -import TooltipWrapper from "../../../../Common/TooltipWrapper/TooltipWrapper"; - -const styles = () => - createStyles({ - ...detailsPanel, - }); - -export interface MultiSelectionItem { - action: () => void; - label: string; - disabled: boolean; - icon: React.ReactNode; - tooltip: string; -} - -interface IActionsListSectionProps { - items: MultiSelectionItem[]; - title: string | React.ReactNode; - classes: any; -} - -const ActionsListSection = ({ - items, - classes, - title, -}: IActionsListSectionProps) => { - return ( - -
{title}
- - - ); -}; - -export default withStyles(styles)(ActionsListSection); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx index e1d9df5fc7..cf7c1e9094 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/CreatePathModal.tsx @@ -16,10 +16,8 @@ import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { Button, CreateNewPathIcon } from "mds"; +import { Button, CreateNewPathIcon, InputBox, Grid } from "mds"; import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper"; -import { Grid } from "@mui/material"; -import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import { @@ -155,7 +153,7 @@ const CreatePathModal = ({ - . import React, { Fragment, useState } from "react"; -import { DialogContentText } from "@mui/material"; - import { ErrorResponseHandler } from "../../../../../../common/types"; import useApi from "../../../../Common/Hooks/useApi"; import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog"; -import { ConfirmDeleteIcon } from "mds"; -import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; - +import { ConfirmDeleteIcon, Switch } from "mds"; import { setErrorSnackMessage } from "../../../../../../systemSlice"; import { AppState, useAppDispatch } from "../../../../../../store"; import { hasPermission } from "../../../../../../common/SecureComponent"; @@ -113,14 +109,14 @@ const DeleteObject = ({ onConfirm={onConfirmDelete} onClose={onClose} confirmationContent={ - + Are you sure you want to delete the selected {selectedObjects.length}{" "} objects?{" "} {isVersionedDelete && (

- - )} - + } /> ); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteNonCurrent.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteNonCurrent.tsx index 4a8ff331f9..19c8803c7d 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteNonCurrent.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteNonCurrent.tsx @@ -16,17 +16,13 @@ import React, { Fragment, useEffect, useState } from "react"; -import { DialogContentText } from "@mui/material"; -import Grid from "@mui/material/Grid"; import { ErrorResponseHandler } from "../../../../../../common/types"; import { decodeURLString } from "../../../../../../common/utils"; -import { ConfirmDeleteIcon } from "mds"; +import { ConfirmDeleteIcon, Switch, Grid, InputBox } from "mds"; import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog"; import api from "../../../../../../common/api"; -import InputBoxWrapper from "../../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper"; import { setErrorSnackMessage } from "../../../../../../systemSlice"; import { AppState, useAppDispatch } from "../../../../../../store"; -import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import { hasPermission } from "../../../../../../common/SecureComponent"; import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions"; import { useSelector } from "react-redux"; @@ -105,7 +101,7 @@ const DeleteNonCurrentVersions = ({ disabled: typeConfirm !== "YES, PROCEED" || deleteLoading, }} confirmationContent={ - + Are you sure you want to delete all the non-current versions for:{" "} {decodeURLString(selectedObject)}?
{canBypass && ( @@ -115,7 +111,7 @@ const DeleteNonCurrentVersions = ({ marginTop: 10, }} > - To continue please type YES, PROCEED in the box. +
+
- ) => { @@ -143,7 +141,7 @@ const DeleteNonCurrentVersions = ({ value={typeConfirm} /> - + } /> ); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx index e4f2eb73bc..c680851054 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx @@ -15,15 +15,11 @@ // along with this program. If not, see . import React, { Fragment, useState } from "react"; -import { DialogContentText } from "@mui/material"; - import { ErrorResponseHandler } from "../../../../../../common/types"; import { decodeURLString } from "../../../../../../common/utils"; import ConfirmDialog from "../../../../Common/ModalWrapper/ConfirmDialog"; import useApi from "../../../../Common/Hooks/useApi"; -import { ConfirmDeleteIcon } from "mds"; -import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; - +import { ConfirmDeleteIcon, Switch } from "mds"; import { setErrorSnackMessage } from "../../../../../../systemSlice"; import { AppState, useAppDispatch } from "../../../../../../store"; import { hasPermission } from "../../../../../../common/SecureComponent"; @@ -102,11 +98,7 @@ const DeleteObject = ({ onConfirm={onConfirmDelete} onClose={onClose} confirmationContent={ - + Are you sure you want to delete:
{decodeURLString(selectedObject)}{" "} {selectedVersion !== "" ? ( @@ -125,7 +117,7 @@ const DeleteObject = ({ {isVersionedMode(versioningInfo?.status) && selectedVersion === "" && ( - - )} - + } /> ); diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx index 3f84a96752..1f87683945 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DetailsListPanel.tsx @@ -17,8 +17,7 @@ import React from "react"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; -import { Grid, IconButton } from "@mui/material"; -import { ClosePanelIcon } from "mds"; +import { Button, ClosePanelIcon, Grid } from "mds"; import makeStyles from "@mui/styles/makeStyles"; interface IDetailsListPanel { @@ -58,14 +57,6 @@ const useStyles = makeStyles((theme: Theme) => }, }, }, - closePanel: { - position: "absolute", - right: 0, - top: 8, - "& .min-icon": { - width: 14, - }, - }, }) ); @@ -80,13 +71,24 @@ const DetailsListPanel = ({ return ( - - - +