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 <[email protected]>

* Add AButton component to replace <a> tags

Signed-off-by: Daniel Valdivia <[email protected]>

Author: dvaldivia

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",

portal-ui/src/screens/Console/Account/Account.tsx

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

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

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

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

@@ -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>

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

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

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

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

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

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

portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx

@@ -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>
                     }
                   />

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,25 +1084,23 @@ 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);
                         }}
                         disabled={rewindEnabled}
                         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,33 +1131,32 @@ const ListObjects = ({
                     invisible={!rewindEnabled}
                     className={classes.badgeOverlap}
                   >
-                    <IconButton
+                    <BoxIconButton
                       color="primary"
                       aria-label="Rewind"
-                      component="span"
                       onClick={() => {
                         setRewindSelect(true);
                       }}
                       disabled={!isVersioned}
                       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);
               }}

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx

@@ -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>