div": {
- fontSize: 12,
- fontWeight: "normal",
- flexDirection: "row" as const,
- flexWrap: "nowrap" as const,
- },
- "@media (max-width: 1060px)": {
- display: "flex" as const,
- },
- },
- overrideShowDeleted: {
- "@media (max-width: 600px)": {
- flexDirection: "row" as const,
- },
- },
-};
-
-// ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
-// "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
-
-export const settingsCommon: any = {
- settingsFormContainer: {
- padding: 38,
- overflowY: "auto" as const,
- scrollbarWidth: "none" as const,
- "&::-webkit-scrollbar": {
- display: "none",
- },
- },
- settingsButtonContainer: {
- padding: "15px 38px",
- display: "flex",
- justifyContent: "flex-end",
- },
- settingsOptionsContainer: {
- height: "calc(100vh - 244px)",
- backgroundColor: "#fff",
- border: "#EAEDEE 1px solid",
- borderRadius: 3,
- marginTop: 15,
- },
-};
-
export const typesSelection = {
iconContainer: {
display: "flex" as const,
@@ -517,55 +342,6 @@ export const snackBarCommon = {
},
};
-export const wizardCommon = {
- multiContainer: {
- display: "flex" as const,
- alignItems: "center" as const,
- justifyContent: "flex-start" as const,
- },
- multiContainerStackNarrow: {
- display: "flex",
- alignItems: "center",
- justifyContent: "flex-start",
- gap: "8px",
- "@media (max-width: 750px)": {
- flexFlow: "column",
- flexDirection: "column",
- },
- },
- headerElement: {
- position: "sticky" as const,
- top: 0,
- paddingTop: 5,
- marginBottom: 10,
- zIndex: 500,
- backgroundColor: "#fff",
- },
- error: {
- color: "#dc1f2e",
- fontSize: "0.75rem",
- },
- descriptionText: {
- fontSize: 14,
- },
- container: {
- padding: "77px 0 0 0",
- "& h6": {
- color: "#777777",
- fontSize: 14,
- },
- "& p": {
- "& span:not(*[class*='smallUnit'])": {
- fontSize: 16,
- },
- },
- },
- paperWrapper: {
- padding: 12,
- border: 0,
- },
-};
-
export const inputFieldStyles = {
root: {
borderRadius: 3,
@@ -610,43 +386,6 @@ export const inputFieldStyles = {
},
};
-export const tableStyles: any = {
- tableBlock: {
- display: "flex",
- flexDirection: "row",
- "& .optionsAlignment ": {
- textAlign: "right",
-
- "& .MuiButtonBase-root": {
- backgroundColor: "#F8F8F8",
- },
-
- "&:hover": {
- backgroundColor: "#E2E2E2",
- },
- "& .min-icon": {
- width: 13,
- margin: 3,
- },
- },
- },
-};
-
-export const spacingUtils: any = {
- spacerRight: {
- marginRight: ".9rem",
- },
- spacerLeft: {
- marginLeft: ".9rem",
- },
- spacerBottom: {
- marginBottom: ".9rem",
- },
- spacerTop: {
- marginTop: ".9rem",
- },
-};
-
export const formFieldStyles: any = {
formFieldRow: {
marginBottom: ".8rem",
@@ -695,16 +434,6 @@ export const deleteDialogStyles: any = {
},
};
-export const createTenantCommon: any = {
- fieldGroup: {
- border: "1px solid #EAEAEA",
- paddingTop: 15,
- },
- descriptionText: {
- fontSize: 14,
- },
-};
-
export const modalStyleUtils: any = {
modalButtonBar: {
marginTop: 15,
@@ -720,79 +449,6 @@ export const modalStyleUtils: any = {
},
};
-export const textStyleUtils: any = {
- textMuted: {
- color: "#8399AB",
- },
-};
-
-export const detailsPanel: any = {
- metadataLinear: {
- marginBottom: 15,
- fontSize: 14,
- maxHeight: 180,
- overflowY: "auto",
- },
- detailContainer: {
- padding: "0 22px",
- marginBottom: 20,
- fontSize: 14,
- },
- titleLabel: {
- fontSize: 14,
- fontWeight: "700",
- color: "#000",
- padding: "12px 30px 8px 22px",
- whiteSpace: "nowrap",
- textOverflow: "ellipsis",
- overflow: "hidden",
- alignItems: "center",
- },
- objectActions: {
- backgroundColor: "#F8F8F8",
- border: "#F1F1F1 1px solid",
- borderRadius: 3,
- margin: "8px 22px",
- padding: 0,
- color: "#696969",
- "& li": {
- listStyle: "none",
- padding: 6,
- margin: 0,
- borderBottom: "#E5E5E5 1px solid",
- fontSize: 14,
- "&:first-of-type": {
- padding: 10,
- fontWeight: "bold",
- color: "#000",
- },
- "&:last-of-type": {
- borderBottom: 0,
- },
- "&::before": {
- content: "' '!important",
- },
- },
- },
-};
-
-export const objectBrowserExtras = {
- listIcon: {
- display: "block",
- marginTop: "-10px",
- "& .min-icon": {
- width: 20,
- height: 20,
- },
- },
- titleSpacer: {
- marginLeft: 10,
- "@media (max-width: 600px)": {
- marginLeft: 0,
- },
- },
-};
-
export const twoColCssGridLayoutConfig = {
display: "grid",
gridTemplateColumns: "2fr 1fr",
diff --git a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
index 9fd16229d..44648eb8b 100644
--- a/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
+++ b/portal-ui/src/screens/Console/Common/ModalWrapper/ConfirmDialog.tsx
@@ -15,11 +15,8 @@
// along with this program. If not, see
.
import React from "react";
-import { Button, ModalBox, Box } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { deleteDialogStyles } from "../FormComponents/common/styleLibrary";
+import { Box, Button, ModalBox } from "mds";
+
interface ButtonProps {
label?: string;
variant?: "regular" | "callAction" | "secondary";
@@ -30,17 +27,11 @@ interface ButtonProps {
onClick?: React.MouseEventHandler
;
}
-const styles = (theme: Theme) =>
- createStyles({
- ...deleteDialogStyles,
- });
-
type ConfirmDialogProps = {
isOpen?: boolean;
onClose: () => void;
onCancel?: () => void;
onConfirm: () => void;
- classes?: any;
title: string;
isLoading?: boolean;
confirmationContent: React.ReactNode | React.ReactNode[];
@@ -59,7 +50,6 @@ const ConfirmDialog = ({
onClose,
onCancel,
onConfirm,
- classes = {},
title = "",
isLoading,
confirmationContent,
@@ -78,7 +68,7 @@ const ConfirmDialog = ({
open={isOpen}
customMaxWidth={510}
>
- {confirmationContent}
+ {confirmationContent}
{
const dispatch = useAppDispatch();
@@ -105,6 +107,7 @@ const ModalWrapper = ({
titleIcon={titleIcon}
widthLimit={wideLimit}
sx={sx}
+ iconColor={iconColor}
>
.
import React, { Fragment, useEffect, useState } from "react";
+import styled from "styled-components";
+import get from "lodash/get";
import { Button, CircleIcon, ObjectManagerIcon } from "mds";
+import { useSelector } from "react-redux";
import { toggleList } from "../../ObjectBrowser/objectBrowserSlice";
import { AppState, useAppDispatch } from "../../../../store";
-import { useSelector } from "react-redux";
-import makeStyles from "@mui/styles/makeStyles";
-const useStyles = makeStyles((theme) => ({
- indicator: {
- position: "absolute",
- display: "block",
- width: 15,
- height: 15,
- top: 0,
- right: 4,
- marginTop: 4,
+const IndicatorContainer = styled.div(({ theme }) => ({
+ position: "absolute",
+ display: "block",
+ width: 15,
+ height: 15,
+ top: 0,
+ right: 4,
+ marginTop: 4,
+ transitionDuration: "0.2s",
+ color: get(theme, "signalColors.good", "#32C787"),
+ "& svg": {
+ width: 10,
+ height: 10,
+ top: "50%",
+ left: "50%",
transitionDuration: "0.2s",
- color: "#32C787",
+ },
+ "&.newItem": {
+ color: get(theme, "signalColors.info", "#2781B0"),
"& svg": {
- width: 10,
- height: 10,
- top: "50%",
- left: "50%",
- transitionDuration: "0.2s",
- },
- "&.newItem": {
- color: "#2781B0",
- "& svg": {
- width: 15,
- height: 15,
- },
+ width: 15,
+ height: 15,
},
},
}));
const ObjectManagerButton = () => {
const dispatch = useAppDispatch();
- const classes = useStyles();
const managerObjects = useSelector(
(state: AppState) => state.objectBrowser.objectManager.objectsToManage,
);
@@ -83,14 +81,14 @@ const ObjectManagerButton = () => {
}}
icon={
- 0 && newItems ? 1 : 0,
}}
>
-
+
diff --git a/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx b/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx
index 9db764416..4e0be6217 100644
--- a/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx
+++ b/portal-ui/src/screens/Console/Common/PanelTitle/PanelTitle.tsx
@@ -15,27 +15,20 @@
// along with this program. If not, see .
import React from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { IconButtonProps } from "@mui/material";
+import styled from "styled-components";
-const styles = (theme: Theme) =>
- createStyles({
- root: {
- padding: 0,
- margin: 0,
- fontSize: ".9rem",
- },
- });
+const PanelTitleContainer = styled.h1(() => ({
+ padding: 0,
+ margin: 0,
+ fontSize: ".9rem",
+}));
-interface IPanelTitle extends IconButtonProps {
- classes: any;
- children: any;
+interface IPanelTitle {
+ children: React.ReactNode;
}
-const PanelTitle = ({ classes, children }: IPanelTitle) => {
- return {children}
;
+const PanelTitle = ({ children }: IPanelTitle) => {
+ return {children};
};
-export default withStyles(styles)(PanelTitle);
+export default PanelTitle;
diff --git a/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx b/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
index 5eac4e5e2..4c8b35cb4 100644
--- a/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx
@@ -15,13 +15,11 @@
// along with this program. If not, see .
import React, { Fragment, useCallback, useEffect, useState } from "react";
-
import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
import { BackLink, Button, FormLayout, Grid, InputBox, PageLayout } from "mds";
-
+import { useNavigate, useParams } from "react-router-dom";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
import {
destinationList,
notificationEndpointsFields,
@@ -29,29 +27,19 @@ import {
notifyPostgres,
removeEmptyFields,
} from "./utils";
-import {
- modalBasic,
- settingsCommon,
-} from "../Common/FormComponents/common/styleLibrary";
-
import { IElementValue } from "../Configurations/types";
-
-import withSuspense from "../Common/Components/withSuspense";
-
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
import {
setErrorSnackMessage,
setHelpName,
setServerNeedsRestart,
} from "../../../systemSlice";
-import { useNavigate, useParams } from "react-router-dom";
import { useAppDispatch } from "../../../store";
+import { setDestinationLoading } from "./destinationsSlice";
+import withSuspense from "../Common/Components/withSuspense";
import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
import TargetTitle from "./TargetTitle";
-import { setDestinationLoading } from "./destinationsSlice";
import HelpMenu from "../HelpMenu";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
const ConfMySql = withSuspense(
React.lazy(() => import("./CustomForms/ConfMySql")),
@@ -65,20 +53,12 @@ const ConfPostgres = withSuspense(
React.lazy(() => import("./CustomForms/ConfPostgres")),
);
-const styles = (theme: Theme) =>
- createStyles({
- ...modalBasic,
- ...settingsCommon,
- });
-
interface IAddNotificationEndpointProps {
saveAndRefresh: any;
- classes: any;
}
const AddEventDestination = ({
saveAndRefresh,
- classes,
}: IAddNotificationEndpointProps) => {
const dispatch = useAppDispatch();
const navigate = useNavigate();
@@ -187,23 +167,16 @@ const AddEventDestination = ({
)}
-
- setIdentifier(e.target.value)}
- tooltip={"Unique descriptive string for this destination"}
- placeholder="Enter Destination Identifier"
- required
- />
-
+ setIdentifier(e.target.value)}
+ tooltip={"Unique descriptive string for this destination"}
+ placeholder="Enter Destination Identifier"
+ required
+ />
{srvComponent}
@@ -233,4 +206,4 @@ const AddEventDestination = ({
);
};
-export default withStyles(styles)(AddEventDestination);
+export default AddEventDestination;
diff --git a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
index f4e5094a4..ff48dcfb6 100644
--- a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
@@ -15,36 +15,23 @@
// along with this program. If not, see .
import React, { useCallback, useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
import { IElementValue } from "../../Configurations/types";
import {
- formFieldStyles,
- modalBasic,
-} from "../../Common/FormComponents/common/styleLibrary";
-import {
- Switch,
- InputBox,
- Grid,
Box,
- ReadBox,
- RadioGroup,
CommentBox,
+ FormLayout,
+ Grid,
+ InputBox,
+ RadioGroup,
+ ReadBox,
+ Switch,
} from "mds";
interface IConfMySqlProps {
onChange: (newValue: IElementValue[]) => void;
- classes: any;
}
-const styles = (theme: Theme) =>
- createStyles({
- ...modalBasic,
- ...formFieldStyles,
- });
-
-const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
+const ConfMySql = ({ onChange }: IConfMySqlProps) => {
//Local States
const [useDsnString, setUseDsnString] = useState(false);
const [dsnString, setDsnString] = useState("");
@@ -140,20 +127,18 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
};
return (
-
-
-
-
+
+
{useDsnString ? (
-
+
{
setDsnString(e.target.value);
}}
/>
-
+
) : (
-
+
{
marginBottom: 12,
}}
>
-
- ) => {
- setHostname(e.target.value);
- }}
- />
-
-
- ) => {
- setDbName(e.target.value);
- }}
- />
-
-
- ) => {
- setPort(e.target.value);
- }}
- />
-
-
-
- ) => {
- setUser(e.target.value);
- }}
- />
-
-
- ) => {
- setPassword(e.target.value);
- }}
- />
-
+ ) => {
+ setHostname(e.target.value);
+ }}
+ />
+ ) => {
+ setDbName(e.target.value);
+ }}
+ />
+ ) => {
+ setPort(e.target.value);
+ }}
+ />
+ ) => {
+ setUser(e.target.value);
+ }}
+ />
+ ) => {
+ setPassword(e.target.value);
+ }}
+ />
-
+
{dsnString}
@@ -248,76 +222,66 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
)}
-
- ) => {
- setTable(e.target.value);
- }}
- />
-
-
- {
- setFormat(e.target.value);
- }}
- tooltip="'namespace' reflects current bucket/object list and 'access' reflects a journal of object operations, defaults to 'namespace'"
- selectorOptions={[
- { label: "Namespace", value: "namespace" },
- { label: "Access", value: "access" },
- ]}
- />
-
-
- ) => {
- setQueueDir(e.target.value);
- }}
- />
-
-
- ) => {
- setQueueLimit(e.target.value);
- }}
- />
-
-
-
-
+ ) => {
+ setTable(e.target.value);
+ }}
+ />
+ {
+ setFormat(e.target.value);
+ }}
+ tooltip="'namespace' reflects current bucket/object list and 'access' reflects a journal of object operations, defaults to 'namespace'"
+ selectorOptions={[
+ { label: "Namespace", value: "namespace" },
+ { label: "Access", value: "access" },
+ ]}
+ />
+ ) => {
+ setQueueDir(e.target.value);
+ }}
+ />
+ ) => {
+ setQueueLimit(e.target.value);
+ }}
+ />
+