From 884ea78cf54438463261df4deea6a362556f5120 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Wed, 7 Sep 2022 11:42:12 +0200
Subject: [PATCH] Fix invisible popup in darkmode (#2274)

* Fix invisible popup

* Move styles to a separate file
---
 .../PluginSettings/PluginSettings.tsx         | 29 ++-----------------
 .../components/PluginSettings/styles.ts       | 29 +++++++++++++++++++
 2 files changed, 31 insertions(+), 27 deletions(-)
 create mode 100644 src/plugins/components/PluginSettings/styles.ts

diff --git a/src/plugins/components/PluginSettings/PluginSettings.tsx b/src/plugins/components/PluginSettings/PluginSettings.tsx
index b7ca847e1..fcebedfbf 100644
--- a/src/plugins/components/PluginSettings/PluginSettings.tsx
+++ b/src/plugins/components/PluginSettings/PluginSettings.tsx
@@ -12,13 +12,13 @@ import {
   ConfigurationItemFragment,
   ConfigurationTypeFieldEnum,
 } from "@saleor/graphql";
-import { makeStyles } from "@saleor/macaw-ui";
 import { UserError } from "@saleor/types";
 import { getFieldError } from "@saleor/utils/errors";
 import React from "react";
 import { useIntl } from "react-intl";
 
 import { PluginDetailsPageFormData } from "../PluginsDetailsPage";
+import { useStyles } from "./styles";
 
 interface PluginSettingsProps {
   data: PluginDetailsPageFormData;
@@ -28,31 +28,6 @@ interface PluginSettingsProps {
   fields: ConfigurationItemFragment[];
 }
 
-const useStyles = makeStyles(
-  theme => ({
-    authItem: {
-      display: "flex",
-    },
-    button: {
-      marginRight: theme.spacing(),
-    },
-    item: {
-      "&:not(:last-child)": {
-        marginBottom: theme.spacing(3),
-      },
-      alignItems: "center",
-      display: "flex",
-    },
-    itemLabel: {
-      fontWeight: 500,
-    },
-    spacer: {
-      flex: 1,
-    },
-  }),
-  { name: "PluginSettings" },
-);
-
 const PluginSettings: React.FC<PluginSettingsProps> = ({
   data,
   disabled,
@@ -96,7 +71,7 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
                   {fieldData.helpText && (
                     <Tooltip
                       title={
-                        <Typography variant="body2">
+                        <Typography variant="body2" className={classes.tooltip}>
                           {fieldData.helpText}
                         </Typography>
                       }
diff --git a/src/plugins/components/PluginSettings/styles.ts b/src/plugins/components/PluginSettings/styles.ts
new file mode 100644
index 000000000..02b8eec8c
--- /dev/null
+++ b/src/plugins/components/PluginSettings/styles.ts
@@ -0,0 +1,29 @@
+import { makeStyles } from "@saleor/macaw-ui";
+
+export const useStyles = makeStyles(
+  theme => ({
+    authItem: {
+      display: "flex",
+    },
+    button: {
+      marginRight: theme.spacing(),
+    },
+    item: {
+      "&:not(:last-child)": {
+        marginBottom: theme.spacing(3),
+      },
+      alignItems: "center",
+      display: "flex",
+    },
+    itemLabel: {
+      fontWeight: 500,
+    },
+    spacer: {
+      flex: 1,
+    },
+    tooltip: {
+      color: theme.palette.saleor.active[5],
+    },
+  }),
+  { name: "PluginSettings" },
+);