Changed buttons & search boxes styles (#318)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
2020-10-06 23:37:13 -05:00
parent 6d8f1c439e
commit 850fd3e371
15 changed files with 200 additions and 213 deletions
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -35,7 +35,11 @@ import { AppState } from "../../../../store";
 import { connect } from "react-redux";
 import { logMessageReceived, logResetMessages } from "../../Logs/actions";
 import { addBucketOpen, addBucketReset } from "../actions";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";

 const styles = (theme: Theme) =>
@@ -68,18 +72,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -30,7 +30,11 @@ import { CreateIcon } from "../../.././../../../icons";
 import { niceBytes } from "../../../../../../common/utils";
 import Moment from "react-moment";
 import DeleteObject from "./DeleteObject";
-import { containerForHeader } from "../../../../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../../../Common/PageHeader/PageHeader";

 const styles = (theme: Theme) =>
@@ -63,18 +67,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -75,8 +75,8 @@ export const checkboxIcons = {
  unCheckedIcon: { ...checkBoxBasic, border: "1px solid #d0d0d0" },
  checkedIcon: {
    ...checkBoxBasic,
-    border: "1px solid #201763",
-    backgroundColor: "#201763",
+    border: "1px solid #081C42",
+    backgroundColor: "#081C42",
  },
 };

@@ -95,3 +95,35 @@ export const containerForHeader = (bottomSpacing: any) => ({
    },
  },
 });
+
+export const actionsTray = {
+  actionsTray: {
+    display: "flex",
+    justifyContent: "space-between",
+    "& button": {
+      flexGrow: 0,
+      marginLeft: 15,
+    },
+  },
+};
+
+export const searchField = {
+  searchField: {
+    flexGrow: 1,
+    marginRight: 30,
+    background: "#FFFFFF",
+    borderRadius: 5,
+    border: "#EAEDEE 1px solid",
+    display: "flex",
+    justifyContent: "center",
+    padding: "0 16px",
+    "& input": {
+      fontSize: 14,
+      color: "#000",
+      "&::placeholder": {
+        color: "#393939",
+        opacity: 1,
+      },
+    },
+  },
+};
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableActionIcons/common.ts
@@ -2,5 +2,5 @@ export interface IIcon {
  active: boolean;
 }

