Skip to content

Commit 07772f7

Browse files
dvaldiviadvaldivia
committed
Update buttons to BoxIconButton
Signed-off-by: Daniel Valdivia <[email protected]>
1 parent dfd0d08 commit 07772f7

File tree

14 files changed

+132
-73
lines changed

14 files changed

+132
-73
lines changed

‎portal-ui/src/icons/DeleteIcon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React from "react";
18-
import { SvgIcon } from "@mui/material";
18+
import { SvgIcon, SvgIconProps } from "@mui/material";
1919
import { IIcon } from "./props";
2020

21-
const DeleteIcon = ({ width = 24 }: IIcon) => {
21+
const DeleteIcon = (props: SvgIconProps) => {
2222
return (
23-
<SvgIcon style={{ width: width, height: width }}>
23+
<SvgIcon {...props}>
2424
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.836 12.646">
2525
<path
2626
data-name="Trazado 359"

‎portal-ui/src/icons/RefreshIcon.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,13 @@
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

1717
import React from "react";
18-
import { SvgIcon } from "@mui/material";
18+
import { SvgIcon, SvgIconProps } from "@mui/material";
1919
import { IIcon } from "./props";
20-
const RefreshIcon = ({ width = 24 }: IIcon) => {
20+
const RefreshIcon = (props: SvgIconProps) => {
2121
return (
22-
<SvgIcon style={{ width: width, height: width }}>
22+
<SvgIcon {...props}>
2323
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.157 21.107">
24-
<path
25-
data-name="Trazado 373"
26-
d="M0 12.028a9.086 9.086 0 018.968-9.073l-1.071-1.07A1.1 1.1 0 019.449.333l3.11 3.11a1.1 1.1 0 010 1.565l-3.11 3.11a1.1 1.1 0 01-1.552-1.552l1.161-1.161a6.632 6.632 0 00-6.6 6.624 6.633 6.633 0 006.625 6.625 6.633 6.633 0 006.625-6.625 1.227 1.227 0 011.227-1.227 1.227 1.227 0 011.227 1.227 9.089 9.089 0 01-9.079 9.079A9.089 9.089 0 010 12.028z"
27-
/>
24+
<path d="M0 12.028a9.086 9.086 0 018.968-9.073l-1.071-1.07A1.1 1.1 0 019.449.333l3.11 3.11a1.1 1.1 0 010 1.565l-3.11 3.11a1.1 1.1 0 01-1.552-1.552l1.161-1.161a6.632 6.632 0 00-6.6 6.624 6.633 6.633 0 006.625 6.625 6.633 6.633 0 006.625-6.625 1.227 1.227 0 011.227-1.227 1.227 1.227 0 011.227 1.227 9.089 9.089 0 01-9.079 9.079A9.089 9.089 0 010 12.028z" />
2825
</svg>
2926
</SvgIcon>
3027
);

‎portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import { BucketsIcon, DeleteIcon, FolderIcon } from "../../../../icons";
5353
import DeleteBucket from "../ListBuckets/DeleteBucket";
5454
import AccessRulePanel from "./AccessRulePanel";
5555
import RefreshIcon from "../../../../icons/RefreshIcon";
56+
import BoxIconButton from "../../Common/BoxIconButton";
5657

5758
const styles = (theme: Theme) =>
5859
createStyles({
@@ -373,30 +374,28 @@ const BucketDetails = ({
373374
actions={
374375
<Fragment>
375376
<Tooltip title={"Delete"}>
376-
<IconButton
377+
<BoxIconButton
377378
color="primary"
378379
aria-label="Delete"
379-
component="span"
380380
onClick={() => {
381381
setDeleteOpen(true);
382382
}}
383383
size="large"
384384
>
385385
<DeleteIcon />
386-
</IconButton>
386+
</BoxIconButton>
387387
</Tooltip>
388388
<Tooltip title={"Refresh"}>
389-
<IconButton
389+
<BoxIconButton
390390
color="primary"
391391
aria-label="Refresh List"
392-
component="span"
393392
onClick={() => {
394393
setBucketDetailsLoad(true);
395394
}}
396395
size="large"
397396
>
398397
<RefreshIcon />
399-
</IconButton>
398+
</BoxIconButton>
400399
</Tooltip>
401400
</Fragment>
402401
}

‎portal-ui/src/screens/Console/Common/BoxIconButton.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
// This file is part of MinIO Console Server
2+
// Copyright (c) 2021 MinIO, Inc.
3+
//
4+
// This program is free software: you can redistribute it and/or modify
5+
// it under the terms of the GNU Affero General Public License as published by
6+
// the Free Software Foundation, either version 3 of the License, or
7+
// (at your option) any later version.
8+
//
9+
// This program is distributed in the hope that it will be useful,
10+
// but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
// GNU Affero General Public License for more details.
13+
//
14+
// You should have received a copy of the GNU Affero General Public License
15+
// along with this program. If not, see <http://www.gnu.org/licenses/>.
16+
17+
import React from "react";
18+
import { Theme } from "@mui/material/styles";
19+
import createStyles from "@mui/styles/createStyles";
20+
import withStyles from "@mui/styles/withStyles";
21+
import { IconButton, IconButtonProps } from "@mui/material";
22+
23+
const styles = (theme: Theme) =>
24+
createStyles({
25+
root: {
26+
padding: 8,
27+
marginLeft: 14,
28+
borderWidth: 1,
29+
borderColor: theme.palette.primary.main,
30+
borderStyle: "solid",
31+
borderRadius: 3,
32+
"& .MuiSvgIcon-root": {
33+
fontSize: 20,
34+
},
35+
"& .MuiTouchRipple-root span": {
36+
backgroundColor: theme.palette.primary.main,
37+
borderRadius: 3,
38+
opacity: 0.3,
39+
},
40+
},
41+
});
42+
43+
interface IBoxIconButton extends IconButtonProps {
44+
classes: any;
45+
children: any;
46+
}
47+
48+
const BoxIconButton = ({ classes, children, ...rest }: IBoxIconButton) => {
49+
return (
50+
<IconButton {...rest} className={classes.root}>
51+
{children}
52+
</IconButton>
53+
);
54+
};
55+
56+
export default withStyles(styles)(BoxIconButton);

‎portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const styles = (theme: Theme) =>
8686
maxHeight: 15,
8787
},
8888
"&.withLabel": {
89-
top: 27,
89+
top: 5,
9090
},
9191
},
9292
});

‎portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { useEffect, useState, Fragment } from "react";
17+
import React, { Fragment, useEffect, useState } from "react";
1818
import get from "lodash/get";
1919
import { connect } from "react-redux";
2020
import { Theme } from "@mui/material/styles";
2121
import createStyles from "@mui/styles/createStyles";
2222
import withStyles from "@mui/styles/withStyles";
23-
import { IconButton, TextField } from "@mui/material";
23+
import { TextField } from "@mui/material";
2424
import Grid from "@mui/material/Grid";
2525
import Button from "@mui/material/Button";
2626
import InputAdornment from "@mui/material/InputAdornment";
@@ -43,6 +43,7 @@ import RefreshIcon from "../../../../icons/RefreshIcon";
4343
import SearchIcon from "../../../../icons/SearchIcon";
4444
import PageHeader from "../../Common/PageHeader/PageHeader";
4545
import HelpBox from "../../../../common/HelpBox";
46+
import BoxIconButton from "../../Common/BoxIconButton";
4647

4748
interface IListTiersConfig {
4849
classes: any;
@@ -212,17 +213,16 @@ const ListTiersConfiguration = ({
212213
}}
213214
variant="standard"
214215
/>
215-
<IconButton
216+
<BoxIconButton
216217
color="primary"
217218
aria-label="Refresh List"
218-
component="span"
219219
onClick={() => {
220220
setIsLoading(true);
221221
}}
222222
size="large"
223223
>
224224
<RefreshIcon />
225-
</IconButton>
225+
</BoxIconButton>
226226
<Button
227227
variant="contained"
228228
color="primary"

‎portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,12 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { Fragment, useState, useEffect } from "react";
17+
import React, { Fragment, useEffect, useState } from "react";
1818
import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import {
23-
Button,
24-
Grid,
25-
InputAdornment,
26-
TextField,
27-
IconButton,
28-
} from "@mui/material";
22+
import { Button, Grid, InputAdornment, TextField } from "@mui/material";
2923
import get from "lodash/get";
3024
import GroupIcon from "@mui/icons-material/Group";
3125
import { AddIcon } from "../../../icons";
@@ -49,6 +43,7 @@ import FormatDrives from "./FormatDrives";
4943
import FormatErrorsResult from "./FormatErrorsResult";
5044
import RefreshIcon from "../../../icons/RefreshIcon";
5145
import SearchIcon from "../../../icons/SearchIcon";
46+
import BoxIconButton from "../Common/BoxIconButton";
5247

5348
interface IDirectCSIMain {
5449
classes: any;
@@ -272,18 +267,17 @@ const DirectCSIMain = ({
272267
disabled={notAvailable}
273268
variant="standard"
274269
/>
275-
<IconButton
270+
<BoxIconButton
276271
color="primary"
277272
aria-label="Refresh Tenant List"
278-
component="span"
279273
onClick={() => {
280274
setLoading(true);
281275
}}
282276
disabled={notAvailable}
283277
size="large"
284278
>
285279
<RefreshIcon />
286-
</IconButton>
280+
</BoxIconButton>
287281
<Button
288282
variant="contained"
289283
color="primary"

‎portal-ui/src/screens/Console/License/License.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import PageHeader from "../Common/PageHeader/PageHeader";
3636
import ActivationModal from "./ActivationModal";
3737
import LicenseModal from "./LicenseModal";
3838
import api from "../../../common/api";
39-
import { TenantsIcon } from "../../../icons";
39+
import { LicenseIcon } from "../../../icons";
4040

4141
const mapState = (state: AppState) => ({
4242
operatorMode: state.system.operatorMode,
@@ -416,7 +416,7 @@ const License = ({ classes, operatorMode }: ILicenseProps) => {
416416
<div className={clsx(classes.container, classes.mainContainer)}>
417417
<Grid container>
418418
<Grid xs={12} className={classes.icon}>
419-
<TenantsIcon />
419+
<LicenseIcon />
420420
GNU Affero General Public License
421421
</Grid>
422422
<Grid item xs={12}>

‎portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React, { useEffect, useState, Fragment } from "react";
17+
import React, { Fragment, useEffect, useState } from "react";
1818
import { connect } from "react-redux";
1919
import { Theme } from "@mui/material/styles";
2020
import createStyles from "@mui/styles/createStyles";
2121
import withStyles from "@mui/styles/withStyles";
22-
import { IconButton, TextField } from "@mui/material";
22+
import { TextField } from "@mui/material";
2323
import { red } from "@mui/material/colors";
2424
import Grid from "@mui/material/Grid";
2525
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
@@ -46,6 +46,7 @@ import RefreshIcon from "../../../icons/RefreshIcon";
4646
import SearchIcon from "../../../icons/SearchIcon";
4747
import history from "../../../history";
4848
import HelpBox from "../../../common/HelpBox";
49+
import BoxIconButton from "../Common/BoxIconButton";
4950

5051
interface IListNotificationEndpoints {
5152
classes: any;
@@ -161,17 +162,16 @@ const ListNotificationEndpoints = ({
161162
}}
162163
variant="standard"
163164
/>
164-
<IconButton
165+
<BoxIconButton
165166
color="primary"
166167
aria-label="Refresh List"
167-
component="span"
168168
onClick={() => {
169169
setIsLoading(true);
170170
}}
171171
size="large"
172172
>
173173
<RefreshIcon />
174-
</IconButton>
174+
</BoxIconButton>
175175
<Button
176176
variant="contained"
177177
color="primary"

‎portal-ui/src/screens/Console/Policies/PolicyDetails.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
} from "../Common/FormComponents/common/styleLibrary";
2828
import Paper from "@mui/material/Paper";
2929
import Grid from "@mui/material/Grid";
30-
import { Button, IconButton, LinearProgress, Tooltip } from "@mui/material";
30+
import { Button, LinearProgress, Tooltip } from "@mui/material";
3131
import TableWrapper from "../Common/TableWrapper/TableWrapper";
3232
import api from "../../../common/api";
3333
import PageHeader from "../Common/PageHeader/PageHeader";
@@ -47,6 +47,7 @@ import IAMPoliciesIcon from "../../../icons/IAMPoliciesIcon";
4747
import RefreshIcon from "../../../icons/RefreshIcon";
4848
import SearchIcon from "../../../icons/SearchIcon";
4949
import TrashIcon from "../../../icons/TrashIcon";
50+
import BoxIconButton from "../Common/BoxIconButton";
5051

5152
interface IPolicyDetailsProps {
5253
classes: any;
@@ -364,21 +365,19 @@ const PolicyDetails = ({
364365
actions={
365366
<Fragment>
366367
<Tooltip title="Delete Policy">
367-
<IconButton
368+
<BoxIconButton
368369
color="primary"
369370
aria-label="Delete Policy"
370-
component="span"
371371
onClick={deletePolicy}
372372
>
373373
<TrashIcon />
374-
</IconButton>
374+
</BoxIconButton>
375375
</Tooltip>
376376

377377
<Tooltip title={"Refresh"}>
378-
<IconButton
378+
<BoxIconButton
379379
color="primary"
380380
aria-label="Refresh List"
381-
component="span"
382381
onClick={() => {
383382
setLoadingUsers(true);
384383
setLoadingGroups(true);
@@ -387,7 +386,7 @@ const PolicyDetails = ({
387386
size="large"
388387
>
389388
<RefreshIcon />
390-
</IconButton>
389+
</BoxIconButton>
391390
</Tooltip>
392391
</Fragment>
393392
}

0 commit comments

Comments
 (0)