@churchapps/apphelper 0.2.79 → 0.2.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DisplayBox.d.ts +12 -0
- package/dist/components/DisplayBox.d.ts.map +1 -1
- package/dist/components/DisplayBox.js +9 -2
- package/dist/components/DisplayBox.js.map +1 -1
- package/dist/components/InputBox.d.ts +12 -0
- package/dist/components/InputBox.d.ts.map +1 -1
- package/dist/components/InputBox.js +12 -3
- package/dist/components/InputBox.js.map +1 -1
- package/package.json +1 -1
- package/src/components/DisplayBox.tsx +25 -3
- package/src/components/InputBox.tsx +28 -4
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
declare module '@mui/material/styles' {
|
|
3
|
+
interface Palette {
|
|
4
|
+
InputBox: {
|
|
5
|
+
headerText: string;
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
interface PaletteOptions {
|
|
9
|
+
InputBox?: {
|
|
10
|
+
headerText?: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
}
|
|
2
14
|
interface Props {
|
|
3
15
|
id?: string;
|
|
4
16
|
children: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisplayBox.d.ts","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"DisplayBox.d.ts","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE;YACR,UAAU,EAAE,MAAM,CAAC;SACpB,CAAC;KACH;IACD,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE;YACT,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH;CACF;AAUD,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAsBD,eAAO,MAAM,UAAU,8EA2BrB,CAAA"}
|
|
@@ -9,6 +9,13 @@ const react_1 = __importDefault(require("react"));
|
|
|
9
9
|
const material_1 = require("@mui/material");
|
|
10
10
|
const HelpIcon_1 = require("./HelpIcon");
|
|
11
11
|
const SmallButton_1 = require("./SmallButton");
|
|
12
|
+
const theme = (0, material_1.createTheme)({
|
|
13
|
+
palette: {
|
|
14
|
+
InputBox: {
|
|
15
|
+
headerText: "primary"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
});
|
|
12
19
|
/* "& p": { color: "#666" }, */
|
|
13
20
|
const CustomContextBox = (0, material_1.styled)(material_1.Box)({
|
|
14
21
|
marginTop: 10,
|
|
@@ -39,8 +46,8 @@ exports.DisplayBox = react_1.default.forwardRef((props, ref) => {
|
|
|
39
46
|
props.help && react_1.default.createElement(HelpIcon_1.HelpIcon, { article: props.help }),
|
|
40
47
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center" } },
|
|
41
48
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", alignItems: "center" } },
|
|
42
|
-
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color:
|
|
43
|
-
react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color:
|
|
49
|
+
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color: theme.palette.InputBox.headerText } }, props.headerIcon),
|
|
50
|
+
react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: theme.palette.InputBox.headerText }, props.headerText)),
|
|
44
51
|
react_1.default.createElement(material_1.Box, null, editContent)),
|
|
45
52
|
react_1.default.createElement(CustomContextBox, { ref: ref, "data-cy": "content" }, props.children),
|
|
46
53
|
props.footerContent && (react_1.default.createElement("div", { style: { marginLeft: -16, marginRight: -16, marginBottom: -15, marginTop: 15 } }, props.footerContent))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DisplayBox.js","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"DisplayBox.js","sourceRoot":"","sources":["../../src/components/DisplayBox.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PaperProps } from "@mui/material";
|
|
3
|
+
declare module '@mui/material/styles' {
|
|
4
|
+
interface Palette {
|
|
5
|
+
InputBox: {
|
|
6
|
+
headerText: string;
|
|
7
|
+
};
|
|
8
|
+
}
|
|
9
|
+
interface PaletteOptions {
|
|
10
|
+
InputBox?: {
|
|
11
|
+
headerText?: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
}
|
|
3
15
|
interface Props {
|
|
4
16
|
id?: string;
|
|
5
17
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuD,UAAU,
|
|
1
|
+
{"version":3,"file":"InputBox.d.ts","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAuD,UAAU,EAAe,MAAM,eAAe,CAAC;AAI7G,OAAO,QAAQ,sBAAsB,CAAC;IACpC,UAAU,OAAO;QACf,QAAQ,EAAE;YACR,UAAU,EAAE,MAAM,CAAC;SACpB,CAAC;KACH;IACD,UAAU,cAAc;QACtB,QAAQ,CAAC,EAAE;YACT,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;KACH;CACF;AAUD,UAAU,KAAK;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACrC,qBAAqB,CAAC,EAAE,UAAU,CAAC;CACpC;AAoBD,wBAAgB,QAAQ,CAAC,EAAE,qBAA0B,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAiCvE"}
|
|
@@ -20,7 +20,16 @@ const react_1 = __importDefault(require("react"));
|
|
|
20
20
|
const material_1 = require("@mui/material");
|
|
21
21
|
const HelpIcon_1 = require("./HelpIcon");
|
|
22
22
|
const helpers_1 = require("../helpers");
|
|
23
|
+
const theme = (0, material_1.createTheme)({
|
|
24
|
+
palette: {
|
|
25
|
+
InputBox: {
|
|
26
|
+
headerText: "primary"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
});
|
|
23
30
|
const CustomContextBox = (0, material_1.styled)(material_1.Box)({
|
|
31
|
+
name: "InputBox",
|
|
32
|
+
slot: "root",
|
|
24
33
|
marginTop: 10,
|
|
25
34
|
overflowX: "hidden",
|
|
26
35
|
"& p": { color: "#666" },
|
|
@@ -50,9 +59,9 @@ function InputBox(_a) {
|
|
|
50
59
|
return (react_1.default.createElement(material_1.Paper, Object.assign({ id: props.id, sx: { padding: 2, marginBottom: 4 }, "data-cy": props["data-cy"] }, mainContainerCssProps),
|
|
51
60
|
props.help && react_1.default.createElement(HelpIcon_1.HelpIcon, { article: props.help }),
|
|
52
61
|
react_1.default.createElement(material_1.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }, "data-cy": "header" },
|
|
53
|
-
react_1.default.createElement(material_1.Box, {
|
|
54
|
-
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color:
|
|
55
|
-
props.headerText && (react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color:
|
|
62
|
+
react_1.default.createElement(material_1.Box, { display: "flex", alignItems: "center" },
|
|
63
|
+
props.headerIcon && react_1.default.createElement(material_1.Icon, { sx: { color: theme.palette.InputBox.headerText } }, props.headerIcon),
|
|
64
|
+
props.headerText && (react_1.default.createElement(material_1.Typography, { component: "h2", sx: { display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }, variant: "h6", color: theme.palette.InputBox.headerText }, props.headerText))),
|
|
56
65
|
react_1.default.createElement(material_1.Box, null, props.headerActionContent)),
|
|
57
66
|
react_1.default.createElement(CustomContextBox, null, props.children),
|
|
58
67
|
react_1.default.createElement(material_1.Stack, { direction: "row", sx: { marginTop: 1 }, spacing: 1, justifyContent: "end" }, buttons)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputBox.js","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"InputBox.js","sourceRoot":"","sources":["../../src/components/InputBox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,kDAA0B;AAC1B,4CAA6G;AAC7G,yCAAsC;AACtC,wCAAoC;AAepC,MAAM,KAAK,GAAG,IAAA,sBAAW,EAAC;IACxB,OAAO,EAAE;QACP,QAAQ,EAAE;YACR,UAAU,EAAE,SAAS;SACtB;KACF;CACF,CAAC,CAAC;AAwBH,MAAM,gBAAgB,GAAG,IAAA,iBAAM,EAAC,cAAG,CAAC,CAAC;IACnC,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,QAAQ;IACnB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACxB,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IAC5B,MAAM,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IAC3B,MAAM,EAAE;QACN,YAAY,EAAE,EAAE;QAChB,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;KAC1B;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;KAC1B;CACF,CAAC,CAAA;AAGF,SAAgB,QAAQ,CAAC,EAA+C;QAA/C,EAAE,qBAAqB,GAAG,EAAE,OAAmB,EAAd,KAAK,cAAtC,yBAAwC,CAAF;IAC7D,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,KAAK,CAAC,cAAc;QAAE,OAAO,CAAC,IAAI,CAAC,8BAAC,iBAAM,IAAC,GAAG,EAAC,QAAQ,EAAC,OAAO,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAG,KAAK,CAAC,UAAU,IAAI,gBAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAU,CAAC,CAAC;IACjN,IAAI,KAAK,CAAC,cAAc;QAAE,OAAO,CAAC,IAAI,CAAC,8BAAC,iBAAM,IAAC,GAAG,EAAC,QAAQ,EAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,gBAAa,KAAK,CAAC,eAAe,EAAE,OAAO,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAG,KAAK,CAAC,UAAU,IAAI,gBAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAU,CAAC,CAAC;IACjR,IAAI,KAAK,CAAC,YAAY;QAAE,OAAO,CAAC,IAAI,CAAC,8BAAC,iBAAM,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,KAAK,CAAC,cAAc,IAAI,QAAQ,EAAE,OAAO,EAAC,WAAW,EAAC,gBAAgB,sBAAa,KAAK,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,IAAG,KAAK,CAAC,QAAQ,IAAI,gBAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAU,CAAC,CAAC;IAEnU,IAAI,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;IAC9B,IAAI,KAAK,CAAC,SAAS,EAAE;QACnB,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;KAClC;IAED,OAAO,CACL,8BAAC,gBAAK,kBAAC,EAAE,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,aAAW,KAAK,CAAC,SAAS,CAAC,IAAM,qBAAqB;QAC3G,KAAK,CAAC,IAAI,IAAI,8BAAC,mBAAQ,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,GAAI;QAChD,8BAAC,cAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAU,QAAQ;YACzH,8BAAC,cAAG,IAAC,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ;gBACpC,KAAK,CAAC,UAAU,IAAI,8BAAC,eAAI,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,IAAG,KAAK,CAAC,UAAU,CAAQ;gBACrG,KAAK,CAAC,UAAU,IAAI,CACnB,8BAAC,qBAAU,IAAC,SAAS,EAAC,IAAI,EAAC,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,UAAU,IACpJ,KAAK,CAAC,UAAU,CACN,CACd,CACG;YACN,8BAAC,cAAG,QACD,KAAK,CAAC,mBAAmB,CACtB,CACF;QACN,8BAAC,gBAAgB,QAAE,KAAK,CAAC,QAAQ,CAAoB;QACrD,8BAAC,gBAAK,IAAC,SAAS,EAAC,KAAK,EAAC,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,KAAK,IAC1E,OAAO,CACF,CACF,CACT,CAAC;AACJ,CAAC;AAjCD,4BAiCC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,32 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { Paper, Box, Typography, styled, Icon } from "@mui/material";
|
|
4
|
+
import { Paper, Box, Typography, styled, Icon, createTheme } from "@mui/material";
|
|
5
5
|
import { HelpIcon } from "./HelpIcon";
|
|
6
6
|
import { SmallButton } from "./SmallButton";
|
|
7
7
|
|
|
8
|
+
|
|
9
|
+
declare module '@mui/material/styles' {
|
|
10
|
+
interface Palette {
|
|
11
|
+
InputBox: {
|
|
12
|
+
headerText: string;
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
interface PaletteOptions {
|
|
16
|
+
InputBox?: {
|
|
17
|
+
headerText?: string;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const theme = createTheme({
|
|
23
|
+
palette: {
|
|
24
|
+
InputBox: {
|
|
25
|
+
headerText: "primary"
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
|
|
8
30
|
interface Props {
|
|
9
31
|
id?: string,
|
|
10
32
|
children: React.ReactNode,
|
|
@@ -51,8 +73,8 @@ export const DisplayBox = React.forwardRef<HTMLDivElement, Props>((props, ref) =
|
|
|
51
73
|
{props.help && <HelpIcon article={props.help} />}
|
|
52
74
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
53
75
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
54
|
-
{props.headerIcon && <Icon sx={{ color:
|
|
55
|
-
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color=
|
|
76
|
+
{props.headerIcon && <Icon sx={{ color: theme.palette.InputBox.headerText }}>{props.headerIcon}</Icon>}
|
|
77
|
+
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={theme.palette.InputBox.headerText}>
|
|
56
78
|
{props.headerText}
|
|
57
79
|
</Typography>
|
|
58
80
|
|
|
@@ -1,10 +1,31 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
|
-
import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
|
|
4
|
+
import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps, createTheme } from "@mui/material";
|
|
5
5
|
import { HelpIcon } from "./HelpIcon";
|
|
6
6
|
import { Locale } from "../helpers";
|
|
7
7
|
|
|
8
|
+
declare module '@mui/material/styles' {
|
|
9
|
+
interface Palette {
|
|
10
|
+
InputBox: {
|
|
11
|
+
headerText: string;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
interface PaletteOptions {
|
|
15
|
+
InputBox?: {
|
|
16
|
+
headerText?: string;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const theme = createTheme({
|
|
22
|
+
palette: {
|
|
23
|
+
InputBox: {
|
|
24
|
+
headerText: "primary"
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
|
|
8
29
|
interface Props {
|
|
9
30
|
id?: string;
|
|
10
31
|
children?: React.ReactNode;
|
|
@@ -28,6 +49,8 @@ interface Props {
|
|
|
28
49
|
}
|
|
29
50
|
|
|
30
51
|
const CustomContextBox = styled(Box)({
|
|
52
|
+
name: "InputBox",
|
|
53
|
+
slot: "root",
|
|
31
54
|
marginTop: 10,
|
|
32
55
|
overflowX: "hidden",
|
|
33
56
|
"& p": { color: "#666" },
|
|
@@ -42,6 +65,7 @@ const CustomContextBox = styled(Box)({
|
|
|
42
65
|
}
|
|
43
66
|
})
|
|
44
67
|
|
|
68
|
+
|
|
45
69
|
export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
|
|
46
70
|
let buttons = [];
|
|
47
71
|
if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>{props.cancelText || Locale.label("common.cancel")}</Button>);
|
|
@@ -57,10 +81,10 @@ export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
|
|
|
57
81
|
<Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
|
|
58
82
|
{props.help && <HelpIcon article={props.help} />}
|
|
59
83
|
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
|
|
60
|
-
<Box
|
|
61
|
-
{props.headerIcon && <Icon sx={{ color:
|
|
84
|
+
<Box display="flex" alignItems="center">
|
|
85
|
+
{props.headerIcon && <Icon sx={{ color: theme.palette.InputBox.headerText }}>{props.headerIcon}</Icon>}
|
|
62
86
|
{props.headerText && (
|
|
63
|
-
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color=
|
|
87
|
+
<Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color={theme.palette.InputBox.headerText}>
|
|
64
88
|
{props.headerText}
|
|
65
89
|
</Typography>
|
|
66
90
|
)}
|