Update Box Button Style and move Icons to the Right (#1199)

* Update Box Button Style and move Icons to the Right

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

* Add AButton component to replace <a> tags

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
This commit is contained in:
Daniel Valdivia
2021-11-08 16:09:59 -08:00
committed by GitHub
parent 5c40bda742
commit 685cfda752
26 changed files with 149 additions and 96 deletions

View File

@@ -45,6 +45,9 @@ const GlobalCss = withStyles({
".MuiButton-root": {
height: 38,
},
".MuiButtonBase-root": {
textTransform: "capitalize",
},
".MuiButton-contained": {
fontSize: "14px",
textTransform: "capitalize",

View File

@@ -257,7 +257,7 @@ const Account = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setAddScreenOpen(true);
setSelectedServiceAccount(null);

View File

@@ -246,7 +246,7 @@ const AccessRule = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
component="label"
onClick={() => {
setAddAccessRuleOpen(true);

View File

@@ -64,13 +64,11 @@ import {
S3_GET_BUCKET_POLICY,
S3_GET_LIFECYCLE_CONFIGURATION,
S3_GET_REPLICATION_CONFIGURATION,
S3_LISTEN_BUCKET_NOTIFICATIONS,
S3_PUT_BUCKET_NOTIFICATIONS,
S3_PUT_LIFECYCLE_CONFIGURATION,
S3_PUT_REPLICATION_CONFIGURATION,
} from "../../../../types";
import { displayComponent } from "../../../../utils/permissions";
import { ISessionResponse } from "../../types";
const styles = (theme: Theme) =>
createStyles({
@@ -383,6 +381,7 @@ const BucketDetails = ({
setBucketDetailsLoad(true);
}}
size="large"
variant={"contained"}
>
<RefreshIcon />
</BoxIconButton>

View File

@@ -163,7 +163,7 @@ const BucketEventsPanel = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
size="medium"
onClick={() => {
setAddEventScreenOpen(true);

View File

@@ -211,7 +211,7 @@ const BucketLifecyclePanel = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
size="medium"
onClick={() => {
setAddLifecycleOpen(true);

View File

@@ -181,7 +181,7 @@ const BucketReplicationPanel = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
size="medium"
onClick={() => {
setOpenReplicationOpen(true);

View File

@@ -29,7 +29,6 @@ import { addBucketOpen, addBucketReset } from "../actions";
import { setErrorSnackMessage } from "../../../../actions";
import {
containerForHeader,
linkStyles,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../../common/types";
@@ -46,6 +45,7 @@ import InputAdornment from "@mui/material/InputAdornment";
import SearchIcon from "../../../../icons/SearchIcon";
import BoxIconButton from "../../Common/BoxIconButton";
import RefreshIcon from "../../../../icons/RefreshIcon";
import AButton from "../../Common/AButton";
const styles = (theme: Theme) =>
createStyles({
@@ -131,7 +131,6 @@ const styles = (theme: Theme) =>
constrainedContainer: {
maxWidth: 1180,
},
...linkStyles(theme.palette.info.main),
});
interface IListBucketsProps {
@@ -438,14 +437,14 @@ const ListBuckets = ({
<br />
<br />
To get started,&nbsp;
<button
className={classes.link}
<AButton
onClick={() => {
addBucketOpen(true);
}}
>
Create a Bucket.
</button>
</AButton>
refresh
</Fragment>
}
/>

View File

@@ -45,17 +45,14 @@ import {
objectBrowserCommon,
searchField,
} from "../../../../Common/FormComponents/common/styleLibrary";
import { Badge, Button, IconButton, Tooltip, Typography } from "@mui/material";
import { Badge, Button, Tooltip, Typography } from "@mui/material";
import * as reactMoment from "react-moment";
import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
import {
resetRewind,
setFileModeEnabled,
} from "../../../../ObjectBrowser/actions";
import {
ObjectBrowserReducer,
Route,
} from "../../../../ObjectBrowser/reducers";
import { Route } from "../../../../ObjectBrowser/reducers";
import CreateFolderModal from "./CreateFolderModal";
import { download, extensionPreview, sortListObjects } from "../utils";
import {
@@ -99,15 +96,14 @@ import {
import ShareFile from "../ObjectDetails/ShareFile";
import { displayComponent } from "../../../../../../utils/permissions";
import {
S3_DELETE_BUCKET,
S3_DELETE_OBJECT,
S3_FORCE_DELETE_BUCKET,
S3_GET_OBJECT,
S3_LIST_BUCKET,
S3_PUT_OBJECT,
} from "../../../../../../types";
import { setBucketDetailsLoad, setBucketInfo } from "../../../actions";
import { AppState } from "../../../../../../store";
import BoxIconButton from "../../../../Common/BoxIconButton";
const commonIcon = {
backgroundRepeat: "no-repeat",
@@ -1088,10 +1084,9 @@ const ListObjects = ({
{displayPutObject && (
<Fragment>
<Tooltip title={"Choose or create a new path"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Add a new folder"
component="span"
onClick={() => {
setCreateFolderOpen(true);
}}
@@ -1099,14 +1094,13 @@ const ListObjects = ({
size="large"
>
<AddFolderIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<Tooltip title={"Upload file"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
if (fileUpload && fileUpload.current) {
fileUpload.current.click();
@@ -1116,7 +1110,7 @@ const ListObjects = ({
size="large"
>
<UploadIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
<input
type="file"
@@ -1137,10 +1131,9 @@ const ListObjects = ({
invisible={!rewindEnabled}
className={classes.badgeOverlap}
>
<IconButton
<BoxIconButton
color="primary"
aria-label="Rewind"
component="span"
onClick={() => {
setRewindSelect(true);
}}
@@ -1148,22 +1141,22 @@ const ListObjects = ({
size="large"
>
<HistoryIcon />
</IconButton>
</BoxIconButton>
</Badge>
</Tooltip>
<Tooltip title={"Refresh list"}>
<IconButton
<BoxIconButton
color="primary"
aria-label="Refresh List"
component="span"
onClick={() => {
setLoading(true);
}}
disabled={rewindEnabled}
size="large"
variant={"contained"}
>
<RefreshIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
</Fragment>
}
@@ -1195,7 +1188,7 @@ const ListObjects = ({
<Button
variant="contained"
color="primary"
startIcon={<DeleteIcon />}
endIcon={<DeleteIcon />}
onClick={() => {
setDeleteMultipleOpen(true);
}}

View File

@@ -77,7 +77,6 @@ import {
S3_GET_OBJECT_LEGAL_HOLD,
S3_GET_OBJECT_RETENTION,
S3_GET_OBJECT_TAGGING,
S3_GET_REPLICATION_CONFIGURATION,
S3_PUT_OBJECT_LEGAL_HOLD,
S3_PUT_OBJECT_RETENTION,
S3_PUT_OBJECT_TAGGING,
@@ -94,6 +93,7 @@ import SearchIcon from "../../../../../../icons/SearchIcon";
import ObjectBrowserIcon from "../../../../../../icons/ObjectBrowserIcon";
import PreviewFileContent from "../Preview/PreviewFileContent";
import RestoreFileVersion from "./RestoreFileVersion";
import BoxIconButton from "../../../../Common/BoxIconButton";
const styles = (theme: Theme) =>
createStyles({
@@ -643,7 +643,7 @@ const ObjectDetails = ({
actions={
<Fragment>
<Tooltip title="Share">
<IconButton
<BoxIconButton
color="primary"
aria-label="share"
onClick={() => {
@@ -653,7 +653,7 @@ const ObjectDetails = ({
size="large"
>
<ShareIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
{downloadingFiles.includes(
@@ -668,7 +668,7 @@ const ObjectDetails = ({
</div>
) : (
<Tooltip title="Download">
<IconButton
<BoxIconButton
color="primary"
aria-label="download"
onClick={() => {
@@ -678,13 +678,13 @@ const ObjectDetails = ({
size="large"
>
<DownloadIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
)}
{displayDeleteObject && (
<Tooltip title="Delete Object">
<IconButton
<BoxIconButton
color="primary"
aria-label="delete"
onClick={() => {
@@ -694,7 +694,7 @@ const ObjectDetails = ({
size="large"
>
<DeleteIcon />
</IconButton>
</BoxIconButton>
</Tooltip>
)}
</Fragment>

View File

@@ -14,7 +14,7 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
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";
@@ -217,7 +217,7 @@ const ShareFile = ({
<Button
variant="contained"
color="primary"
startIcon={<CopyIcon />}
endIcon={<CopyIcon />}
onClick={() => {
setModalSnackMessage("Share URL Copied to clipboard");
}}

View File

@@ -0,0 +1,50 @@
// 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 <http://www.gnu.org/licenses/>.
import React from "react";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { IconButtonProps } from "@mui/material";
const styles = (theme: Theme) =>
createStyles({
root: {
padding: 0,
margin: 0,
border: 0,
backgroundColor: "transparent",
textDecoration: "underline",
cursor: "pointer",
fontSize: "inherit",
color: theme.palette.info.main,
},
});
interface IAButton extends IconButtonProps {
classes: any;
children: any;
}
const AButton = ({ classes, children, ...rest }: IAButton) => {
return (
<button {...rest} className={classes.root}>
{children}
</button>
);
};
export default withStyles(styles)(AButton);

View File

@@ -19,6 +19,7 @@ import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import { IconButton, IconButtonProps } from "@mui/material";
import clsx from "clsx";
const styles = (theme: Theme) =>
createStyles({
@@ -26,7 +27,8 @@ const styles = (theme: Theme) =>
padding: 8,
marginLeft: 8,
borderWidth: 1,
borderColor: theme.palette.primary.main,
borderColor: "#696969",
color: "#696969",
borderStyle: "solid",
borderRadius: 3,
"& .MuiSvgIcon-root": {
@@ -37,17 +39,46 @@ const styles = (theme: Theme) =>
borderRadius: 3,
opacity: 0.3,
},
"&:disabled": {
color: "#EBEBEB",
borderColor: "#EBEBEB",
},
},
contained: {
borderColor: theme.palette.primary.main,
background: theme.palette.primary.main,
color: "white",
"& .MuiTouchRipple-root span": {
backgroundColor: theme.palette.primary.dark,
borderRadius: 3,
opacity: 0.3,
},
"&:hover": {
backgroundColor: theme.palette.primary.light,
color: "#FFF",
},
},
});
interface IBoxIconButton extends IconButtonProps {
classes: any;
children: any;
variant?: "outlined" | "contained";
}
const BoxIconButton = ({ classes, children, ...rest }: IBoxIconButton) => {
const BoxIconButton = ({
classes,
children,
variant = "outlined",
...rest
}: IBoxIconButton) => {
return (
<IconButton {...rest} className={classes.root}>
<IconButton
{...rest}
className={clsx(classes.root, {
[classes.contained]: variant == "contained",
})}
>
{children}
</IconButton>
);

View File

@@ -965,13 +965,3 @@ export const commonDashboardInfocard = {
},
},
};
export const linkStyles = (color: string) => ({
link: {
textDecoration: "underline",
color,
backgroundColor: "transparent",
border: 0,
cursor: "pointer",
},
});

View File

@@ -27,7 +27,6 @@ import InputAdornment from "@mui/material/InputAdornment";
import {
actionsTray,
containerForHeader,
linkStyles,
searchField,
settingsCommon,
typesSelection,
@@ -45,6 +44,7 @@ import SearchIcon from "../../../../icons/SearchIcon";
import PageHeader from "../../Common/PageHeader/PageHeader";
import HelpBox from "../../../../common/HelpBox";
import BoxIconButton from "../../Common/BoxIconButton";
import AButton from "../../Common/AButton";
interface IListTiersConfig {
classes: any;
@@ -78,7 +78,6 @@ const styles = (theme: Theme) =>
...settingsCommon.customTitle,
marginTop: 0,
},
...linkStyles(theme.palette.info.main),
});
const ListTiersConfiguration = ({
@@ -224,10 +223,10 @@ const ListTiersConfiguration = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={addTier}
>
Add a Tier
Add Tier
</Button>
</Grid>
<Grid item xs={12}>
@@ -342,10 +341,7 @@ const ListTiersConfiguration = ({
<br />
<br />
To get started,{" "}
<button onClick={addTier} className={classes.link}>
Add Tier
</button>
.
<AButton onClick={addTier}>Add A Tier</AButton>.
</Fragment>
}
/>

View File

@@ -281,7 +281,7 @@ const DirectCSIMain = ({
<Button
variant="contained"
color="primary"
startIcon={<GroupIcon />}
endIcon={<GroupIcon />}
disabled={checkedDrives.length <= 0 || notAvailable}
onClick={formatSelectedDrives}
>
@@ -290,7 +290,7 @@ const DirectCSIMain = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={formatAllDrives}
disabled={notAvailable}
>

View File

@@ -30,7 +30,6 @@ import { stringSort } from "../../../utils/sortFunctions";
import {
actionsTray,
containerForHeader,
linkStyles,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
@@ -43,6 +42,7 @@ import PageHeader from "../Common/PageHeader/PageHeader";
import SearchIcon from "../../../icons/SearchIcon";
import HelpBox from "../../../common/HelpBox";
import history from "../../../history";
import AButton from "../Common/AButton";
interface IGroupsProps {
classes: any;
@@ -85,7 +85,6 @@ const styles = (theme: Theme) =>
},
},
},
...linkStyles(theme.palette.info.main),
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
@@ -212,7 +211,7 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setSelectedGroup(null);
setGroupOpen(true);
@@ -288,15 +287,14 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
<br />
<br />
To get started,{" "}
<button
<AButton
onClick={() => {
setSelectedGroup(null);
setGroupOpen(true);
}}
className={classes.link}
>
Create a Group
</button>
</AButton>
.
</Fragment>
}

View File

@@ -224,7 +224,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
<Button
variant="contained"
color="primary"
startIcon={<UsersIcon />}
endIcon={<UsersIcon />}
size="medium"
onClick={() => {
setUsersOpen(true);
@@ -252,7 +252,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
<Button
variant="contained"
color="primary"
startIcon={<IAMPoliciesIcon />}
endIcon={<IAMPoliciesIcon />}
size="medium"
onClick={() => {
setPolicyOpen(true);

View File

@@ -37,7 +37,6 @@ import { setErrorSnackMessage } from "../../../actions";
import {
actionsTray,
containerForHeader,
linkStyles,
searchField,
settingsCommon,
} from "../Common/FormComponents/common/styleLibrary";
@@ -48,6 +47,7 @@ import SearchIcon from "../../../icons/SearchIcon";
import history from "../../../history";
import HelpBox from "../../../common/HelpBox";
import BoxIconButton from "../Common/BoxIconButton";
import AButton from "../Common/AButton";
interface IListNotificationEndpoints {
classes: any;
@@ -75,7 +75,6 @@ const styles = (theme: Theme) =>
lambdaContainer: {
padding: "15px 0",
},
...linkStyles(theme.palette.info.main),
});
const ListNotificationEndpoints = ({
@@ -173,7 +172,7 @@ const ListNotificationEndpoints = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
history.push("/notification-endpoints/add");
}}
@@ -257,14 +256,13 @@ const ListNotificationEndpoints = ({
<br />
<br />
To get started,{" "}
<button
<AButton
onClick={() => {
history.push("/notification-endpoints/add");
}}
className={classes.link}
>
Add a Notification Target
</button>
</AButton>
.
</Fragment>
}

View File

@@ -202,7 +202,7 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setAddScreenOpen(true);
setPolicyEdit(null);

View File

@@ -29,7 +29,6 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
import {
actionsTray,
containerForHeader,
linkStyles,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
import { setErrorSnackMessage } from "../../../../actions";
@@ -44,6 +43,7 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
import TenantListItem from "./TenantListItem";
import HelpBox from "../../../../common/HelpBox";
import BoxIconButton from "../../Common/BoxIconButton";
import AButton from "../../Common/AButton";
interface ITenantsList {
classes: any;
@@ -107,7 +107,6 @@ const styles = (theme: Theme) =>
paddingTop: 30,
paddingBottom: 30,
},
...linkStyles(theme.palette.info.main),
});
const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
@@ -300,14 +299,13 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
<br />
<br />
To get started,&nbsp;
<button
className={classes.link}
<AButton
onClick={() => {
history.push("/tenants/add");
}}
>
Create a Tenant.
</button>
</AButton>
</Fragment>
}
/>

View File

@@ -130,7 +130,7 @@ const PoolsSummary = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setAddPool(true);
}}

View File

@@ -34,7 +34,6 @@ import { AddIcon, UsersIcon } from "../../../icons";
import {
actionsTray,
containerForHeader,
linkStyles,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import { setErrorSnackMessage } from "../../../actions";
@@ -48,6 +47,7 @@ import PageHeader from "../Common/PageHeader/PageHeader";
import SearchIcon from "../../../icons/SearchIcon";
import { decodeFileName } from "../../../common/utils";
import HelpBox from "../../../common/HelpBox";
import AButton from "../Common/AButton";
const styles = (theme: Theme) =>
createStyles({
@@ -87,7 +87,6 @@ const styles = (theme: Theme) =>
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
...linkStyles(theme.palette.info.main),
});
interface IUsersProps {
@@ -253,7 +252,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
<Button
variant="outlined"
color="primary"
startIcon={<GroupIcon />}
endIcon={<GroupIcon />}
disabled={checkedUsers.length <= 0}
onClick={() => {
if (checkedUsers.length > 0) {
@@ -266,7 +265,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setAddScreenOpen(true);
setSelectedUser(null);
@@ -358,15 +357,14 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
<br />
<br />
To get started,{" "}
<button
<AButton
onClick={() => {
setAddScreenOpen(true);
setSelectedUser(null);
}}
className={classes.link}
>
Create a User
</button>
</AButton>
.
</Fragment>
}

View File

@@ -367,7 +367,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
size="medium"
onClick={() => {
setAddGroupOpen(true);
@@ -398,7 +398,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
<Button
variant="contained"
color="primary"
startIcon={<IAMPoliciesIcon />}
endIcon={<IAMPoliciesIcon />}
size="medium"
onClick={() => {
setPolicyOpen(true);

View File

@@ -167,7 +167,7 @@ const UserServiceAccountsPanel = ({
<Button
variant="contained"
color="primary"
startIcon={<AddIcon />}
endIcon={<AddIcon />}
onClick={() => {
setAddScreenOpen(true);
setAddScreenOpen(true);

View File

@@ -423,7 +423,7 @@ const Login = ({
onClick={() => {
fetchConfiguration();
}}
startIcon={<RefreshIcon />}
endIcon={<RefreshIcon />}
color={"primary"}
className={classes.retryButton}
>