Skip to content

Commit

Permalink
Small Styling Adjustments. Lists style. (#1870)
Browse files Browse the repository at this point in the history 
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
  • Loading branch information
@dvaldivia
dvaldivia committed Apr 20, 2022
1 parent 3291b3c commit 3e13e6d
Show file tree
Hide file tree
Showing 10 changed files with 237 additions and 165 deletions.
60 changes: 43 additions & 17 deletions portal-ui/src/index.tsx
View file
Expand Up @@ -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";
Expand All @@ -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(
Expand Down
38 changes: 38 additions & 0 deletions portal-ui/src/screens/Console/Common/ContentBox.tsx
View file
@@ -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;
15 changes: 14 additions & 1 deletion portal-ui/src/screens/Console/Common/SectionTitle.tsx
View file
Expand Up @@ -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
Expand All @@ -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>}
Expand Down
52 changes: 22 additions & 30 deletions portal-ui/src/screens/Console/Configurations/SiteReplication/AddReplicationSites.tsx
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -191,10 +191,6 @@ const AddReplicationSites = ({
}
/>
<PageLayout>
<ScreenTitle title={"Add Sites for Replication"} icon={ClustersIcon} />

{isSiteInfoLoading || isAdding ? <LinearProgress /> : null}

<Box
sx={{
display: "grid",
Expand All @@ -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"
Expand All @@ -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>
Expand Down Expand Up @@ -517,6 +520,7 @@ const AddReplicationSites = ({
borderRadius: "50%",
marginRight: "18px",
padding: "3px",
paddingLeft: "2px",
"& .min-icon": {
height: "11px",
width: "11px",
Expand Down Expand Up @@ -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>
}
Expand Down
10 changes: 3 additions & 7 deletions portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
View file
Expand Up @@ -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;
Expand All @@ -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>
Expand Down Expand Up @@ -78,7 +74,7 @@ const TierTypeSelector = ({ history }: ITypeTiersConfig) => {
/>
))}
</Box>
</Box>
</ContentBox>
</PageLayout>
</Fragment>
);
Expand Down
6 changes: 3 additions & 3 deletions portal-ui/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx
View file
Expand Up @@ -186,8 +186,8 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
gap: "27px",
marginBottom: "40px",
marginTop: "40px",
marginLeft: "60px",
marginRight: "60px",
marginLeft: "40px",
marginRight: "40px",
}}
>
<Box>
Expand Down Expand Up @@ -264,7 +264,7 @@ const BasicDashboard = ({ usage }: IDashboardProps) => {
xs: "1fr",
},
gap: {
md: "40px",
md: "20px",
xs: "20px",
},
}}
Expand Down
2 changes: 1 addition & 1 deletion portal-ui/src/screens/Console/NotificationEndpoints/AddNotificationEndpoint.tsx
View file
Expand Up @@ -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";
Expand Down

0 comments on commit 3e13e6d

Please sign in to comment.