Small Styling Adjustments. Lists style. (#1870)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
2022-04-20 12:41:08 -07:00
parent 3291b3ca45
commit 3e13e6db98
10 changed files with 237 additions and 165 deletions
--- a/portal-ui/src/index.tsx
+++ b/portal-ui/src/index.tsx
@@ -23,7 +23,7 @@ import * as serviceWorker from "./serviceWorker";
 import {
  StyledEngineProvider,
  Theme,
-  ThemeProvider,
+  ThemeProvider
 } from "@mui/material/styles";
 import withStyles from "@mui/styles/withStyles";
 import "react-virtualized/styles.css";
@@ -35,7 +35,8 @@ import theme from "./theme/main";

 declare module "@mui/styles/defaultTheme" {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface DefaultTheme extends Theme {}
+  interface DefaultTheme extends Theme {
+  }
 }

 const GlobalCss = withStyles({
@@ -43,62 +44,87 @@ const GlobalCss = withStyles({
  "@global": {
    body: {
      height: "100vh",
-      width: "100vw",
+      width: "100vw"
    },
    "#root": {
      height: "100%",
      width: "100%",
      display: "flex",
      flexFlow: "column",
-      alignItems: "stretch",
+      alignItems: "stretch"
    },
    ".min-icon": {
      // height: 26,
-      width: 26,
+      width: 26
    },
    ".MuiButton-endIcon": {
      "& .min-icon": {
        // height: 26,
-        width: 16,
-      },
+        width: 16
+      }
    },
    // You should target [class*="MuiButton-root"] instead if you nest themes.
    ".MuiButton-root": {
-      height: 38,
+      height: 38
    },
    ".MuiButton-contained": {
      fontSize: "14px",
      textTransform: "capitalize",
      padding: "15px 25px 15px 25px",
-      borderRadius: 3,
+      borderRadius: 3
    },
    ".MuiButton-sizeSmall": {
      padding: "4px 10px",
-      fontSize: "0.8125rem",
+      fontSize: "0.8125rem"
    },
    ".MuiTableCell-head": {
      borderRadius: "3px 3px 0px 0px",
-      fontSize: 13,
+      fontSize: 13
    },
    ".MuiPaper-root": {
-      borderRadius: 3,
+      borderRadius: 3
    },
    ".MuiDrawer-paperAnchorDockedLeft": {
-      borderRight: 0,
+      borderRight: 0
    },
    ".MuiDrawer-root": {
      "& .MuiPaper-root": {
-        borderRadius: 0,
-      },
+        borderRadius: 0
+      }
    },
    hr: {
      borderTop: 0,
      borderLeft: 0,
      borderRight: 0,
      borderColor: "#999999",
-      backgroundColor: "transparent" as const,
+      backgroundColor: "transparent" as const
    },
-  },
+    ul: {
+      paddingLeft:20,
+      listStyle: "none", /* Remove default bullets */
+      "& li::before": {
+        content: '"￭"',
+        color: "#2781B0",
+        fontSize: 20,
+        display: "inline-block", /* Needed to add space between the bullet and the text */
+        width: "1em", /* Also needed for space (tweak if needed) */
+        marginLeft: "-1em", /* Also needed for space (tweak if needed) */
+
+      },
+      "& ul": {
+        listStyle: "none", /* Remove default bullets */
+        "& li::before": {
+          content: '"￮"',
+          color: "#2781B0",
+          fontSize: 20,
+          display: "inline-block", /* Needed to add space between the bullet and the text */
+          width: "1em", /* Also needed for space (tweak if needed) */
+          marginLeft: "-1em" /* Also needed for space (tweak if needed) */
+        }
+      },
+    },
+
+  }
 })(() => null);

 ReactDOM.render(
--- a/portal-ui/src/screens/Console/Common/ContentBox.tsx
+++ b/portal-ui/src/screens/Console/Common/ContentBox.tsx
@@ -0,0 +1,38 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { Box } from "@mui/material";
+
+type Props = {};
+
+const ContentBox: React.FC<Props> = ({ children }) => {
+  return (
+    <Box
+      sx={{
+        border: "1px solid #eaeaea",
+        padding: {
+          lg: "40px",
+          xs: "15px",
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default ContentBox;
--- a/portal-ui/src/screens/Console/Common/SectionTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/SectionTitle.tsx
@@ -20,12 +20,14 @@ import Grid from "@mui/material/Grid";
 type Props = {
  separator?: boolean;
  actions?: React.ReactNode;
+  icon?: React.ReactNode;
 };

 const SectionTitle: React.FC<Props> = ({
  children,
  separator = true,
  actions,
+  icon,
 }) => {
  return (
    <Grid
@@ -43,7 +45,18 @@ const SectionTitle: React.FC<Props> = ({
            marginBottom: 10,
          }}
        >
-          {children}
+          {icon && (
+            <Grid
+              container
+              alignItems={"center"}
+              justifyContent={"flex-start"}
+              spacing={1}
+            >
+              <Grid item>{icon}</Grid>
+              <Grid item>{children}</Grid>
+            </Grid>
+          )}
+          {!icon && children}
        </h3>
      </Grid>
      {actions && <Grid item> {actions}</Grid>}
--- a/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
+++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
@@ -29,9 +29,9 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
 import BackLink from "../../../../common/BackLink";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import PageLayout from "../../Common/Layout/PageLayout";
-import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
 import HelpBox from "../../../../common/HelpBox";
 import history from "../../../../history";
+import SectionTitle from "../../Common/SectionTitle";

 type SiteInputRow = {
  name: string;
@@ -191,10 +191,6 @@ const AddReplicationSites = ({
        }
      />
      <PageLayout>
-        <ScreenTitle title={"Add Sites for Replication"} icon={ClustersIcon} />
-
-        {isSiteInfoLoading || isAdding ? <LinearProgress /> : null}
-
        <Box
          sx={{
            display: "grid",
@@ -204,9 +200,15 @@ const AddReplicationSites = ({
              md: "2fr 1.2fr",
              xs: "1fr",
            },
+            border: "1px solid #eaeaea",
          }}
        >
          <Box>
+            <SectionTitle icon={<ClustersIcon />}>
+              Add Sites for Replication
+            </SectionTitle>
+
+            {isSiteInfoLoading || isAdding ? <LinearProgress /> : null}
            <form
              noValidate
              autoComplete="off"
@@ -222,10 +224,11 @@ const AddReplicationSites = ({
                    display: "flex",
                    alignItems: "center",
                    fontSize: "12px",
+                    marginTop: 2,
                  }}
                >
                  <Box sx={{ fontWeight: 600 }}>Note:</Box>{" "}
-                  <Box sx={{ marginLeft: "8px" }}>
+                  <Box sx={{ marginLeft: 1 }}>
                    Access Key and Secret Key should be same on all sites.
                  </Box>
                </Box>
@@ -517,6 +520,7 @@ const AddReplicationSites = ({
                      borderRadius: "50%",
                      marginRight: "18px",
                      padding: "3px",
+                      paddingLeft: "2px",
                      "& .min-icon": {
                        height: "11px",
                        width: "11px",
@@ -569,28 +573,18 @@ const AddReplicationSites = ({
                  <Box>
                    The following changes are replicated to all other sites
                  </Box>
-                  <Box className="step-row">
-                    <div className="step-text">
-                      Creation and deletion of buckets and objects
-                    </div>
-                  </Box>
-                  <Box className="step-row">
-                    <div className="step-text">
+                  <ul>
+                    <li>Creation and deletion of buckets and objects</li>
+                    <li>
                      Creation and deletion of all IAM users, groups, policies
                      and their mappings to users or groups
-                    </div>
-                  </Box>
-                  <Box className="step-row">
-                    <div className="step-text">Creation of STS credentials</div>
-                  </Box>
-                  <Box className="step-row">
-                    <div className="step-text">
+                    </li>
+                    <li>Creation of STS credentials</li>
+                    <li>
                      Creation and deletion of service accounts (except those
                      owned by the root user)
-                    </div>
-                  </Box>
-                  <Box className="step-row">
-                    <div className="step-text">
+                    </li>
+                    <li>
                      Changes to Bucket features such as
                      <ul>
                        <li>Bucket Policies</li>
@@ -598,18 +592,16 @@ const AddReplicationSites = ({
                        <li>Bucket Object-Lock configurations</li>
                        <li>Bucket Encryption configuration</li>
                      </ul>
-                    </div>
-                  </Box>
+                    </li>

-                  <Box className="step-row">
-                    <div className="step-text">
+                    <li>
                      The following Bucket features will NOT be replicated
                      <ul>
                        <li>Bucket notification configuration</li>
                        <li>Bucket lifecycle (ILM) configuration</li>
                      </ul>
-                    </div>
-                  </Box>
+                    </li>
+                  </ul>
                </Box>
              </Fragment>
            }
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -23,6 +23,7 @@ import PageLayout from "../../Common/Layout/PageLayout";
 import { Box } from "@mui/material";
 import TierTypeCard from "./TierTypeCard";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
+import ContentBox from "../../Common/ContentBox";

 interface ITypeTiersConfig {
  history: any;
@@ -45,12 +46,7 @@ const TierTypeSelector = ({ history }: ITypeTiersConfig) => {
      />

      <PageLayout>
-        <Box
-          sx={{
-            border: "1px solid #eaeaea",
-            padding: "40px",
-          }}
-        >
+        <ContentBox>
          <div style={{ fontSize: 16, fontWeight: 600, paddingBottom: 15 }}>
            Select Tier Type
          </div>
@@ -78,7 +74,7 @@ const TierTypeSelector = ({ history }: ITypeTiersConfig) => {
              />
            ))}
          </Box>
-        </Box>
+        </ContentBox>
      </PageLayout>
    </Fragment>
  );
--- a/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
@@ -186,8 +186,8 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
          gap: "27px",
          marginBottom: "40px",
          marginTop: "40px",
-          marginLeft: "60px",
-          marginRight: "60px",
+          marginLeft: "40px",
+          marginRight: "40px",
        }}
      >
        <Box>
@@ -264,7 +264,7 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
                xs: "1fr",
              },
              gap: {
-                md: "40px",
+                md: "20px",
                xs: "20px",
              },
            }}
--- a/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
@@ -30,12 +30,12 @@ import {
  notifyMysql,
  notifyPostgres,
  removeEmptyFields,
+  servicesList,
 } from "./utils";
 import {
  modalBasic,
  settingsCommon,
 } from "../Common/FormComponents/common/styleLibrary";
-import { servicesList } from "./utils";
 import { ErrorResponseHandler } from "../../../common/types";

 import { IElementValue } from "../Configurations/types";
--- a/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/NotificationTypeSelector.tsx
@@ -28,6 +28,7 @@ import history from "../../../history";
 import BackLink from "../../../common/BackLink";
 import PageLayout from "../Common/Layout/PageLayout";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
+import ContentBox from "../Common/ContentBox";

 interface INotificationTypeSelector {
  classes: any;
@@ -56,33 +57,38 @@ const NotificationTypeSelector = ({ classes }: INotificationTypeSelector) => {
        actions={<React.Fragment />}
      />
      <PageLayout>
-        <div className={classes.iconContainer}>
-          {withLogos.map((item) => {
-            return (
-              <button
-                key={`icon-${item.targetTitle}`}
-                className={classes.lambdaNotif}
-                onClick={() => {
-                  history.push(
-                    `${IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD}/${item.actionTrigger}`
-                  );
-                }}
-              >
-                <div className={classes.lambdaNotifIcon}>
-                  <img
-                    src={item.logo}
-                    className={classes.logoButton}
-                    alt={item.targetTitle}
-                  />
-                </div>
+        <ContentBox>
+          <div style={{ fontSize: 16, fontWeight: 600, paddingBottom: 15 }}>
+            Select Target Type
+          </div>
+          <div className={classes.iconContainer}>
+            {withLogos.map((item) => {
+              return (
+                <button
+                  key={`icon-${item.targetTitle}`}
+                  className={classes.lambdaNotif}
+                  onClick={() => {
+                    history.push(
+                      `${IAM_PAGES.NOTIFICATIONS_ENDPOINTS_ADD}/${item.actionTrigger}`
+                    );
+                  }}
+                >
+                  <div className={classes.lambdaNotifIcon}>
+                    <img
+                      src={item.logo}
+                      className={classes.logoButton}
+                      alt={item.targetTitle}
+                    />
+                  </div>

-                <div className={classes.lambdaNotifTitle}>
-                  <b>{item.targetTitle}</b>
-                </div>
-              </button>
-            );
-          })}
-        </div>
+                  <div className={classes.lambdaNotifTitle}>
+                    <b>{item.targetTitle}</b>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </ContentBox>
      </PageLayout>
    </Fragment>
  );
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -28,7 +28,6 @@ import {
  actionsTray,
  containerForHeader,
  searchField,
-  tableStyles,
 } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";

@@ -44,8 +43,8 @@ import {
  IAM_SCOPES,
 } from "../../../common/SecureComponent/permissions";
 import {
-  SecureComponent,
  hasPermission,
+  SecureComponent,
 } from "../../../common/SecureComponent";
 import SearchBox from "../Common/SearchBox";

@@ -63,10 +62,6 @@ const styles = (theme: Theme) =>
      ...searchField.searchField,
      maxWidth: 380,
    },
-    tableBlock: {
-      ...tableStyles.tableBlock,
-      marginTop: 15,
-    },
    ...containerForHeader(theme.spacing(4)),
  });

@@ -198,80 +193,82 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
      )}
      <PageHeader label="IAM Policies" />
      <PageLayout className={classes.pageContainer}>
-        <Grid item xs={12} className={classes.actionsTray}>
-          <SearchBox
-            onChange={setFilterPolicies}
-            placeholder="Search Policies"
-            overrideClass={classes.searchField}
-            value={filterPolicies}
-          />
+        <Grid container spacing={1}>
+          <Grid item xs={12} className={classes.actionsTray}>
+            <SearchBox
+              onChange={setFilterPolicies}
+              placeholder="Search Policies"
+              overrideClass={classes.searchField}
+              value={filterPolicies}
+            />

-          <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
-            resource={CONSOLE_UI_RESOURCE}
-            errorProps={{ disabled: true }}
-          >
-            <RBIconButton
-              tooltip={"Create Policy"}
-              text={"Create Policy"}
-              variant="contained"
-              color="primary"
-              icon={<AddIcon />}
-              onClick={() => {
-                setAddScreenOpen(true);
-                setPolicyEdit(null);
-              }}
+            <SecureComponent
+              scopes={[IAM_SCOPES.ADMIN_CREATE_POLICY]}
+              resource={CONSOLE_UI_RESOURCE}
+              errorProps={{ disabled: true }}
+            >
+              <RBIconButton
+                tooltip={"Create Policy"}
+                text={"Create Policy"}
+                variant="contained"
+                color="primary"
+                icon={<AddIcon />}
+                onClick={() => {
+                  setAddScreenOpen(true);
+                  setPolicyEdit(null);
+                }}
+              />
+            </SecureComponent>
+          </Grid>
+          <Grid item xs={12} className={classes.tableBlock}>
+            <SecureComponent
+              scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
+              resource={CONSOLE_UI_RESOURCE}
+              errorProps={{ disabled: true }}
+            >
+              <TableWrapper
+                itemActions={tableActions}
+                columns={[{ label: "Name", elementKey: "name" }]}
+                isLoading={loading}
+                records={filteredRecords}
+                entityName="Policies"
+                idField="name"
+              />
+            </SecureComponent>
+          </Grid>
+          <Grid item xs={12}>
+            <HelpBox
+              title={"Learn more about IAM POLICIES"}
+              iconComponent={<IAMPoliciesIcon />}
+              help={
+                <Fragment>
+                  MinIO uses Policy-Based Access Control (PBAC) to define the
+                  authorized actions and resources to which an authenticated
+                  user has access. Each policy describes one or more actions and
+                  conditions that outline the permissions of a user or group of
+                  users.
+                  <br />
+                  <br />
+                  MinIO PBAC is built for compatibility with AWS IAM policy
+                  syntax, structure, and behavior. The MinIO documentation makes
+                  a best-effort to cover IAM-specific behavior and
+                  functionality. Consider deferring to the IAM documentation for
+                  more complete documentation on AWS IAM-specific topics.
+                  <br />
+                  <br />
+                  You can learn more at our{" "}
+                  <a
+                    href="https://docs.min.io/minio/baremetal/security/minio-identity-management/policy-based-access-control.html?ref=con"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    documentation
+                  </a>
+                  .
+                </Fragment>
+              }
            />
-          </SecureComponent>
-        </Grid>
-        <Grid item xs={12} className={classes.tableBlock}>
-          <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
-            resource={CONSOLE_UI_RESOURCE}
-            errorProps={{ disabled: true }}
-          >
-            <TableWrapper
-              itemActions={tableActions}
-              columns={[{ label: "Name", elementKey: "name" }]}
-              isLoading={loading}
-              records={filteredRecords}
-              entityName="Policies"
-              idField="name"
-            />
-          </SecureComponent>
-        </Grid>
-        <Grid item xs={12}>
-          <HelpBox
-            title={"Learn more about IAM POLICIES"}
-            iconComponent={<IAMPoliciesIcon />}
-            help={
-              <Fragment>
-                MinIO uses Policy-Based Access Control (PBAC) to define the
-                authorized actions and resources to which an authenticated user
-                has access. Each policy describes one or more actions and
-                conditions that outline the permissions of a user or group of
-                users.
-                <br />
-                <br />
-                MinIO PBAC is built for compatibility with AWS IAM policy
-                syntax, structure, and behavior. The MinIO documentation makes a
-                best-effort to cover IAM-specific behavior and functionality.
-                Consider deferring to the IAM documentation for more complete
-                documentation on AWS IAM-specific topics.
-                <br />
-                <br />
-                You can learn more at our{" "}
-                <a
-                  href="https://docs.min.io/minio/baremetal/security/minio-identity-management/policy-based-access-control.html?ref=con"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  documentation
-                </a>
-                .
-              </Fragment>
-            }
-          />
+          </Grid>
        </Grid>
      </PageLayout>
    </React.Fragment>
--- a/portal-ui/src/screens/Console/Tools/Inspect.tsx
+++ b/portal-ui/src/screens/Console/Tools/Inspect.tsx
@@ -237,6 +237,7 @@ const Inspect = ({
          >
            <Box
              sx={{
+                border: "1px solid #eaeaea",
                flex: {
                  md: 2,
                  xs: 1,
@@ -245,7 +246,10 @@ const Inspect = ({
                  lg: "auto",
                  xs: "100%",
                },
-                padding: "25px",
+                padding: {
+                  lg: "40px",
+                  xs: "15px",
+                },
              }}
            >
              <form
@@ -441,7 +445,7 @@ const Inspect = ({
                            width: "7px",
                            backgroundColor: "#2781B0",
                            marginRight: "10px",
-                            marginTop: "12px",
+                            marginTop: "7px",
                            flexShrink: 0,
                          },
                        },