From 4fee5ed92ee01fa978c9a0144e8a30fcdab54901 Mon Sep 17 00:00:00 2001
From: Victor Kostyuk <torcoste@gmail.com>
Date: Mon, 30 Oct 2023 11:26:14 +0100
Subject: [PATCH] fix: calculateHoverColor typo (#28329)

## Description
Renaming the widget utility function `calulateHoverColor` to
`calculateHoverColor`.
Reason: typo

Fixes:
#28473

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 app/client/src/pages/AppViewer/utils.ts | 8 ++++----
 app/client/src/widgets/WidgetUtils.ts   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/client/src/pages/AppViewer/utils.ts b/app/client/src/pages/AppViewer/utils.ts
index a65626b8d3..f55878f1ef 100644
--- a/app/client/src/pages/AppViewer/utils.ts
+++ b/app/client/src/pages/AppViewer/utils.ts
@@ -3,7 +3,7 @@ import { NAVIGATION_SETTINGS } from "constants/AppConstants";
 import { Colors } from "constants/Colors";
 import tinycolor from "tinycolor2";
 import {
-  calulateHoverColor,
+  calculateHoverColor,
   getComplementaryGrayscaleColor,
   isLightColor,
 } from "widgets/WidgetUtils";
@@ -30,7 +30,7 @@ export const getMenuItemBackgroundColorWhenActive = (
       }
     }
     case NAVIGATION_SETTINGS.COLOR_STYLE.THEME: {
-      return calulateHoverColor(color);
+      return calculateHoverColor(color);
     }
   }
 };
@@ -44,7 +44,7 @@ export const getMenuItemBackgroundColorOnHover = (
   if (navColorStyle === NAVIGATION_SETTINGS.COLOR_STYLE.LIGHT) {
     return "var(--ads-v2-color-bg-subtle)";
   } else if (navColorStyle === NAVIGATION_SETTINGS.COLOR_STYLE.THEME) {
-    return tinycolor(calulateHoverColor(color)).toHexString();
+    return tinycolor(calculateHoverColor(color)).toHexString();
   }
 };
 
@@ -136,7 +136,7 @@ export const getSignInButtonStyles = (
     styles.color = isLightColor(color) ? Colors.WHITE : color;
   }
 
-  styles.backgroundOnHover = calulateHoverColor(styles.background, false);
+  styles.backgroundOnHover = calculateHoverColor(styles.background, false);
 
   return styles;
 };
diff --git a/app/client/src/widgets/WidgetUtils.ts b/app/client/src/widgets/WidgetUtils.ts
index 01e5323a7b..9acf123c4c 100644
--- a/app/client/src/widgets/WidgetUtils.ts
+++ b/app/client/src/widgets/WidgetUtils.ts
@@ -142,17 +142,17 @@ export const getCustomHoverColor = (
   switch (buttonVariant) {
     case ButtonVariantTypes.SECONDARY:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, true)
+        ? calculateHoverColor(backgroundColor, true)
         : theme.colors.button.primary.secondary.hoverColor;
 
     case ButtonVariantTypes.TERTIARY:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, true)
+        ? calculateHoverColor(backgroundColor, true)
         : theme.colors.button.primary.tertiary.hoverColor;
 
     default:
       return backgroundColor
-        ? calulateHoverColor(backgroundColor, false)
+        ? calculateHoverColor(backgroundColor, false)
         : theme.colors.button.primary.primary.hoverColor;
   }
 };
@@ -175,7 +175,7 @@ export const getCustomHoverColor = (
  *
  * @returns An RGB string (in case of transparent backgrounds) or a HSL string (in case of solid backgrounds).
  */
-export const calulateHoverColor = (
+export const calculateHoverColor = (
   backgroundColor: string,
   hasTransparentBackground?: boolean,
 ) => {