Merge branch 'feature/tooltip' into 'release'

Tooltip css fixes.

See merge request theappsmith/internal-tools-client!409

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

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",

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,

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
               ? {