fix(ui): fix tippy blanc theme, fix wording and ui bugs

frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx

@@ -66,7 +66,7 @@ function WidgetPreview(props: Props) {
                         </>
                     )}
 
-                    {isTable && (
+                    {!disableVisualization && isTable && (
                         <>
                             <span className="mr-4 color-gray-medium">Visualization</span>
                             <SegmentSelection
@@ -80,7 +80,6 @@ function WidgetPreview(props: Props) {
                                     { value: 'table', name: 'Table', icon: 'table' },
                                     { value: 'pieChart', name: 'Chart', icon: 'pie-chart-fill' },
                                 ]}
-                                disabled={disableVisualization}
                                 disabledMessage="Chart view is not supported"
                             />
                         </>

frontend/app/components/Session_/Player/Controls/Timeline.js

@@ -186,7 +186,7 @@ export default class Timeline extends React.PureComponent {
         const scale = 100 / endTime;
 
         return (
-            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%', overflowX: 'hidden' }}>
+            <div className="flex items-center absolute w-full" style={{ top: '-4px', zIndex: 100, padding: `0 ${BOUNDRY}px`, maxWidth: '100%' }}>
                 <div
                     className={stl.progress}
                     onClick={disabled ? null : this.seekProgress}

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Tooltip } from 'react-tippy';
-import { ReduxTime } from '../Time';
 import { Icon } from 'UI';
 import cn from 'classnames';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { ReduxTime } from '../Time';
 // @ts-ignore
 import styles from '../controls.module.css';
 
@@ -44,6 +45,7 @@ function PlayerControls(props: Props) {
     currentInterval,
     controlIcon,
   } = props;
+  const [showTooltip, setShowTooltip] = React.useState(false);
   const speedRef = React.useRef(null);
   const arrowBackRef = React.useRef(null);
   const arrowForwardRef = React.useRef(null);
@@ -67,6 +69,9 @@ function PlayerControls(props: Props) {
     return () => document.removeEventListener('keydown', handleKeyboard);
   }, [speedRef, arrowBackRef, arrowForwardRef]);
 
+  const toggleTooltip = () => {
+    setShowTooltip(!showTooltip);
+  }
   return (
     <div className="flex items-center">
       {playButton}
@@ -98,13 +103,13 @@ function PlayerControls(props: Props) {
         </Tooltip>
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
           <Tooltip
+            open={showTooltip}
             interactive
             // @ts-ignore
             theme="nopadding"
             animation="none"
-            hideDelay={200}
             duration={0}
-            className="cursor-pointer"
+            className="cursor-pointer select-none"
             distance={20}
             html={
               <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
@@ -113,8 +118,14 @@ function PlayerControls(props: Props) {
                 </div>
                 {Object.keys(skipIntervals).map((interval) => (
                   <div
-                    onClick={() => setSkipInterval(parseInt(interval, 10))}
-                    className="py-2 px-4 cursor-pointer hover:bg-active-blue border-t w-full text-left border-borderColor-gray-light-shade font-semibold"
+                    onClick={() => {
+                      toggleTooltip();
+                      setSkipInterval(parseInt(interval, 10))
+                    }}
+                    className={cn(
+                      "py-2 px-4 cursor-pointer w-full text-left font-semibold", 
+                      "hover:bg-active-blue border-t  border-borderColor-gray-light-shade",
+                    )}
                   >
                     {interval}
                     <span className="text-disabled-text">s</span>
@@ -123,7 +134,7 @@ function PlayerControls(props: Props) {
               </div>
             }
           >
-            {currentInterval}s
+            <div onClick={toggleTooltip}>{currentInterval}s</div>
           </Tooltip>
         </div>
         {/* @ts-ignore */}

frontend/app/components/Session_/PlayerBlock.js

@@ -29,7 +29,7 @@ export default class PlayerBlock extends React.PureComponent {
      } = this.props;
 
     return (
-      <div className={ cn(styles.playerBlock, "flex flex-col") }>
+      <div className={ cn(styles.playerBlock, "flex flex-col overflow-x-hidden") }>
           {!fullscreen && <SubHeader
             sessionId={sessionId}
             disabled={disabled}

frontend/app/styles/general.css

@@ -279,7 +279,11 @@ p {
   background-color: $tealx;
 }
 .tippy-tooltip[data-theme~='nopadding'], .nopadding-theme {
-  padding: 0!important
+  padding: 0!important;
+  transition: none!important;
+}
+.tippy-notransition {
+  transition: none!important;
 }
 
 @media print {