From 16cebcedf44aac4a0c2c1b5b6398edcc0e443cec Mon Sep 17 00:00:00 2001
From: Diana Lease <dianarlease@gmail.com>
Date: Wed, 26 Aug 2020 14:27:19 -0400
Subject: [PATCH] fix(formula): fix hovering style

Signed-off-by: Diana Lease <dianarlease@gmail.com>
---
 .../src/lib/ContractEditor/index.js           |  4 ++--
 .../src/lib/components/Formula/index.js       | 24 +++++++++----------
 .../ui-contract-editor/src/lib/styles.css     | 14 ++---------
 3 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/ui-contract-editor/src/lib/ContractEditor/index.js b/packages/ui-contract-editor/src/lib/ContractEditor/index.js
index 0846bb63..73ca9c3e 100644
--- a/packages/ui-contract-editor/src/lib/ContractEditor/index.js
+++ b/packages/ui-contract-editor/src/lib/ContractEditor/index.js
@@ -78,7 +78,7 @@ const contractProps = {
  */
 const ContractEditor = (props) => {
   const [hoveringFormulaContract, setHoveringFormulaContract] = useState(false);
-  const [formulaNode, setFormulaNode] = useState({});
+  const [formulaNode, setFormulaNode] = useState(null);
   const withClausesProps = {
     onClauseUpdated: props.onClauseUpdated,
     pasteToContract: props.pasteToContract
@@ -87,7 +87,7 @@ const ContractEditor = (props) => {
   const isFormulaDependency = useCallback((editor, variableNode) => {
     let formulaClauseName;
     let isVariableFormulaDependency = false;
-    if (!hoveringFormulaContract) return isVariableFormulaDependency;
+    if (!hoveringFormulaContract || !formulaNode) return isVariableFormulaDependency;
     const formulaPATH = ReactEditor.findPath(editor, formulaNode);
     const variablePATH = ReactEditor.findPath(editor, variableNode);
     // eslint-disable-next-line no-restricted-syntax
diff --git a/packages/ui-contract-editor/src/lib/components/Formula/index.js b/packages/ui-contract-editor/src/lib/components/Formula/index.js
index 0fa0d15e..9fcf8b98 100644
--- a/packages/ui-contract-editor/src/lib/components/Formula/index.js
+++ b/packages/ui-contract-editor/src/lib/components/Formula/index.js
@@ -9,23 +9,23 @@ import { FORMULA } from '../../ContractEditor/plugins/withClauseSchema';
 //  overflow-wrap: break-word; // NEEDS TO BE NONE
 export const FormulaTooltip = styled.span`
   visibility: ${props => (props.currentHover ? 'visible' : 'hidden')};
-  margin-top: -${props => props.tooltipHeight}em;
+  margin-top: -${props => (props.tooltipHeight + 1.35)}em;
   white-space: normal;
 
   &:before {
     content: '';
     position: absolute;
-    top: ${props => props.caretTop}px;
+    bottom: -6.7px;
     left: ${props => props.caretLeft - 1}px;
-    border-top: 5px solid #141F3C;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
+    border-top: 6px solid #141F3C;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
   }
 
   &:after {
     content: '';
     position: absolute;
-    top: ${props => props.caretTop}px;
+    bottom: -6.7px;
     left: ${props => props.caretLeft}px;
     border-top: 4px solid #141F3C;
     border-left: 4px solid transparent;
@@ -70,13 +70,13 @@ const Formula = React.forwardRef((props, ref) => {
   const formulaProps = {
     id: data.name,
     className: FORMULA,
-    ref
+    ref,
+    ...attributes
   };
 
   const formulaTooltip = {
     className: 'variableTooltip',
     currentHover: hoveringFormula,
-    caretTop: 21,
     caretLeft: 2,
     tooltipHeight: 1.85,
     contentEditable: false
@@ -84,10 +84,10 @@ const Formula = React.forwardRef((props, ref) => {
 
   return (
     <span {...wrapperProps}>
-        <FormulaTooltip {...formulaTooltip}>
-            {data.code}
-        </FormulaTooltip>
-        <span {...formulaProps}>{children}</span>
+      <FormulaTooltip {...formulaTooltip}>
+          {data.code}
+      </FormulaTooltip>
+      <span {...formulaProps}>{children}</span>
     </span>
   );
 });
diff --git a/packages/ui-contract-editor/src/lib/styles.css b/packages/ui-contract-editor/src/lib/styles.css
index a226c190..9bfd2ae5 100644
--- a/packages/ui-contract-editor/src/lib/styles.css
+++ b/packages/ui-contract-editor/src/lib/styles.css
@@ -47,19 +47,9 @@ a {
     background-color: #d4d8e1;
 }
 
-.variableTooltip {
-    opacity: 1 !important;
-    border: 1px solid #141F3C;
-    border-radius: 2px;
-    background-color: #141F3C;
-    transition-duration: 0.25s;
-    color: #FFFFFF;
-    padding: 1px 3px;
-    position: absolute;
-}
-
 .conditionalTooltip,
-.optionalTooltip {
+.optionalTooltip,
+.variableTooltip {
     opacity: 1 !important;
     border: 1px solid #141F3C;
     border-radius: 2px;