Fix invisible popup in darkmode (#2274)

* Fix invisible popup

* Move styles to a separate file

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>
                       }

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" },
+);