-export const unSelected = "#adadad";
-export const selected = "#201763";
+export const unSelected = "#081C42";
+export const selected = "#081C42";
--- a/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TableWrapper/TableWrapper.tsx
@@ -119,7 +119,7 @@ const styles = (theme: Theme) =>
    },
    rowSelected: {
      ...rowText,
-      color: "#201763",
+      color: "#081C42",
    },
    paginatorContainer: {
      display: "flex",
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx
@@ -27,7 +27,11 @@ import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import { configurationElements } from "../utils";
 import { IConfigurationElement } from "../types";
 import EditConfiguration from "../CustomForms/EditConfiguration";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";

 interface IListConfiguration {
@@ -45,21 +49,11 @@ const styles = (theme: Theme) =>
    keyName: {
      marginLeft: 5,
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
    iconText: {
      lineHeight: "24px",
    },
+    ...searchField,
+    ...actionsTray,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -31,7 +31,11 @@ import AddGroup from "../Groups/AddGroup";
 import DeleteGroup from "./DeleteGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import SetPolicy from "../Policies/SetPolicy";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

 interface IGroupsProps {
@@ -74,18 +78,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndopoints/ListNotificationEndpoints.tsx
@@ -35,7 +35,11 @@ import api from "../../../common/api";
 import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import AddNotificationEndpoint from "./AddNotificationEndpoint";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

 interface IListNotificationEndpoints {
@@ -53,21 +57,11 @@ const styles = (theme: Theme) =>
    keyName: {
      marginLeft: 5,
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
    iconText: {
      lineHeight: "24px",
    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -31,6 +31,10 @@ import { Bucket, BucketList } from "../Buckets/types";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
 import history from "../../../history";
+import {
+  actionsTray,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";

 const styles = (theme: Theme) =>
  createStyles({
@@ -62,18 +66,6 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
    usedSpaceCol: {
      width: 150,
    },
@@ -81,6 +73,8 @@ const styles = (theme: Theme) =>
      alignItems: "center",
      display: "flex",
    },
+    ...actionsTray,
+    ...searchField,
  });

 interface IBrowseBucketsProps {
@@ -162,10 +156,10 @@ const BrowseBuckets = ({ classes }: IBrowseBucketsProps) => {
        />
      )}
      <Grid container>
-        <Grid item xs={6} className={classes.subTitleLabel}>
+        <Grid item xs={2} className={classes.subTitleLabel}>
          <Typography variant="h6">Buckets</Typography>
        </Grid>
-        <Grid item xs={6} className={classes.actionsTray}>
+        <Grid item xs={10} className={classes.actionsTray}>
          <TextField
            placeholder="Search Buckets"
            className={classes.searchField}
--- a/portal-ui/src/screens/Console/Policies/Policies.tsx
+++ b/portal-ui/src/screens/Console/Policies/Policies.tsx
@@ -30,7 +30,11 @@ import AddPolicy from "./AddPolicy";
 import DeletePolicy from "./DeletePolicy";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import api from "../../../common/api";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

 const styles = (theme: Theme) =>
@@ -63,18 +67,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx
+++ b/portal-ui/src/screens/Console/RemoteBuckets/RemoteBuckets.tsx
@@ -31,7 +31,11 @@ import { MinTablePaginationActions } from "../../../common/MinTablePaginationAct
 import { CreateIcon } from "../../../icons";
 import { IRemoteBucket, IRemoteBucketsResponse } from "./types";
 import DeleteRemoteBucket from "./DeleteRemoteBucket";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

 const styles = (theme: Theme) =>
@@ -64,18 +68,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx
+++ b/portal-ui/src/screens/Console/ServiceAccounts/ServiceAccounts.tsx
@@ -32,7 +32,11 @@ import SearchIcon from "@material-ui/icons/Search";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import { stringSort } from "../../../utils/sortFunctions";
 import PageHeader from "../Common/PageHeader/PageHeader";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";

 const styles = (theme: Theme) =>
  createStyles({
@@ -75,18 +79,8 @@ const styles = (theme: Theme) =>
    iconRoot: {
      textAlign: "center",
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -34,6 +34,8 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
 import CredentialsPrompt from "../../Common/CredentialsPrompt/CredentialsPrompt";
 import history from "../../../../history";
 import RefreshIcon from "@material-ui/icons/Refresh";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import PageHeader from "../../Common/PageHeader/PageHeader";

 interface ITenantsList {
  classes: any;
@@ -81,6 +83,7 @@ const styles = (theme: Theme) =>
      borderRadius: 5,
      boxShadow: "0px 3px 6px #00000012",
    },
+    ...containerForHeader(theme.spacing(4)),
  });

 const ListTenants = ({ classes }: ITenantsList) => {
@@ -245,84 +248,81 @@ const ListTenants = ({ classes }: ITenantsList) => {
          entity="Tenant"
        />
      )}
+      <PageHeader label={"Users"} />
      <Grid container>
-        <Grid item xs={12}>
-          <Typography variant="h6">Tenants</Typography>
-        </Grid>
-        <Grid item xs={12}>
-          <br />
-        </Grid>
-        <Grid item xs={12} className={classes.actionsTray}>
-          <IconButton
-            color="primary"
-            aria-label="Refresh Tenant List"
-            component="span"
-            onClick={() => {
-              setIsLoading(true);
-            }}
-          >
-            <RefreshIcon />
-          </IconButton>
+        <Grid item xs={12} className={classes.container}>
+          <Grid item xs={12} className={classes.actionsTray}>
+            <IconButton
+              color="primary"
+              aria-label="Refresh Tenant List"
+              component="span"
+              onClick={() => {
+                setIsLoading(true);
+              }}
+            >
+              <RefreshIcon />
+            </IconButton>

-          <TextField
-            placeholder="Search Tenants"
-            className={classes.searchField}
-            id="search-resource"
-            label=""
-            onChange={(val) => {
-              setFilterTenants(val.target.value);
-            }}
-            InputProps={{
-              disableUnderline: true,
-              startAdornment: (
-                <InputAdornment position="start">
-                  <SearchIcon />
-                </InputAdornment>
-              ),
-            }}
-          />
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<CreateIcon />}
-            onClick={() => {
-              setCreateTenantOpen(true);
-            }}
-          >
-            Create Tenant
-          </Button>
-        </Grid>
-        <Grid item xs={12}>
-          <br />
-        </Grid>
-        <Grid item xs={12}>
-          <TableWrapper
-            itemActions={tableActions}
-            columns={[
-              { label: "Name", elementKey: "name" },
-              { label: "Capacity", elementKey: "capacity" },
-              { label: "# of Zones", elementKey: "zone_count" },
-              { label: "State", elementKey: "currentState" },
-            ]}
-            isLoading={isLoading}
-            records={filteredRecords}
-            entityName="Tenants"
-            idField="name"
-            paginatorConfig={{
-              rowsPerPageOptions: [5, 10, 25],
-              colSpan: 3,
-              count: filteredRecords.length,
-              rowsPerPage: rowsPerPage,
-              page: page,
-              SelectProps: {
-                inputProps: { "aria-label": "rows per page" },
-                native: true,
-              },
-              onChangePage: handleChangePage,
-              onChangeRowsPerPage: handleChangeRowsPerPage,
-              ActionsComponent: MinTablePaginationActions,
-            }}
-          />
+            <TextField
+              placeholder="Search Tenants"
+              className={classes.searchField}
+              id="search-resource"
+              label=""
+              onChange={(val) => {
+                setFilterTenants(val.target.value);
+              }}
+              InputProps={{
+                disableUnderline: true,
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+                ),
+              }}
+            />
+            <Button
+              variant="contained"
+              color="primary"
+              startIcon={<CreateIcon />}
+              onClick={() => {
+                setCreateTenantOpen(true);
+              }}
+            >
+              Create Tenant
+            </Button>
+          </Grid>
+          <Grid item xs={12}>
+            <br />
+          </Grid>
+          <Grid item xs={12}>
+            <TableWrapper
+              itemActions={tableActions}
+              columns={[
+                { label: "Name", elementKey: "name" },
+                { label: "Capacity", elementKey: "capacity" },
+                { label: "# of Zones", elementKey: "zone_count" },
+                { label: "State", elementKey: "currentState" },
+              ]}
+              isLoading={isLoading}
+              records={filteredRecords}
+              entityName="Tenants"
+              idField="name"
+              paginatorConfig={{
+                rowsPerPageOptions: [5, 10, 25],
+                colSpan: 3,
+                count: filteredRecords.length,
+                rowsPerPage: rowsPerPage,
+                page: page,
+                SelectProps: {
+                  inputProps: { "aria-label": "rows per page" },
+                  native: true,
+                },
+                onChangePage: handleChangePage,
+                onChangeRowsPerPage: handleChangeRowsPerPage,
+                ActionsComponent: MinTablePaginationActions,
+              }}
+            />
+          </Grid>
        </Grid>
      </Grid>
    </React.Fragment>
--- a/portal-ui/src/screens/Console/Users/Users.tsx
+++ b/portal-ui/src/screens/Console/Users/Users.tsx
@@ -36,7 +36,11 @@ import AddToGroup from "./AddToGroup";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import DescriptionIcon from "@material-ui/icons/Description";
 import SetPolicy from "../Policies/SetPolicy";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
+import {
+  actionsTray,
+  containerForHeader,
+  searchField,
+} from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";

 const styles = (theme: Theme) =>
@@ -74,18 +78,8 @@ const styles = (theme: Theme) =>
        },
      },
    },
-    actionsTray: {
-      textAlign: "right",
-      "& button": {
-        marginLeft: 10,
-      },
-    },
-    searchField: {
-      background: "#FFFFFF",
-      padding: 12,
-      borderRadius: 5,
-      boxShadow: "0px 3px 6px #00000012",
-    },
+    ...actionsTray,
+    ...searchField,
    ...containerForHeader(theme.spacing(4)),
  });

--- a/portal-ui/src/theme/main.ts
+++ b/portal-ui/src/theme/main.ts
@@ -50,7 +50,7 @@ const theme = createMuiTheme({
    },
    h4: {
      fontWeight: "bold",
-      color: "#201763",
+      color: "#081C42",
    },
    h5: {
      fontWeight: "bold",
@@ -61,6 +61,21 @@ const theme = createMuiTheme({
      color: "#000000",
    },
  },
+  overrides: {
+    MuiButton: {
+      root: {
+        borderRadius: 3,
+        color: "white",
+        height: 40,
+        padding: "0 20px",
+        fontSize: 14,
+        fontWeight: 500,
+        "& .MuiSvgIcon-root": {
+          maxHeight: 18,
+        },
+      },
+    },
+  },
 });

 export default theme;