From 81d962a48dee398c6891855f8e7e1e7bb31bc211 Mon Sep 17 00:00:00 2001
From: Oleksii Husakov <oleksii.husakov@exabyte.io>
Date: Mon, 4 Sep 2023 17:23:23 +0300
Subject: [PATCH] chore: add PositionInfoPopover.styled

---
 src/other/rjsf/InputWithInfoPopover.tsx      | 13 +++----------
 src/other/rjsf/PositionInfoPopover.styled.ts | 10 ++++++++++
 src/other/rjsf/SelectWithInfoPopover.tsx     | 13 +++----------
 src/other/rjsf/TimePicker.tsx                | 13 +++----------
 4 files changed, 19 insertions(+), 30 deletions(-)
 create mode 100644 src/other/rjsf/PositionInfoPopover.styled.ts

diff --git a/src/other/rjsf/InputWithInfoPopover.tsx b/src/other/rjsf/InputWithInfoPopover.tsx
index e4761ec2..95678650 100644
--- a/src/other/rjsf/InputWithInfoPopover.tsx
+++ b/src/other/rjsf/InputWithInfoPopover.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { Templates } from "@rjsf/mui";
 import { WidgetProps } from "@rjsf/utils";
@@ -8,6 +7,7 @@ import React from "react";
 import InfoPopover, {
     InfoPopoverProps,
 } from "../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
 
 const { BaseInputTemplate } = Templates;
 
@@ -22,14 +22,7 @@ export default function InputWithInfoPopover(props: WidgetProps) {
     return (
         <>
             <BaseInputTemplate {...props} size="small" />
-            <Box
-                sx={{
-                    backgroundColor: "background.paper",
-                    position: "absolute",
-                    borderRadius: "50%",
-                    right: -14,
-                    top: -14,
-                }}>
+            <PositionInfoPopover>
                 <InfoPopover title={infoPopover?.title} iconSize="small">
                     <Typography
                         variant="body2"
@@ -37,7 +30,7 @@ export default function InputWithInfoPopover(props: WidgetProps) {
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </>
     );
 }
diff --git a/src/other/rjsf/PositionInfoPopover.styled.ts b/src/other/rjsf/PositionInfoPopover.styled.ts
new file mode 100644
index 00000000..14ed2a53
--- /dev/null
+++ b/src/other/rjsf/PositionInfoPopover.styled.ts
@@ -0,0 +1,10 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+export const PositionInfoPopover = styled(Box)({
+    backgroundColor: "background.paper",
+    position: "absolute",
+    borderRadius: "50%",
+    right: -14,
+    top: -14,
+});
diff --git a/src/other/rjsf/SelectWithInfoPopover.tsx b/src/other/rjsf/SelectWithInfoPopover.tsx
index 2b7fba36..ac3ca3ab 100644
--- a/src/other/rjsf/SelectWithInfoPopover.tsx
+++ b/src/other/rjsf/SelectWithInfoPopover.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { Widgets } from "@rjsf/mui";
 import { WidgetProps } from "@rjsf/utils";
@@ -8,6 +7,7 @@ import React from "react";
 import InfoPopover, {
     InfoPopoverProps,
 } from "../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
 
 const { SelectWidget } = Widgets;
 
@@ -21,14 +21,7 @@ export default function SelectWithInfoPopover(props: WidgetProps) {
     return (
         <>
             <SelectWidget {...props} size="small" />
-            <Box
-                sx={{
-                    backgroundColor: "background.paper",
-                    position: "absolute",
-                    borderRadius: "50%",
-                    right: -14,
-                    top: -14,
-                }}>
+            <PositionInfoPopover>
                 <InfoPopover title={infoPopover?.title} iconSize="small">
                     <Typography
                         variant="body2"
@@ -36,7 +29,7 @@ export default function SelectWithInfoPopover(props: WidgetProps) {
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </>
     );
 }
diff --git a/src/other/rjsf/TimePicker.tsx b/src/other/rjsf/TimePicker.tsx
index c6bd128e..22f59868 100644
--- a/src/other/rjsf/TimePicker.tsx
+++ b/src/other/rjsf/TimePicker.tsx
@@ -1,4 +1,3 @@
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
@@ -10,6 +9,7 @@ import React from "react";
 import InfoPopover, {
     InfoPopoverProps,
 } from "../../mui/components/popover/info-popover/InfoPopover";
+import { PositionInfoPopover } from "./PositionInfoPopover.styled";
 
 type InfoPopoverOptions = InfoPopoverProps & { content: string };
 
@@ -34,14 +34,7 @@ export default function TimePicker(props: WidgetProps<InfoPopoverOptions>) {
                     },
                 }}
             />
-            <Box
-                sx={{
-                    backgroundColor: "background.paper",
-                    position: "absolute",
-                    borderRadius: "50%",
-                    right: -14,
-                    top: -14,
-                }}>
+            <PositionInfoPopover>
                 <InfoPopover title={infoPopover?.title} iconSize="small">
                     <Typography
                         variant="body2"
@@ -49,7 +42,7 @@ export default function TimePicker(props: WidgetProps<InfoPopoverOptions>) {
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </LocalizationProvider>
     );
 }