Changed buttons & search boxes styles (#318)

bexsoft · Benjamin Perez · web-flow · commit 850fd3e37138 · 2020-10-06T21:37:13.000-07:00
Co-authored-by: Benjamin Perez &lt;benjamin@bexsoft.net&gt;
diff --git 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)),
   });
 
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -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)),
   });
 
diff --git 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,
+      },
+    },
+  },
+};
diff --git 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";
diff --git 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",
diff --git 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)),
   });
 
diff --git 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)),
   });
 
diff --git 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)),
   });
 
diff --git 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,25 +66,15 @@ 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,
     },
     subTitleLabel: {
       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}
diff --git 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)),
   });
 
diff --git 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)),
   });
 
diff --git 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)),
   });
 
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
diff --git a/portal-ui/src/screens/Console/Users/Users.tsx b/portal-ui/src/screens/Console/Users/Users.tsx
diff --git a/portal-ui/src/theme/main.ts b/portal-ui/src/theme/main.ts

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,5 @@ export interface IIcon {`
`2`	`2`	`active: boolean;`
`3`	`3`	`}`
`4`	`4`
`5`		`-export const unSelected = "#adadad";`
`6`		`-export const selected = "#201763";`
	`5`	`+export const unSelected = "#081C42";`
	`6`	`+export const selected = "#081C42";`