UX cosmetics for users, groups, service accounts (#1236)

Co-authored-by: Alex <33497058+bexsoft@users.noreply.github.com>
2021-11-19 02:43:07 +05:30
parent aae493ac82
commit 813458c4c1
24 changed files with 694 additions and 547 deletions
--- a/portal-ui/src/common/HelpBox.tsx
+++ b/portal-ui/src/common/HelpBox.tsx
@@ -33,13 +33,15 @@ const styles = (theme: Theme) =>
      marginBottom: 10,
      backgroundColor: "#fbfafa",
    },
-    icon: {
+    leftItems: {
      fontSize: 16,
      fontWeight: "bold",
      marginBottom: 20,
+      display: "flex",
+      alignItems: "center",
      "& .MuiSvgIcon-root": {
-        fontSize: 44,
-        marginRight: 15,
+        fontSize: "2.5rem",
+        marginRight: ".8rem",
      },
    },
    iconSize: {
@@ -61,7 +63,7 @@ const HelpBox = ({ classes, iconComponent, title, help }: IHelpBox) => {
  return (
    <div className={classes.root}>
      <Grid container>
-        <Grid item xs={12} className={classes.icon}>
+        <Grid item xs={12} className={classes.leftItems}>
          {iconComponent}
          {title}
        </Grid>
--- a/portal-ui/src/icons/TrashIcon.tsx
+++ b/portal-ui/src/icons/TrashIcon.tsx
@@ -15,29 +15,36 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import * as React from "react";
-import { SvgIcon, SvgIconProps } from "@mui/material";

-const TrashIcon = (props: SvgIconProps) => {
+const TrashIcon = () => {
  return (
-    <SvgIcon {...props}>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-        <defs>
-          <clipPath id="prefix__a">
-            <path d="M0 0h256v256H0z" />
-          </clipPath>
-        </defs>
-        <g clipPath="url(#prefix__a)">
-          <path
-            data-name="Trazado 359"
-            d="M222.078 14.266h-50.793V6.25a6.248 6.248 0 00-6.25-6.25H91.93a6.248 6.248 0 00-6.25 6.25v8.016H34.887a6.28 6.28 0 00-6.277 6.277v15.982a6.278 6.278 0 006.277 6.275h187.191a6.278 6.278 0 006.277-6.275V20.543a6.28 6.28 0 00-6.277-6.277z"
-          />
-          <path
-            data-name="Trazado 360"
-            d="M42.876 227.97a28.933 28.933 0 0028.844 28.848h113.516a28.934 28.934 0 0028.848-28.848V57.07H42.876z"
-          />
-        </g>
-      </svg>
-    </SvgIcon>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="11.889"
+      height="14"
+      viewBox="0 0 11.889 14"
+    >
+      <g id="trash-icn" transform="translate(0.5 -0.5)">
+        <path
+          id="Trazado_359"
+          data-name="Trazado 359"
+          d="M-2211.453-1226.222h-2.769v-.437a.341.341,0,0,0-.341-.341h-3.985a.34.34,0,0,0-.341.341v.437h-2.769a.343.343,0,0,0-.342.342v.871a.342.342,0,0,0,.342.342h10.2a.342.342,0,0,0,.342-.342v-.871A.342.342,0,0,0-2211.453-1226.222Z"
+          transform="translate(2222 1228)"
+          fill="none"
+          stroke="#5e5e5e"
+          stroke-width="1"
+        />
+        <path
+          id="Trazado_360"
+          data-name="Trazado 360"
+          d="M-2221-1213.684a1.577,1.577,0,0,0,1.572,1.573h6.188a1.577,1.577,0,0,0,1.573-1.573V-1223H-2221Z"
+          transform="translate(2221.778 1226.111)"
+          fill="none"
+          stroke="#5e5e5e"
+          stroke-width="1"
+        />
+      </g>
+    </svg>
  );
 };

--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -28,8 +28,6 @@ import AddServiceAccount from "./AddServiceAccount";
 import DeleteServiceAccount from "./DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
 import { AccountIcon, AddIcon, LockIcon } from "../../../icons";
-import TextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import PageHeader from "../Common/PageHeader/PageHeader";
@@ -37,12 +35,13 @@ import {
  actionsTray,
  containerForHeader,
  searchField,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
 import ChangePasswordModal from "./ChangePasswordModal";
-import SearchIcon from "../../../icons/SearchIcon";
 import HelpBox from "../../../common/HelpBox";
 import PageLayout from "../Common/Layout/PageLayout";
+import SearchBox from "../Common/SearchBox";

 const styles = (theme: Theme) =>
  createStyles({
@@ -84,6 +83,12 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
+    searchField: {
+      ...searchField.searchField,
+      marginRight: "auto",
+      maxWidth: 380,
+    },
+    ...tableStyles,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -234,24 +239,12 @@ const Account = ({
      />
      <PageLayout>
        <Grid item xs={12} className={classes.actionsTray}>
-          <TextField
-            placeholder="Search Service Accounts"
-            className={classes.searchField}
-            id="search-resource"
-            label=""
-            InputProps={{
-              disableUnderline: true,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-            onChange={(e) => {
-              setFilter(e.target.value);
-            }}
-            variant="standard"
+          <SearchBox
+            placeholder={"Search Groups"}
+            onChange={setFilter}
+            classes={classes}
          />
+
          <Button
            variant="contained"
            color="primary"
@@ -267,7 +260,7 @@ const Account = ({
        <Grid item xs={12}>
          <br />
        </Grid>
-        <Grid item xs={12}>
+        <Grid item xs={12} className={classes.tableBlock}>
          <TableWrapper
            isLoading={loading}
            records={filteredRecords}
--- a/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx
@@ -31,9 +31,13 @@ import {
 import { setErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
+import { deleteDialogStyles } from "../Common/FormComponents/common/styleLibrary";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";

 const styles = (theme: Theme) =>
  createStyles({
+    ...deleteDialogStyles,
    wrapText: {
      maxWidth: "200px",
      whiteSpace: "normal",
@@ -89,13 +93,30 @@ const DeleteServiceAccount = ({
  return (
    <Dialog
      open={deleteOpen}
+      classes={classes}
+      className={classes.root}
      onClose={() => {
        closeDeleteModalAndRefresh(false);
      }}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
-      <DialogTitle id="alert-dialog-title">Delete ServiceAccount</DialogTitle>
+      <DialogTitle id="alert-dialog-title" className={classes.title}>
+        <div className={classes.titleText}>Delete ServiceAccount</div>
+        <div className={classes.closeContainer}>
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={() => {
+              closeDeleteModalAndRefresh(true);
+            }}
+            disableRipple
+            size="small"
+          >
+            <CloseIcon />
+          </IconButton>
+        </div>
+      </DialogTitle>
      <DialogContent>
        {deleteLoading && <LinearProgress />}
        <DialogContentText id="alert-dialog-description">
@@ -105,6 +126,8 @@ const DeleteServiceAccount = ({
      </DialogContent>
      <DialogActions>
        <Button
+          type="button"
+          variant="outlined"
          onClick={() => {
            closeDeleteModalAndRefresh(false);
          }}
@@ -113,7 +136,10 @@ const DeleteServiceAccount = ({
        >
          Cancel
        </Button>
+
        <Button
+          type="button"
+          variant="outlined"
          onClick={removeRecord}
          color="secondary"
          autoFocus
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -229,6 +229,7 @@ export const actionsTray = {
    display: "flex" as const,
    justifyContent: "space-between" as const,
    marginBottom: "1rem",
+    alignItems: "center",
    "& button": {
      flexGrow: 0,
      marginLeft: 8,
@@ -269,7 +270,7 @@ export const searchField = {
      fontWeight: 700,
      color: "#000",
      "&::placeholder": {
-        color: "#393939",
+        color: "#a6a5a5",
        opacity: 1,
      },
    },
@@ -280,6 +281,9 @@ export const searchField = {
      width: 16,
      height: 16,
    },
+    "&:focus-within": {
+      borderColor: "rgba(0, 0, 0, 0.87)",
+    },
  },
 };

@@ -291,13 +295,12 @@ export const predefinedList = {
    margin: "15px 0 0",
  },
  predefinedTitle: {
-    color: "#07193E",
+    color: "rgba(0, 0, 0, 0.87)",
    display: "flex" as const,
    overflow: "hidden" as const,
    fontSize: 14,
    maxWidth: 160,
    textAlign: "left" as const,
-    fontWeight: 600,
    marginRight: 10,
    flexGrow: 0,
  },
@@ -1064,3 +1067,76 @@ export const serviceAccountStyles: any = {
    justifyContent: "flex-end",
  },
 };
+
+export const tableStyles: any = {
+  tableBlock: {
+    "& .ReactVirtualized__Table__headerRow.rowLine, .ReactVirtualized__Table__row.rowLine":
+      {
+        borderBottom: "1px solid #EAEAEA",
+      },
+
+    "& .rowLine:hover:not(.ReactVirtualized__Table__headerRow)": {
+      backgroundColor: "#F8F8F8",
+    },
+    "& .ReactVirtualized__Table__row.rowLine": {
+      fontSize: ".8rem",
+    },
+    "& .optionsAlignment ": {
+      textAlign: "right",
+
+      "& .MuiButtonBase-root": {
+        backgroundColor: "#F8F8F8",
+      },
+
+      "&:hover": {
+        backgroundColor: "#E2E2E2",
+      },
+    },
+  },
+};
+
+export const spacingUtils: any = {
+  spacerRight: {
+    marginRight: ".9rem",
+  },
+  spacerLeft: {
+    marginLeft: ".9rem",
+  },
+};
+
+export const formFieldStyles = {
+  formFieldRow: {
+    marginBottom: ".8rem",
+    "& .MuiInputLabel-root": {
+      fontWeight: "normal",
+    },
+  },
+};
+
+export const deleteDialogStyles = {
+  root: {
+    "& .MuiPaper-root": {
+      padding: "1rem 2rem 2rem 1rem",
+    },
+  },
+  title: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  titleText: {
+    fontSize: "1rem",
+    fontWeight: 600,
+  },
+  closeContainer: {
+    "& .MuiIconButton-root": {
+      top: -20,
+      left: 30,
+      position: "relative",
+    },
+    "& .MuiSvgIcon-root": {
+      height: 16,
+      width: 16,
+    },
+  },
+};
--- a/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx
@@ -25,7 +25,7 @@ const styles = (theme: Theme) =>
    root: {
      padding: 0,
      margin: 0,
-      fontSize: "1.2rem",
+      fontSize: ".9rem",
    },
  });

--- a/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/ScreenTitle/ScreenTitle.tsx
@@ -63,6 +63,10 @@ const styles = (theme: Theme) =>
      display: "flex",
      alignItems: "center",
    },
+    rightItems: {
+      display: "flex",
+      alignItems: "center",
+    },
  });

 const ScreenTitle = ({
@@ -83,7 +87,7 @@ const ScreenTitle = ({
          </div>
        </div>

-        <div>{actions}</div>
+        <div className={classes.rightItems}>{actions}</div>
      </Grid>
    </Grid>
  );
--- a/portal-ui/src/screens/Console/Common/SearchBox.tsx
+++ b/portal-ui/src/screens/Console/Common/SearchBox.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import InputAdornment from "@mui/material/InputAdornment";
+import SearchIcon from "../../../icons/SearchIcon";
+import TextField from "@mui/material/TextField";
+import withStyles from "@mui/styles/withStyles";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import { searchField } from "./FormComponents/common/styleLibrary";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    searchField: {
+      ...searchField.searchField,
+    },
+    adornment: {},
+  });
+
+type SearchBoxProps = {
+  placeholder?: string;
+  classes: any;
+  onChange: (value: string) => void;
+  adornmentPosition?: "start" | "end";
+};
+
+const SearchBox = ({
+  placeholder = "",
+  classes,
+  onChange,
+  adornmentPosition = "end",
+}: SearchBoxProps) => {
+  const inputProps = {
+    disableUnderline: true,
+    [`${adornmentPosition}Adornment`]: (
+      <InputAdornment
+        position={adornmentPosition}
+        className={classes.adornment}
+      >
+        <SearchIcon />
+      </InputAdornment>
+    ),
+  };
+  return (
+    <TextField
+      placeholder={placeholder}
+      className={classes.searchField}
+      id="search-resource"
+      label=""
+      InputProps={inputProps}
+      onChange={(e) => {
+        onChange(e.target.value);
+      }}
+      variant="standard"
+    />
+  );
+};
+
+export default withStyles(styles)(SearchBox);
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -21,7 +21,11 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+  spacingUtils,
+} from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
@@ -56,6 +60,8 @@ const styles = (theme: Theme) =>
    buttonContainer: {
      textAlign: "right",
    },
+    ...formFieldStyles,
+    ...spacingUtils,
    ...modalBasic,
  });

@@ -193,19 +199,17 @@ const AddGroup = ({
        <Grid container>
          <Grid item xs={12} className={classes.formScrollable}>
            {selectedGroup === null ? (
-              <React.Fragment>
-                <Grid item xs={12}>
-                  <InputBoxWrapper
-                    id="group-name"
-                    name="group-name"
-                    label="Group Name"
-                    value={groupName}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setGroupName(e.target.value);
-                    }}
-                  />
-                </Grid>
-              </React.Fragment>
+              <Grid item xs={12} className={classes.formFieldRow}>
+                <InputBoxWrapper
+                  id="group-name"
+                  name="group-name"
+                  label="Group Name"
+                  value={groupName}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setGroupName(e.target.value);
+                  }}
+                />
+              </Grid>
            ) : (
              <React.Fragment>
                <PredefinedList label={"Group Name"} content={selectedGroup} />
@@ -213,6 +217,7 @@ const AddGroup = ({
            )}
            <Grid item xs={12}>
              <UsersSelectors
+                classes={classes}
                selectedUsers={selectedUsers}
                setSelectedUsers={setSelectedUsers}
                editMode={selectedGroup !== null}
@@ -220,14 +225,16 @@ const AddGroup = ({
            </Grid>
          </Grid>
          <Grid item xs={12} className={classes.buttonContainer}>
-            <button
+            <Button
              type="button"
+              variant="outlined"
              color="primary"
-              className={classes.clearButton}
+              className={classes.spacerRight}
              onClick={resetForm}
            >
              Clear
-            </button>
+            </Button>
+
            <Button
              type="submit"
              variant="contained"
--- a/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupMember.tsx
@@ -10,7 +10,10 @@ import { setModalErrorSnackMessage } from "../../../actions";
 import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+} from "../Common/FormComponents/common/styleLibrary";
 import withStyles from "@mui/styles/withStyles";

 type UserPickerModalProps = {
@@ -30,6 +33,11 @@ const styles = (theme: Theme) =>
      textAlign: "right",
      marginTop: "1rem",
    },
+    predefinedTitle: {
+      color: "rgba(0,0,0,.87)",
+      fontWeight: "normal",
+    },
+    ...formFieldStyles,
    ...modalBasic,
  });

@@ -62,9 +70,13 @@ const AddGroupMember = ({

  return (
    <ModalWrapper modalOpen={open} onClose={onClose} title={title}>
-      <PredefinedList label={`Selected Group`} content={selectedGroup} />
-
-      <br />
+      <div className={classes.formFieldRow}>
+        <PredefinedList
+          classes={classes}
+          label={`Selected Group`}
+          content={selectedGroup}
+        />
+      </div>
      <UsersSelectors
        selectedUsers={selectedUsers}
        setSelectedUsers={setSelectedUsers}
@@ -72,16 +84,17 @@ const AddGroupMember = ({
      />

      <Grid item xs={12} className={classes.buttonContainer}>
-        <button
+        <Button
          type="button"
+          variant="outlined"
          color="primary"
-          className={classes.clearButton}
+          className={classes.spacerRight}
          onClick={() => {
            setSelectedUsers(preSelectedUsers);
          }}
        >
-          Clear
-        </button>
+          Reset
+        </Button>

        <Button
          type="button"
--- a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
@@ -28,12 +28,24 @@ import {
 import api from "../../../common/api";
 import { setErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import { deleteDialogStyles } from "../Common/FormComponents/common/styleLibrary";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...deleteDialogStyles,
+  });

 interface IDeleteGroup {
  selectedGroup: string;
  deleteOpen: boolean;
  closeDeleteModalAndRefresh: any;
  setErrorSnackMessage: typeof setErrorSnackMessage;
+  classes: any;
 }

 const DeleteGroup = ({
@@ -41,6 +53,7 @@ const DeleteGroup = ({
  deleteOpen,
  closeDeleteModalAndRefresh,
  setErrorSnackMessage,
+  classes,
 }: IDeleteGroup) => {
  const [isDeleting, setDeleteLoading] = useState<boolean>(false);

@@ -76,36 +89,58 @@ const DeleteGroup = ({
  };

  return (
-    <React.Fragment>
-      <Dialog
-        open={deleteOpen}
-        onClose={closeNoAction}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-      >
-        <DialogTitle id="alert-dialog-title">Delete User</DialogTitle>
-        <DialogContent>
-          {isDeleting && <LinearProgress />}
-          <DialogContentText id="alert-dialog-description">
-            Are you sure you want to delete group <b>{selectedGroup}</b>?
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeNoAction} color="primary" disabled={isDeleting}>
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              setDeleteLoading(true);
-            }}
-            color="secondary"
-            autoFocus
+    <Dialog
+      open={deleteOpen}
+      onClose={closeNoAction}
+      classes={classes}
+      className={classes.root}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title" className={classes.title}>
+        <div className={classes.titleText}>Delete Group</div>
+        <div className={classes.closeContainer}>
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={closeNoAction}
+            disableRipple
+            size="small"
          >
-            Delete
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </React.Fragment>
+            <CloseIcon />
+          </IconButton>
+        </div>
+      </DialogTitle>
+      <DialogContent>
+        {isDeleting && <LinearProgress />}
+        <DialogContentText id="alert-dialog-description">
+          Are you sure you want to delete group <br />
+          <b>{selectedGroup}</b>?
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          type="button"
+          variant="outlined"
+          onClick={closeNoAction}
+          color="primary"
+          disabled={isDeleting}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="outlined"
+          onClick={() => {
+            setDeleteLoading(true);
+          }}
+          color="secondary"
+          autoFocus
+        >
+          Delete
+        </Button>
+      </DialogActions>
+    </Dialog>
  );
 };

@@ -115,4 +150,4 @@ const mapDispatchToProps = {

 const connector = connect(null, mapDispatchToProps);

-export default connector(DeleteGroup);
+export default withStyles(styles)(connector(DeleteGroup));
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -20,8 +20,6 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
 import { Button, LinearProgress } from "@mui/material";
 import { AddIcon, GroupsIcon, UsersIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
@@ -31,6 +29,7 @@ import {
  actionsTray,
  containerForHeader,
  searchField,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
@@ -39,11 +38,11 @@ import DeleteGroup from "./DeleteGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import SetPolicy from "../Policies/SetPolicy";
 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/AButton";
 import PageLayout from "../Common/Layout/PageLayout";
+import SearchBox from "../Common/SearchBox";

 interface IGroupsProps {
  classes: any;
@@ -53,45 +52,19 @@ interface IGroupsProps {

 const styles = (theme: Theme) =>
  createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
    pageContainer: {
      border: "1px solid #EAEAEA",
      width: "100%",
    },
-    paper: {
-      // padding: theme.spacing(2),
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    twHeight: {
-      minHeight: 600,
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
+    tableBlock: {
+      ...tableStyles.tableBlock,
+      marginTop: 15,
    },
    ...actionsTray,
-    ...searchField,
+    searchField: {
+      ...searchField.searchField,
+      maxWidth: 380,
+    },
    ...containerForHeader(theme.spacing(4)),
  });

@@ -195,23 +168,10 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {

      <PageLayout>
        <Grid item xs={12} className={classes.actionsTray}>
-          <TextField
-            placeholder="Search Groups"
-            className={classes.searchField}
-            id="search-resource"
-            label=""
-            InputProps={{
-              disableUnderline: true,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-            onChange={(e) => {
-              setFilter(e.target.value);
-            }}
-            variant="standard"
+          <SearchBox
+            placeholder={"Search Groups"}
+            onChange={setFilter}
+            classes={classes}
          />
          <Button
            variant="contained"
@@ -226,15 +186,12 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
          </Button>
        </Grid>

-        <Grid item xs={12}>
-          <br />
-        </Grid>
        {loading && <LinearProgress />}
        {!loading && (
          <Fragment>
            {records.length > 0 && (
              <Fragment>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.tableBlock}>
                  <TableWrapper
                    itemActions={tableActions}
                    columns={[{ label: "Name", elementKey: "" }]}
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -7,6 +7,8 @@ import {
  actionsTray,
  containerForHeader,
  searchField,
+  spacingUtils,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import {
  setErrorSnackMessage,
@@ -14,9 +16,9 @@ import {
 } from "../../../actions";
 import { connect } from "react-redux";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid, IconButton, Tooltip } from "@mui/material";
+import { Button, Grid, Tooltip } from "@mui/material";
 import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import { DeleteIcon, IAMPoliciesIcon, UsersIcon } from "../../../icons";
+import { IAMPoliciesIcon, TrashIcon, UsersIcon } from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import history from "../../../history";
 import api from "../../../common/api";
@@ -29,6 +31,8 @@ import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSw
 import PageLayout from "../Common/Layout/PageLayout";
 import BackLink from "../../../common/BackLink";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
+import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
+import SearchBox from "../Common/SearchBox";

 const styles = (theme: Theme) =>
  createStyles({
@@ -42,15 +46,40 @@ const styles = (theme: Theme) =>
    },
    statusLabel: {
      fontSize: ".8rem",
-      marginRight: ".5rem",
+      marginRight: ".7rem",
    },
    statusValue: {
      fontWeight: "bold",
      fontSize: ".9rem",
-      marginRight: ".5rem",
+      marginRight: ".7rem",
+    },
+    searchField: {
+      ...searchField.searchField,
+      maxWidth: 280,
+    },
+    ...tableStyles,
+    ...spacingUtils,
+    actionsTray: {
+      ...actionsTray.actionsTray,
+
+      alignItems: "center",
+      "& h1": {
+        flex: 1,
+      },
+      "& button": {
+        marginLeft: ".8rem",
+      },
+      "@media (max-width: 900px)": {
+        justifyContent: "flex-end",
+        "& h1": {
+          display: "none",
+        },
+        "& button": {
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+        },
+      },
    },
-    ...actionsTray,
-    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -102,11 +131,18 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
  const [policyOpen, setPolicyOpen] = useState<boolean>(false);
  const [usersOpen, setUsersOpen] = useState<boolean>(false);
  const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
+  const [memberFilter, setMemberFilter] = useState<string>("");
+
+  //const [policyFilter, setPolicyFilter] = useState<string>("");

  const { groupName = "" } = useParams<Record<string, string>>();

  const { members = [], policy = "", status: groupEnabled } = groupDetails;

+  const filteredMembers = members.filter((elementItem) =>
+    elementItem.includes(memberFilter)
+  );
+
  useEffect(() => {
    if (groupName) {
      fetchGroupInfo();
@@ -149,6 +185,13 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
    <React.Fragment>
      <div className={classes.actionsTray}>
        <PanelTitle>Members</PanelTitle>
+        <SearchBox
+          placeholder={"Search members"}
+          onChange={(searchText) => {
+            setMemberFilter(searchText);
+          }}
+          classes={classes}
+        />
        <Button
          variant="contained"
          color="primary"
@@ -162,14 +205,16 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
        </Button>
      </div>

-      <TableWrapper
-        columns={[{ label: "Access Key", elementKey: "" }]}
-        selectedItems={[]}
-        isLoading={false}
-        records={members}
-        entityName="Users"
-        idField=""
-      />
+      <div className={classes.tableBlock}>
+        <TableWrapper
+          columns={[{ label: "Access Key", elementKey: "" }]}
+          selectedItems={[]}
+          isLoading={false}
+          records={filteredMembers}
+          entityName="Users"
+          idField=""
+        />
+      </div>
    </React.Fragment>
  );

@@ -189,22 +234,23 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
          Set Policies
        </Button>
      </div>
-
-      <TableWrapper
-        itemActions={[
-          {
-            type: "view",
-            onClick: (policy) => {
-              history.push(`/policies/${policy}`);
+      <div className={classes.tableBlock}>
+        <TableWrapper
+          itemActions={[
+            {
+              type: "view",
+              onClick: (policy) => {
+                history.push(`/policies/${policy}`);
+              },
            },
-          },
-        ]}
-        columns={[{ label: "Policy", elementKey: "" }]}
-        isLoading={false}
-        records={groupPolicies}
-        entityName="Policies"
-        idField=""
-      />
+          ]}
+          columns={[{ label: "Policy", elementKey: "" }]}
+          isLoading={false}
+          records={groupPolicies}
+          entityName="Policies"
+          idField=""
+        />
+      </div>
    </React.Fragment>
  );
  return (
@@ -239,18 +285,19 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                  }}
                  switchOnly
                />
-                <Tooltip title="Delete User">
-                  <IconButton
-                    color="primary"
-                    aria-label="Delete User"
-                    component="span"
-                    onClick={() => {
-                      setDeleteOpen(true);
-                    }}
-                    size="large"
-                  >
-                    <DeleteIcon />
-                  </IconButton>
+                <Tooltip title="Delete Group">
+                  <div className={classes.spacerLeft}>
+                    <BoxIconButton
+                      color="primary"
+                      aria-label="Delete Group"
+                      onClick={() => {
+                        setDeleteOpen(true);
+                      }}
+                      size="large"
+                    >
+                      <TrashIcon />
+                    </BoxIconButton>
+                  </div>
                </Tooltip>
              </Fragment>
            }
--- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
+++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
@@ -23,19 +23,18 @@ import { LinearProgress } from "@mui/material";
 import get from "lodash/get";
 import Paper from "@mui/material/Paper";
 import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
 import { UsersList } from "../Users/types";
 import { usersSort } from "../../../utils/sortFunctions";
 import {
  actionsTray,
  selectorsCommon,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SearchIcon from "../../../icons/SearchIcon";
+import SearchBox from "../Common/SearchBox";

 interface IGroupsProps {
  classes: any;
@@ -54,60 +53,30 @@ const styles = (theme: Theme) =>
      display: "flex",
      overflow: "auto",
      flexDirection: "column",
-      paddingTop: 15,
+      // paddingTop: 15,
      boxShadow: "none",
+      border: 0,
    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
+
+    tableBlock: {
+      ...tableStyles.tableBlock,
    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
+    searchBox: {
+      flex: 1,
    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
+    ...actionsTray,
+    actionsTitle: {
+      fontSize: 14,
+      alignSelf: "center",
+      minWidth: 160,
+      marginRight: 10,
    },
    noFound: {
      textAlign: "center",
-      padding: "10px 0",
+      padding: theme.spacing(3),
+      border: "1px solid #EAEAEA",
+      fontSize: ".9rem",
    },
-    tableContainer: {
-      maxHeight: 200,
-    },
-    stickyHeader: {
-      backgroundColor: "#fff",
-    },
-    actionsTitle: {
-      fontWeight: 600,
-      color: "#000",
-      fontSize: 16,
-      alignSelf: "center",
-    },
-    tableBlock: {
-      marginTop: 15,
-    },
-    filterField: {
-      width: 375,
-      fontWeight: 600,
-      "& .input": {
-        "&::placeholder": {
-          fontWeight: 600,
-          color: "#000",
-        },
-      },
-    },
-    ...actionsTray,
    ...selectorsCommon,
  });

@@ -187,26 +156,16 @@ const UsersSelectors = ({
          {records !== null && records.length > 0 ? (
            <React.Fragment>
              <Grid item xs={12} className={classes.actionsTray}>
-                <span className={classes.actionsTitle}>
+                <label className={classes.actionsTitle}>
                  {editMode ? "Edit Members" : "Assign Users"}
-                </span>
-                <TextField
-                  placeholder="Filter Users"
-                  className={classes.filterField}
-                  id="search-resource"
-                  label=""
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <SearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                  onChange={(e) => {
-                    setFilter(e.target.value);
-                  }}
-                  variant="standard"
-                />
+                </label>
+                <div className={classes.searchBox}>
+                  <SearchBox
+                    placeholder="Filter Users"
+                    adornmentPosition="end"
+                    onChange={setFilter}
+                  />
+                </div>
              </Grid>
              <Grid item xs={12} className={classes.tableBlock}>
                <TableWrapper
@@ -222,7 +181,7 @@ const UsersSelectors = ({
              </Grid>
            </React.Fragment>
          ) : (
-            <div className={classes.noFound}>No Users Available</div>
+            <div className={classes.noFound}>No Users to display</div>
          )}
        </Paper>
      </Grid>
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -21,19 +21,18 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import InputAdornment from "@mui/material/InputAdornment";
-import TextField from "@mui/material/TextField";
 import { policySort } from "../../../utils/sortFunctions";
 import {
  actionsTray,
  selectorsCommon,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { PolicyList } from "./types";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SearchIcon from "../../../icons/SearchIcon";
+import SearchBox from "../Common/SearchBox";

 interface ISelectPolicyProps {
  classes: any;
@@ -44,65 +43,26 @@ interface ISelectPolicyProps {

 const styles = (theme: Theme) =>
  createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-      paddingTop: 15,
-      boxShadow: "none",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
    noFound: {
      textAlign: "center",
      padding: "10px 0",
    },
-    tableContainer: {
-      maxHeight: 200,
+    filterBox: {
+      flex: 1,
    },
-    stickyHeader: {
-      backgroundColor: "#fff",
+    searchField: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: ".9rem",
    },
-    actionsTitle: {
+    fieldLabel: {
      fontWeight: 600,
-      color: "#000",
-      fontSize: 16,
-      alignSelf: "center",
+      width: 160,
+      marginRight: 10,
    },
    tableBlock: {
-      marginTop: 15,
-    },
-    filterField: {
-      width: 375,
-      fontWeight: 600,
-      "& .input": {
-        "&::placeholder": {
-          fontWeight: 600,
-          color: "#000",
-        },
-      },
+      ...tableStyles.tableBlock,
    },
    ...actionsTray,
    ...selectorsCommon,
@@ -176,25 +136,17 @@ const PolicySelectors = ({
        {loading && <LinearProgress />}
        {records.length > 0 ? (
          <React.Fragment>
-            <Grid item xs={12} className={classes.actionsTray}>
-              <span className={classes.actionsTitle}>Assign Policies</span>
-              <TextField
-                placeholder="Filter by Policy"
-                className={classes.filterField}
-                id="search-resource"
-                label=""
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <SearchIcon />
-                    </InputAdornment>
-                  ),
-                }}
-                onChange={(e) => {
-                  setFilter(e.target.value);
-                }}
-                variant="standard"
-              />
+            <Grid item xs={12} className={classes.searchField}>
+              <span className={classes.fieldLabel}>Assign Policies</span>
+
+              <div className={classes.filterBox}>
+                <SearchBox
+                  placeholder="Filter by Policy"
+                  onChange={(value) => {
+                    setFilter(value);
+                  }}
+                />
+              </div>
            </Grid>
            <Grid item xs={12} className={classes.tableBlock}>
              <TableWrapper
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -22,7 +22,11 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  modalBasic,
+  spacingUtils,
+  tableStyles,
+} from "../Common/FormComponents/common/styleLibrary";
 import { User } from "../Users/types";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -43,8 +47,17 @@ interface ISetPolicyProps {
 const styles = (theme: Theme) =>
  createStyles({
    ...modalBasic,
+    ...spacingUtils,
+    tableBlock: {
+      ...tableStyles.tableBlock,
+      marginTop: 15,
+    },
    buttonContainer: {
      textAlign: "right",
+      marginTop: ".9rem",
+    },
+    predefinedTitle: {
+      fontWeight: "normal",
    },
  });

@@ -137,32 +150,34 @@ const SetPolicy = ({
    >
      <Grid item xs={12}>
        <PredefinedList
+          classes={classes}
          label={`Selected ${selectedGroup !== null ? "Group" : "User"}`}
          content={selectedGroup !== null ? selectedGroup : userName}
        />
      </Grid>
      <Grid item xs={12}>
        <PredefinedList
+          classes={classes}
          label={"Current Policy"}
          content={actualPolicy.join(", ")}
        />
      </Grid>
-      <PolicySelectors
-        selectedPolicy={selectedPolicy}
-        setSelectedPolicy={setSelectedPolicy}
-      />
-      <Grid item xs={12}>
-        <br />
-      </Grid>
+      <div className={classes.tableBlock}>
+        <PolicySelectors
+          selectedPolicy={selectedPolicy}
+          setSelectedPolicy={setSelectedPolicy}
+        />
+      </div>
      <Grid item xs={12} className={classes.buttonContainer}>
-        <button
+        <Button
          type="button"
+          variant="outlined"
          color="primary"
-          className={classes.clearButton}
+          className={classes.spacerRight}
          onClick={resetSelection}
        >
          Reset
-        </button>
+        </Button>
        <Button
          type="button"
          variant="contained"
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -21,7 +21,11 @@ import { Button, LinearProgress, Tab, Tabs } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  formFieldStyles,
+  modalBasic,
+  spacingUtils,
+} from "../Common/FormComponents/common/styleLibrary";
 import { User } from "./types";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -32,6 +36,7 @@ import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWr
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
 import PolicySelectors from "../Policies/PolicySelectors";
+import { TabPanel } from "../../shared/tabs";

 const styles = (theme: Theme) =>
  createStyles({
@@ -43,7 +48,13 @@ const styles = (theme: Theme) =>
    },
    buttonContainer: {
      textAlign: "right",
+      marginTop: ".9rem",
    },
+    tabsHeader: {
+      marginBottom: "1rem",
+    },
+    ...formFieldStyles,
+    ...spacingUtils,
    ...modalBasic,
  });

@@ -202,17 +213,19 @@ const AddUser = ({
          }}
        >
          <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              <InputBoxWrapper
-                id="accesskey-input"
-                name="accesskey-input"
-                label="Access Key"
-                value={accessKey}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setAccessKey(e.target.value);
-                }}
-                disabled={selectedUser !== null}
-              />
+            <Grid item xs={12}>
+              <div className={classes.formFieldRow}>
+                <InputBoxWrapper
+                  id="accesskey-input"
+                  name="accesskey-input"
+                  label="Access Key"
+                  value={accessKey}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setAccessKey(e.target.value);
+                  }}
+                  disabled={selectedUser !== null}
+                />
+              </div>

              {selectedUser !== null ? (
                <PredefinedList
@@ -220,20 +233,23 @@ const AddUser = ({
                  content={currentGroups.join(", ")}
                />
              ) : (
-                <InputBoxWrapper
-                  id="standard-multiline-static"
-                  name="standard-multiline-static"
-                  label="Secret Key"
-                  type="password"
-                  value={secretKey}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setSecretKey(e.target.value);
-                  }}
-                  autoComplete="current-password"
-                />
+                <div className={classes.formFieldRow}>
+                  <InputBoxWrapper
+                    id="standard-multiline-static"
+                    name="standard-multiline-static"
+                    label="Secret Key"
+                    type="password"
+                    value={secretKey}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                      setSecretKey(e.target.value);
+                    }}
+                    autoComplete="current-password"
+                  />
+                </div>
              )}
-              <Grid item xs={12}>
+              <Grid item xs={12} className={classes.tabsHeader}>
                <Tabs
+                  value={currenTab}
                  onChange={(e, nv) => {
                    setCurrenTab(nv);
                  }}
@@ -242,15 +258,15 @@ const AddUser = ({
                  <Tab label="Groups" />
                </Tabs>
              </Grid>
-              {currenTab === 0 && (
+              <TabPanel value={currenTab} index={0}>
                <Grid item xs={12}>
                  <PolicySelectors
                    selectedPolicy={selectedPolicies}
                    setSelectedPolicy={setSelectedPolicies}
                  />
                </Grid>
-              )}
-              {currenTab === 1 && (
+              </TabPanel>
+              <TabPanel value={currenTab} index={1}>
                <Grid item xs={12}>
                  <GroupsSelectors
                    selectedGroups={selectedGroups}
@@ -259,19 +275,25 @@ const AddUser = ({
                    }}
                  />
                </Grid>
+              </TabPanel>
+
+              {addLoading && (
+                <Grid item xs={12}>
+                  <LinearProgress />
+                </Grid>
              )}
            </Grid>
            <Grid item xs={12} className={classes.buttonContainer}>
-              <button
+              <Button
                type="button"
+                variant="outlined"
                color="primary"
-                className={classes.clearButton}
-                onClick={() => {
-                  resetForm();
-                }}
+                className={classes.spacerRight}
+                onClick={resetForm}
              >
                Clear
-              </button>
+              </Button>
+
              <Button
                type="submit"
                variant="contained"
@@ -281,11 +303,6 @@ const AddUser = ({
                Save
              </Button>
            </Grid>
-            {addLoading && (
-              <Grid item xs={12}>
-                <LinearProgress />
-              </Grid>
-            )}
          </Grid>
        </form>
      </React.Fragment>
--- a/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
+++ b/portal-ui/src/screens/Console/Users/ChangeUserGroups.tsx
@@ -21,7 +21,10 @@ import { Button, LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
+import {
+  modalBasic,
+  spacingUtils,
+} from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
@@ -39,6 +42,7 @@ const styles = (theme: Theme) =>
    buttonContainer: {
      textAlign: "right",
    },
+    ...spacingUtils,
    ...modalBasic,
  });

@@ -163,26 +167,25 @@ const ChangeUserGroups = ({
        >
          <Grid container>
            <Grid item xs={12} className={classes.formScrollable}>
-              <Grid item xs={12}>
-                <GroupsSelectors
-                  selectedGroups={selectedGroups}
-                  setSelectedGroups={(elements: string[]) => {
-                    setSelectedGroups(elements);
-                  }}
-                />
-              </Grid>
+              <GroupsSelectors
+                classes={classes}
+                selectedGroups={selectedGroups}
+                setSelectedGroups={(elements: string[]) => {
+                  setSelectedGroups(elements);
+                }}
+              />
            </Grid>
            <Grid item xs={12} className={classes.buttonContainer}>
-              <button
+              <Button
                type="button"
+                variant="outlined"
                color="primary"
-                className={classes.clearButton}
-                onClick={() => {
-                  resetForm();
-                }}
+                className={classes.spacerRight}
+                onClick={resetForm}
              >
                Clear
-              </button>
+              </Button>
+
              <Button
                type="submit"
                variant="contained"
--- a/portal-ui/src/screens/Console/Users/DeleteUser.tsx
+++ b/portal-ui/src/screens/Console/Users/DeleteUser.tsx
@@ -29,15 +29,28 @@ import api from "../../../common/api";
 import { User, UsersList } from "./types";
 import { setErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import { deleteDialogStyles } from "../Common/FormComponents/common/styleLibrary";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import withStyles from "@mui/styles/withStyles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...deleteDialogStyles,
+  });

 interface IDeleteUserProps {
  closeDeleteModalAndRefresh: (refresh: boolean) => void;
  deleteOpen: boolean;
  selectedUser: User | null;
  setErrorSnackMessage: typeof setErrorSnackMessage;
+  classes: any;
 }

 const DeleteUser = ({
+  classes,
  closeDeleteModalAndRefresh,
  deleteOpen,
  selectedUser,
@@ -81,18 +94,39 @@ const DeleteUser = ({
      onClose={() => {
        closeDeleteModalAndRefresh(false);
      }}
+      classes={classes}
+      className={classes.root}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
-      <DialogTitle id="alert-dialog-title">Delete User</DialogTitle>
+      <DialogTitle id="alert-dialog-title" className={classes.title}>
+        <div className={classes.titleText}>Delete User</div>
+        <div className={classes.closeContainer}>
+          <IconButton
+            aria-label="close"
+            className={classes.closeButton}
+            onClick={() => {
+              closeDeleteModalAndRefresh(true);
+            }}
+            disableRipple
+            size="small"
+          >
+            <CloseIcon />
+          </IconButton>
+        </div>
+      </DialogTitle>
+
      <DialogContent>
        {deleteLoading && <LinearProgress />}
        <DialogContentText id="alert-dialog-description">
-          Are you sure you want to delete user <b>{selectedUser.accessKey}</b>?
+          Are you sure you want to delete user <br />
+          <b>{selectedUser.accessKey}</b>?
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button
+          type="button"
+          variant="outlined"
          onClick={() => {
            closeDeleteModalAndRefresh(false);
          }}
@@ -101,10 +135,13 @@ const DeleteUser = ({
        >
          Cancel
        </Button>
+
        <Button
          onClick={() => {
            removeRecord();
          }}
+          type="button"
+          variant="outlined"
          color="secondary"
          autoFocus
        >
@@ -121,4 +158,4 @@ const mapDispatchToProps = {

 const connector = connect(null, mapDispatchToProps);

-export default connector(DeleteUser);
+export default withStyles(styles)(connector(DeleteUser));
--- a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
+++ b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
@@ -22,20 +22,19 @@ import withStyles from "@mui/styles/withStyles";
 import { LinearProgress } from "@mui/material";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
-import InputAdornment from "@mui/material/InputAdornment";
-import TextField from "@mui/material/TextField";

 import { stringSort } from "../../../utils/sortFunctions";
 import { GroupsList } from "../Groups/types";
 import {
  actionsTray,
  selectorsCommon,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
 import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
-import SearchIcon from "../../../icons/SearchIcon";
+import SearchBox from "../Common/SearchBox";

 interface IGroupsProps {
  classes: any;
@@ -46,66 +45,21 @@ interface IGroupsProps {

 const styles = (theme: Theme) =>
  createStyles({
-    seeMore: {
-      marginTop: theme.spacing(3),
-    },
-    paper: {
-      display: "flex",
-      overflow: "auto",
-      flexDirection: "column",
-      paddingTop: 15,
-      boxShadow: "none",
-    },
-    addSideBar: {
-      width: "320px",
-      padding: "20px",
-    },
-    tableToolbar: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(0),
-    },
-    wrapCell: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    minTableHeader: {
-      color: "#393939",
-      "& tr": {
-        "& th": {
-          fontWeight: "bold",
-        },
-      },
-    },
    noFound: {
      textAlign: "center",
      padding: "10px 0",
    },
-    tableContainer: {
-      maxHeight: 200,
-    },
-    stickyHeader: {
-      backgroundColor: "#fff",
-    },
    actionsTitle: {
      fontWeight: 600,
      color: "#000",
      fontSize: 16,
      alignSelf: "center",
    },
-    tableBlock: {
-      marginTop: 15,
-    },
-    filterField: {
-      width: 375,
-      fontWeight: 600,
-      "& .input": {
-        "&::placeholder": {
-          fontWeight: 600,
-          color: "#000",
-        },
-      },
+    searchBox: {
+      flex: 1,
+      marginLeft: "2rem",
    },
+    ...tableStyles,
    ...actionsTray,
    ...selectorsCommon,
  });
@@ -182,24 +136,15 @@ const GroupsSelectors = ({
        {records !== null && records.length > 0 ? (
          <React.Fragment>
            <Grid item xs={12} className={classes.actionsTray}>
-              <span className={classes.actionsTitle}>Assign Groups</span>
-              <TextField
-                placeholder="Filter by Group"
-                className={classes.filterField}
-                id="search-resource"
-                label=""
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <SearchIcon />
-                    </InputAdornment>
-                  ),
-                }}
-                onChange={(e) => {
-                  setFilter(e.target.value);
-                }}
-                variant="standard"
-              />
+              <label className={classes.actionsTitle}>Assign Groups</label>
+
+              <div className={classes.searchBox}>
+                <SearchBox
+                  placeholder="Filter Groups"
+                  adornmentPosition="end"
+                  onChange={setFilter}
+                />
+              </div>
            </Grid>
            <Grid item xs={12} className={classes.tableBlock}>
              <TableWrapper
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -20,13 +20,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import api from "../../../common/api";
-import {
-  Button,
-  Grid,
-  InputAdornment,
-  LinearProgress,
-  TextField,
-} from "@mui/material";
+import { Button, Grid, LinearProgress } from "@mui/material";
 import GroupIcon from "@mui/icons-material/Group";
 import { User, UsersList } from "./types";
 import { usersSort } from "../../../utils/sortFunctions";
@@ -35,6 +29,7 @@ import {
  actionsTray,
  containerForHeader,
  searchField,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { setErrorSnackMessage } from "../../../actions";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -44,11 +39,11 @@ import AddToGroup from "./BulkAddToGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import SetPolicy from "../Policies/SetPolicy";
 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/AButton";
 import PageLayout from "../Common/Layout/PageLayout";
+import SearchBox from "../Common/SearchBox";

 const styles = (theme: Theme) =>
  createStyles({
@@ -84,6 +79,12 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
+    searchField: {
+      ...searchField.searchField,
+      marginRight: "auto",
+      maxWidth: 380,
+    },
+    ...tableStyles,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -229,23 +230,10 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
      <PageHeader label={"Users"} />
      <PageLayout>
        <Grid item xs={12} className={classes.actionsTray}>
-          <TextField
-            placeholder="Search Users"
-            className={classes.searchField}
-            id="search-resource"
-            label=""
-            InputProps={{
-              disableUnderline: true,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-            onChange={(e) => {
-              setFilter(e.target.value);
-            }}
-            variant="standard"
+          <SearchBox
+            placeholder={"Search Groups"}
+            onChange={setFilter}
+            classes={classes}
          />
          <Button
            variant="outlined"
@@ -281,7 +269,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
          <Fragment>
            {records.length > 0 && (
              <Fragment>
-                <Grid item xs={12}>
+                <Grid item xs={12} className={classes.tableBlock}>
                  <TableWrapper
                    itemActions={tableActions}
                    columns={[{ label: "Access Key", elementKey: "accessKey" }]}
--- a/portal-ui/src/screens/Console/Users/SetUserPolicies.tsx
+++ b/portal-ui/src/screens/Console/Users/SetUserPolicies.tsx
@@ -58,6 +58,7 @@ const styles = (theme: Theme) =>
    ...modalBasic,
    buttonContainer: {
      textAlign: "right",
+      marginTop: ".9rem",
    },
  });

--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -22,17 +22,13 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Button, Grid } from "@mui/material";
-import {
-  AddIcon,
-  DeleteIcon,
-  IAMPoliciesIcon,
-  UsersIcon,
-} from "../../../icons";
+import { AddIcon, IAMPoliciesIcon, TrashIcon, UsersIcon } from "../../../icons";
 import {
  setErrorSnackMessage,
  setModalErrorSnackMessage,
 } from "../../../actions";
 import {
+  tableStyles,
  actionsTray,
  containerForHeader,
  searchField,
@@ -138,6 +134,7 @@ const styles = (theme: Theme) =>
    },
    ...actionsTray,
    ...searchField,
+    ...tableStyles,
    ...containerForHeader(theme.spacing(4)),
  });

@@ -319,15 +316,16 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                  }}
                  switchOnly
                />
+
                <BoxIconButton
-                  tooltip={"Delete User"}
                  color="primary"
                  aria-label="Delete User"
                  onClick={deleteUser}
                  size="large"
                >
-                  <DeleteIcon />
+                  <TrashIcon />
                </BoxIconButton>
+
                <BoxIconButton
                  tooltip={"Change Password"}
                  color="primary"
@@ -364,14 +362,16 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                      Add to Groups
                    </Button>
                  </div>
-                  <TableWrapper
-                    // itemActions={userTableActions}
-                    columns={[{ label: "Name", elementKey: "group" }]}
-                    isLoading={loading}
-                    records={currentGroups}
-                    entityName="Groups"
-                    idField="group"
-                  />
+                  <div className={classes.tableBlock}>
+                    <TableWrapper
+                      // itemActions={userTableActions}
+                      columns={[{ label: "Name", elementKey: "group" }]}
+                      isLoading={loading}
+                      records={currentGroups}
+                      entityName="Groups"
+                      idField="group"
+                    />
+                  </div>
                </React.Fragment>
              ),
            }}
@@ -407,21 +407,23 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                      Assign Policies
                    </Button>
                  </div>
-                  <TableWrapper
-                    itemActions={[
-                      {
-                        type: "view",
-                        onClick: (policy: IPolicyItem) => {
-                          history.push(`/policies/${policy.policy}`);
+                  <div className={classes.tableBlock}>
+                    <TableWrapper
+                      itemActions={[
+                        {
+                          type: "view",
+                          onClick: (policy: IPolicyItem) => {
+                            history.push(`/policies/${policy.policy}`);
+                          },
                        },
-                      },
-                    ]}
-                    columns={[{ label: "Name", elementKey: "policy" }]}
-                    isLoading={loading}
-                    records={currentPolicies}
-                    entityName="Policies"
-                    idField="policy"
-                  />
+                      ]}
+                      columns={[{ label: "Name", elementKey: "policy" }]}
+                      isLoading={loading}
+                      records={currentPolicies}
+                      entityName="Policies"
+                      idField="policy"
+                    />
+                  </div>
                </React.Fragment>
              ),
            }}
--- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
+++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
@@ -22,6 +22,7 @@ import withStyles from "@mui/styles/withStyles";
 import {
  actionsTray,
  searchField,
+  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
@@ -51,6 +52,7 @@ const styles = (theme: Theme) =>
    actionsTray: {
      ...actionsTray.actionsTray,
    },
+    ...tableStyles,
  });

 const UserServiceAccountsPanel = ({
@@ -178,14 +180,16 @@ const UserServiceAccountsPanel = ({
          Create service account
        </Button>
      </div>
-      <TableWrapper
-        isLoading={loading}
-        records={records}
-        entityName={"Service Accounts"}
-        idField={""}
-        columns={[{ label: "Service Account", elementKey: "" }]}
-        itemActions={tableActions}
-      />
+      <div className={classes.tableBlock}>
+        <TableWrapper
+          isLoading={loading}
+          records={records}
+          entityName={"Service Accounts"}
+          idField={""}
+          columns={[{ label: "Service Account", elementKey: "" }]}
+          itemActions={tableActions}
+        />
+      </div>
    </React.Fragment>
  );
 };