From 685cfda75280439c3489dae230f34b87d835df4e Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Mon, 8 Nov 2021 16:09:59 -0800 Subject: [PATCH] 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 tags Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> --- portal-ui/src/index.tsx | 3 ++ .../src/screens/Console/Account/Account.tsx | 2 +- .../Buckets/BucketDetails/AccessRulePanel.tsx | 2 +- .../Buckets/BucketDetails/BucketDetails.tsx | 3 +- .../BucketDetails/BucketEventsPanel.tsx | 2 +- .../BucketDetails/BucketLifecyclePanel.tsx | 2 +- .../BucketDetails/BucketReplicationPanel.tsx | 2 +- .../Buckets/ListBuckets/ListBuckets.tsx | 9 ++-- .../Objects/ListObjects/ListObjects.tsx | 33 +++++------- .../Objects/ObjectDetails/ObjectDetails.tsx | 14 +++--- .../Objects/ObjectDetails/ShareFile.tsx | 4 +- .../src/screens/Console/Common/AButton.tsx | 50 +++++++++++++++++++ .../screens/Console/Common/BoxIconButton.tsx | 37 ++++++++++++-- .../FormComponents/common/styleLibrary.ts | 10 ---- .../ListTiersConfiguration.tsx | 12 ++--- .../Console/DirectCSI/DirectCSIDrives.tsx | 4 +- .../src/screens/Console/Groups/Groups.tsx | 10 ++-- .../screens/Console/Groups/GroupsDetails.tsx | 4 +- .../ListNotificationEndpoints.tsx | 10 ++-- .../screens/Console/Policies/ListPolicies.tsx | 2 +- .../Tenants/ListTenants/ListTenants.tsx | 8 ++- .../Tenants/TenantDetails/PoolsSummary.tsx | 2 +- .../src/screens/Console/Users/ListUsers.tsx | 12 ++--- .../src/screens/Console/Users/UserDetails.tsx | 4 +- .../Users/UserServiceAccountsPanel.tsx | 2 +- portal-ui/src/screens/LoginPage/LoginPage.tsx | 2 +- 26 files changed, 149 insertions(+), 96 deletions(-) create mode 100644 portal-ui/src/screens/Console/Common/AButton.tsx diff --git a/portal-ui/src/index.tsx b/portal-ui/src/index.tsx index 089dcafb5..b6e7d585c 100644 --- a/portal-ui/src/index.tsx +++ b/portal-ui/src/index.tsx @@ -45,6 +45,9 @@ const GlobalCss = withStyles({ ".MuiButton-root": { height: 38, }, + ".MuiButtonBase-root": { + textTransform: "capitalize", + }, ".MuiButton-contained": { fontSize: "14px", textTransform: "capitalize", diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx index fc41b282c..30a1e3218 100644 --- a/portal-ui/src/screens/Console/Account/Account.tsx +++ b/portal-ui/src/screens/Console/Account/Account.tsx @@ -257,7 +257,7 @@ const Account = ({ + + refresh } /> diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index e4cfe6a34..c7995c9ae 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx @@ -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 && ( - { setCreateFolderOpen(true); }} @@ -1099,14 +1094,13 @@ const ListObjects = ({ size="large" > - + - { if (fileUpload && fileUpload.current) { fileUpload.current.click(); @@ -1116,7 +1110,7 @@ const ListObjects = ({ size="large" > - + - { setRewindSelect(true); }} @@ -1148,22 +1141,22 @@ const ListObjects = ({ size="large" > - + - { setLoading(true); }} disabled={rewindEnabled} size="large" + variant={"contained"} > - + } @@ -1195,7 +1188,7 @@ const ListObjects = ({ + ); +}; + +export default withStyles(styles)(AButton); diff --git a/portal-ui/src/screens/Console/Common/BoxIconButton.tsx b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx index ca63fd605..f965c2943 100644 --- a/portal-ui/src/screens/Console/Common/BoxIconButton.tsx +++ b/portal-ui/src/screens/Console/Common/BoxIconButton.tsx @@ -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 ( - + {children} ); diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts index e7610cad3..3ba159530 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts +++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts @@ -965,13 +965,3 @@ export const commonDashboardInfocard = { }, }, }; - -export const linkStyles = (color: string) => ({ - link: { - textDecoration: "underline", - color, - backgroundColor: "transparent", - border: 0, - cursor: "pointer", - }, -}); diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx index 991e6f5ec..e8df7165e 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx @@ -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 = ({ @@ -342,10 +341,7 @@ const ListTiersConfiguration = ({

To get started,{" "} - - . + Add A Tier. } /> diff --git a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx index c7509f661..22e37ee87 100644 --- a/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx +++ b/portal-ui/src/screens/Console/DirectCSI/DirectCSIDrives.tsx @@ -281,7 +281,7 @@ const DirectCSIMain = ({ + . } diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx index a8fb03c9c..376ac1cde 100644 --- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx +++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx @@ -224,7 +224,7 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => { + . } diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx index f3088ce93..6ae241a57 100644 --- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx +++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx @@ -202,7 +202,7 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => { + } /> diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx index 8f196bac0..66c5caada 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx @@ -130,7 +130,7 @@ const PoolsSummary = ({ + . } diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx index a6a8199b6..caa95216b 100644 --- a/portal-ui/src/screens/Console/Users/UserDetails.tsx +++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx @@ -367,7 +367,7 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {