diff --git a/portal-ui/src/icons/DeleteIcon.tsx b/portal-ui/src/icons/DeleteIcon.tsx index d0a4e9250..3b5bca927 100644 --- a/portal-ui/src/icons/DeleteIcon.tsx +++ b/portal-ui/src/icons/DeleteIcon.tsx @@ -15,12 +15,12 @@ // along with this program. If not, see . import React from "react"; -import { SvgIcon } from "@mui/material"; +import { SvgIcon, SvgIconProps } from "@mui/material"; import { IIcon } from "./props"; -const DeleteIcon = ({ width = 24 }: IIcon) => { +const DeleteIcon = (props: SvgIconProps) => { return ( - + . import React from "react"; -import { SvgIcon } from "@mui/material"; +import { SvgIcon, SvgIconProps } from "@mui/material"; import { IIcon } from "./props"; -const RefreshIcon = ({ width = 24 }: IIcon) => { +const RefreshIcon = (props: SvgIconProps) => { return ( - + - + ); diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx index 3615fe6f6..8ebd9310a 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx +++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx @@ -53,6 +53,7 @@ import { BucketsIcon, DeleteIcon, FolderIcon } from "../../../../icons"; import DeleteBucket from "../ListBuckets/DeleteBucket"; import AccessRulePanel from "./AccessRulePanel"; import RefreshIcon from "../../../../icons/RefreshIcon"; +import BoxIconButton from "../../Common/BoxIconButton"; const styles = (theme: Theme) => createStyles({ @@ -373,30 +374,28 @@ const BucketDetails = ({ actions={ - { setDeleteOpen(true); }} size="large" > - + - { setBucketDetailsLoad(true); }} size="large" > - + } diff --git a/portal-ui/src/screens/Console/Common/BoxIconButton.tsx b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx new file mode 100644 index 000000000..5f4ed13ec --- /dev/null +++ b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx @@ -0,0 +1,56 @@ +// This file is part of MinIO Console Server +// Copyright (c) 2021 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 from "react"; +import { Theme } from "@mui/material/styles"; +import createStyles from "@mui/styles/createStyles"; +import withStyles from "@mui/styles/withStyles"; +import { IconButton, IconButtonProps } from "@mui/material"; + +const styles = (theme: Theme) => + createStyles({ + root: { + padding: 8, + marginLeft: 14, + borderWidth: 1, + borderColor: theme.palette.primary.main, + borderStyle: "solid", + borderRadius: 3, + "& .MuiSvgIcon-root": { + fontSize: 20, + }, + "& .MuiTouchRipple-root span": { + backgroundColor: theme.palette.primary.main, + borderRadius: 3, + opacity: 0.3, + }, + }, + }); + +interface IBoxIconButton extends IconButtonProps { + classes: any; + children: any; +} + +const BoxIconButton = ({ classes, children, ...rest }: IBoxIconButton) => { + return ( + + {children} + + ); +}; + +export default withStyles(styles)(BoxIconButton); diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx index 41c5e9564..46c72c0ff 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx @@ -86,7 +86,7 @@ const styles = (theme: Theme) => maxHeight: 15, }, "&.withLabel": { - top: 27, + top: 5, }, }, }); diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx index 8e6f6d610..e9649b086 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState, Fragment } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import get from "lodash/get"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; @@ -44,6 +44,7 @@ import RefreshIcon from "../../../../icons/RefreshIcon"; import SearchIcon from "../../../../icons/SearchIcon"; import PageHeader from "../../Common/PageHeader/PageHeader"; import HelpBox from "../../../../common/HelpBox"; +import BoxIconButton from "../../Common/BoxIconButton"; interface IListTiersConfig { classes: any; @@ -210,17 +211,16 @@ const ListTiersConfiguration = ({ }} variant="standard" /> - { setIsLoading(true); }} size="large" > - + . -import React, { Fragment, useState, useEffect } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; -import { - Button, - Grid, - InputAdornment, - TextField, - IconButton, -} from "@mui/material"; +import { Button, Grid, InputAdornment, TextField } from "@mui/material"; import get from "lodash/get"; import GroupIcon from "@mui/icons-material/Group"; import { AddIcon } from "../../../icons"; @@ -49,6 +43,7 @@ import FormatDrives from "./FormatDrives"; import FormatErrorsResult from "./FormatErrorsResult"; import RefreshIcon from "../../../icons/RefreshIcon"; import SearchIcon from "../../../icons/SearchIcon"; +import BoxIconButton from "../Common/BoxIconButton"; interface IDirectCSIMain { classes: any; @@ -272,10 +267,9 @@ const DirectCSIMain = ({ disabled={notAvailable} variant="standard" /> - { setLoading(true); }} @@ -283,7 +277,7 @@ const DirectCSIMain = ({ size="large" > - +
- + GNU Affero General Public License diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx index a14237a7a..fc35fd2e2 100644 --- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx +++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useEffect, useState, Fragment } from "react"; +import React, { Fragment, useEffect, useState } from "react"; import { connect } from "react-redux"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; @@ -47,6 +47,7 @@ import RefreshIcon from "../../../icons/RefreshIcon"; import SearchIcon from "../../../icons/SearchIcon"; import history from "../../../history"; import HelpBox from "../../../common/HelpBox"; +import BoxIconButton from "../Common/BoxIconButton"; interface IListNotificationEndpoints { classes: any; @@ -159,17 +160,16 @@ const ListNotificationEndpoints = ({ }} variant="standard" /> - { setIsLoading(true); }} size="large" > - + - - + - - + }