chore: add PositionInfoPopover.styled

Exabyte-io · Sep 4, 2023 · 81d962a · 81d962a
1 parent fcd179d
commit 81d962a
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 30 deletions.
diff --git 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,22 +22,15 @@ 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"
                         pb={2}
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </>
     );
 }
diff --git a/src/other/rjsf/PositionInfoPopover.styled.ts 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
@@ -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,22 +21,15 @@ 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"
                         pb={2}
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </>
     );
 }
diff --git 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,22 +34,15 @@ 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"
                         pb={2}
                         dangerouslySetInnerHTML={{ __html: infoPopover?.content }}
                     />
                 </InfoPopover>
-            </Box>
+            </PositionInfoPopover>
         </LocalizationProvider>
     );
 }