Small Styling Adjustments. Lists style.

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,70 +35,96 @@ 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({
   // @global is handled by jss-plugin-global.
   "@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(

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;

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

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,47 +573,35 @@ 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>
                         <li>Bucket Tags</li>
                         <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>
             }

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>
   );

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

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