From 9f6621231fbe5b202f9eac17fa4578a9ece5dec6 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Fri, 20 Mar 2020 09:45:44 +0000
Subject: [PATCH] Tooltip css fixes.

---
 .../propertyControls/StyledControls.tsx       |  7 +++-
 app/client/src/constants/Colors.tsx           |  1 +
 app/client/src/constants/DefaultTheme.tsx     |  1 +
 .../Editor/PropertyPane/PropertyControl.tsx   | 35 ++++++++++++-------
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/client/src/components/propertyControls/StyledControls.tsx b/app/client/src/components/propertyControls/StyledControls.tsx
index 13b94d361c..e1f54f2118 100644
--- a/app/client/src/components/propertyControls/StyledControls.tsx
+++ b/app/client/src/components/propertyControls/StyledControls.tsx
@@ -41,17 +41,22 @@ export const ControlWrapper = styled.div<ControlWrapperProps>`
 export const ControlPropertyLabelContainer = styled.div`
   display: flex;
   align-items: center;
-  & > label {
+  label {
     color: ${props => props.theme.colors.paneText};
     margin-bottom: ${props => props.theme.spaces[1]}px;
     font-size: ${props => props.theme.fontSizes[3]}px;
   }
+  .underline {
+    color: ${props => props.theme.colors.paneTextUnderline};
+  }
 `;
 
 export const JSToggleButton = styled.span<{ active: boolean }>`
   margin: 0 3px;
   cursor: pointer;
+  height: 24px;
   svg {
+    height: 24px;
     rect {
       fill: ${props =>
         props.active
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index b635d401b5..7688ba6ff2 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -10,6 +10,7 @@ export const Colors: Record<string, string> = {
   MYSTIC: "#E1E8ED",
   AQUA_HAZE: "#EEF2F5",
   GRAY_CHATEAU: "#A2A6A8",
+  LIGHT_GREYISH_BLUE: "#B0BFCB",
   SUNGLOW: "#FFCB33",
 
   BLACK: "#000000",
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 768253cee7..efadb8feb9 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -332,6 +332,7 @@ export const theme: Theme = {
     paneInputBG: Colors.SHARK,
     paneBG: Colors.OUTER_SPACE,
     paneText: Colors.GRAY_CHATEAU,
+    paneTextUnderline: Colors.LIGHT_GREYISH_BLUE,
     paneSectionLabel: Colors.CADET_BLUE,
     navBG: Colors.SHARK,
     grid: Colors.GEYSER_LIGHT,
diff --git a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
index d778f1eae2..673689d4b8 100644
--- a/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx
@@ -9,7 +9,7 @@ import { ControlIcons } from "icons/ControlIcons";
 import PropertyControlFactory from "utils/PropertyControlFactory";
 import { WidgetProps } from "widgets/BaseWidget";
 import { ControlConfig } from "reducers/entityReducers/propertyPaneConfigReducer";
-import { Tooltip } from "@blueprintjs/core";
+import { Tooltip, Position } from "@blueprintjs/core";
 
 type Props = {
   widgetProperties: WidgetProps;
@@ -27,21 +27,30 @@ function UnderlinedLabel({
 }) {
   const toolTipDefined = tooltip !== undefined;
   return (
-    <Tooltip disabled={!toolTipDefined} content={tooltip} hoverOpenDelay={200}>
+    <Tooltip
+      disabled={!toolTipDefined}
+      content={tooltip}
+      position={Position.TOP}
+      hoverOpenDelay={200}
+    >
       <div
-        style={
-          toolTipDefined
-            ? {
-                height: "20px",
-                cursor: "help",
-              }
-            : {
-                height: "20px",
-              }
-        }
+        style={{
+          height: "22px",
+        }}
       >
-        {label}
+        <label
+          style={
+            toolTipDefined
+              ? {
+                  cursor: "help",
+                }
+              : {}
+          }
+        >
+          {label}
+        </label>
         <span
+          className={"underline"}
           style={
             toolTipDefined
               ? {