Fixing tooltips to use single component (#3194)

* Removing MaterialTooltip references

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing MaterialTooltip component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing entity icon hover effect in catalog and settings

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Align share and close tooltip positions

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Fixing EnityIcon selector

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reverting back selector changes

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing explicit interactive prop

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing interactive prop from catalog icons

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/tooltip/tooltip.scss

@@ -23,7 +23,7 @@
 .Tooltip {
   --bgc: #{$mainBackground};
   --radius: #{$radius};
-  --color: #{$textColorSecondary};
+  --color: #{$textColorAccent};
   --border: 1px solid #{$borderColor};
 
   // use positioning relative to viewport (window)
@@ -33,17 +33,18 @@
   background: var(--bgc);
   font-size: small;
   font-weight: normal;
-  border: var(--border);
   border-radius: var(--radius);
   color: var(--color);
   white-space: normal;
   padding: .5em;
   text-align: center;
   pointer-events: none;
-  transition: opacity 150ms 25ms ease-in-out;
+  transition: opacity 150ms 150ms ease-in-out;
   z-index: 100000;
+  opacity: 1;
+  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
 
-  &.hidden {
+  &.invisible {
     left: 0;
     top: 0;
     opacity: 0;

src/renderer/components/tooltip/tooltip.tsx

@@ -228,7 +228,7 @@ export class Tooltip extends React.Component<TooltipProps> {
   render() {
     const { style, formatters, usePortal, children } = this.props;
     const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
-      hidden: !this.isVisible,
+      invisible: !this.isVisible,
       formatter: !!formatters,
     });
     const tooltip = (