From dc8df597283893e34fdeb841f1a94095ab0eb3a3 Mon Sep 17 00:00:00 2001
From: Vlad116 <vladalekseev9@ya.ru>
Date: Thu, 8 Jun 2023 10:06:19 +0300
Subject: [PATCH] feat: fix TooltipTrigger styles (#692), :recycle: :lipstick:

---
 src/components/TooltipTrigger.tsx             | 49 -------------------
 .../TooltipTrigger/icon-svg-path.ts           |  2 +
 src/components/TooltipTrigger/index.tsx       | 47 ++++++++++++++++++
 src/pages/Options/Options.css                 |  6 ++-
 4 files changed, 53 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/TooltipTrigger.tsx
 create mode 100644 src/components/TooltipTrigger/icon-svg-path.ts
 create mode 100644 src/components/TooltipTrigger/index.tsx

diff --git a/src/components/TooltipTrigger.tsx b/src/components/TooltipTrigger.tsx
deleted file mode 100644
index e0839c51..00000000
--- a/src/components/TooltipTrigger.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { ITooltipHostProps, TooltipHost } from 'office-ui-fabric-react';
-import React from 'react';
-
-interface ITooltipTriggerProps extends ITooltipHostProps {
-  iconColor?: string;
-  size?: number;
-}
-
-const TooltipTrigger = ({
-  iconColor = '#FFFFFF',
-  size = 28,
-  ...restProps
-}: ITooltipTriggerProps): JSX.Element => (
-  <TooltipHost
-    {...restProps}
-    style={{
-      cursor: 'help',
-    }}
-  >
-    <svg
-      width={`${size}px`}
-      height={`${size}px`}
-      viewBox="0 0 512 512"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        id="Page-1"
-        stroke={iconColor}
-        strokeWidth="1"
-        fill={iconColor}
-        fillRule="evenodd"
-      >
-        <g
-          id="add"
-          fill={iconColor}
-          transform="translate(42.666667, 42.666667)"
-        >
-          <path
-            d="M291.76704,163.504 C291.76704,177.01952 288.33216,188.82176 281.479253,198.90112 C275.828267,207.371093 266.358187,216.549547 253.042987,226.434987 C245.378987,231.682347 240.331947,236.618667 237.916587,241.257813 C234.87744,246.90624 233.376213,255.371093 233.376213,266.666667 L190.710827,266.666667 C190.710827,249.530027 192.53504,237.027413 196.165333,229.162667 C200.394453,219.679573 209.571627,210.098773 223.686187,200.42048 C230.350293,195.374933 235.188693,190.2368 238.214827,184.994773 C241.839787,179.143253 243.664,172.49216 243.664,165.028693 C243.664,153.13024 240.125013,144.26304 233.070293,138.404907 C227.4336,134.177067 220.56768,132.059947 212.501333,132.059947 C199.39328,132.059947 189.911467,136.398507 184.065067,145.069013 C179.829333,151.518293 177.7056,159.787733 177.7056,169.868587 L177.7056,170.173227 L132.34368,170.173227 C132.34368,143.751253 140.703147,123.790507 157.43488,110.274773 C171.554773,98.9922133 189.007787,93.3346133 209.77344,93.3346133 C227.933653,93.3346133 243.865813,96.86848 257.571627,103.9232 C280.37504,115.62624 291.76704,135.494827 291.76704,163.504 Z M426.666667,213.333333 C426.666667,331.153707 331.153707,426.666667 213.333333,426.666667 C95.51296,426.666667 3.55271368e-14,331.153707 3.55271368e-14,213.333333 C3.55271368e-14,95.51168 95.51296,3.55271368e-14 213.333333,3.55271368e-14 C331.153707,3.55271368e-14 426.666667,95.51168 426.666667,213.333333 Z M384,213.333333 C384,119.226667 307.43872,42.6666667 213.333333,42.6666667 C119.227947,42.6666667 42.6666667,119.226667 42.6666667,213.333333 C42.6666667,307.43872 119.227947,384 213.333333,384 C307.43872,384 384,307.43872 384,213.333333 Z M213.332053,282.666667 C198.60416,282.666667 186.665387,294.60544 186.665387,309.333333 C186.665387,324.061227 198.60416,336 213.332053,336 C228.059947,336 239.99872,324.061227 239.99872,309.333333 C239.99872,294.60544 228.059947,282.666667 213.332053,282.666667 Z"
-            id="Shape"
-          />
-        </g>
-      </g>
-    </svg>
-  </TooltipHost>
-);
-
-export default TooltipTrigger;
diff --git a/src/components/TooltipTrigger/icon-svg-path.ts b/src/components/TooltipTrigger/icon-svg-path.ts
new file mode 100644
index 00000000..a1ba69ad
--- /dev/null
+++ b/src/components/TooltipTrigger/icon-svg-path.ts
@@ -0,0 +1,2 @@
+export const iconTooltipTrigger =
+  'M22 34h4V22h-4v12zm2-30C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.82 0-16-7.18-16-16S15.18 8 24 8s16 7.18 16 16-7.18 16-16 16zm-2-22h4v-4h-4v4z';
diff --git a/src/components/TooltipTrigger/index.tsx b/src/components/TooltipTrigger/index.tsx
new file mode 100644
index 00000000..2d24a59e
--- /dev/null
+++ b/src/components/TooltipTrigger/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { ITooltipHostProps, TooltipHost } from 'office-ui-fabric-react';
+
+import { iconTooltipTrigger } from './icon-svg-path';
+
+interface ITooltipTriggerProps extends ITooltipHostProps {
+  size?: number;
+  iconColor?: string;
+  tooltipBackground?: string;
+  tooltipFontColor?: string;
+}
+
+const TooltipTrigger = ({
+  size = 20,
+  iconColor = '#FFFFFF',
+  tooltipBackground = '#676e72',
+  tooltipFontColor = '#FFFFFF',
+  ...restProps
+}: ITooltipTriggerProps): JSX.Element => (
+  <TooltipHost
+    tooltipProps={{
+      styles: {
+        content: { color: tooltipFontColor },
+      },
+      calloutProps: {
+        styles: {
+          beak: { backgroundColor: tooltipBackground },
+          beakCurtain: { backgroundColor: tooltipBackground },
+          calloutMain: { backgroundColor: tooltipBackground, cursor: 'help' },
+        },
+      },
+    }}
+    {...restProps}
+  >
+    <svg
+      className="tooltip-icon"
+      width={`${size}px`}
+      height={`${size}px`}
+      viewBox="0 0 48 48"
+      version="1.1"
+    >
+      <path fill={iconColor} d={iconTooltipTrigger}></path>
+    </svg>
+  </TooltipHost>
+);
+
+export default TooltipTrigger;
diff --git a/src/pages/Options/Options.css b/src/pages/Options/Options.css
index a1b3a2d8..417da461 100644
--- a/src/pages/Options/Options.css
+++ b/src/pages/Options/Options.css
@@ -23,7 +23,7 @@
 .Box-header {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   padding: 0 25px;
   margin: -1px -1px 0;
@@ -34,13 +34,15 @@
   border-top-right-radius: 6px;
 }
 
-.Box-header svg {
+.Box-header svg.tooltip-icon {
   cursor: help;
+  margin-top: 4px;
 }
 
 .Box-title {
   font-size: 18px;
   font-weight: 600;
+  margin-right: 8px;
 }
 
 ul {