fix: lint issues

razorpay · Oct 29, 2024 · 7fb4b7e · 7fb4b7e
1 parent 0ea1e49
commit 7fb4b7e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx b/packages/blade/src/components/Button/IconButton/StyledIconButton.web.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import type { ReactElement } from 'react';
 import React from 'react';
 import type { StyledIconButtonProps } from './types';
+import { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens';
 import { castWebType, makeSize } from '~utils';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { SubtleOrIntense } from '~tokens/theme/theme';
@@ -11,7 +12,6 @@ import { makeMotionTime } from '~utils/makeMotionTime';
 import { getFocusRingStyles } from '~utils/getFocusRingStyles';
 import { throwBladeError } from '~utils/logger';
 import getIn from '~utils/lodashButBetter/get';
-import { highlightedButtonSizeMap, highlightedHoverColorMap } from './tokens';
 
 type StyledButtonProps = {
   emphasis: SubtleOrIntense;

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -11,7 +11,7 @@ import type {
   TableCellProps,
   TableBackgroundColors,
 } from './types';
-import getIn from '~utils/lodashButBetter/get';
+import getIn, { DotNotationToken } from '~utils/lodashButBetter/get';
 import { Text } from '~components/Typography';
 import type { CheckboxProps } from '~components/Checkbox';
 import { Checkbox } from '~components/Checkbox';
@@ -33,6 +33,36 @@ const getTableRowBackgroundTransition = (theme: Theme): string => {
   return rowBackgroundTransition;
 };
 
+const getTableActionsHoverStyles = ({
+  hoverColor,
+  theme,
+  backgroundGradientColor,
+}: {
+  hoverColor: DotNotationToken<Theme['colors']>;
+  backgroundGradientColor?: DotNotationToken<Omit<Theme['colors'], 'name'>>;
+  theme: Theme;
+}): React.CSSProperties => {
+  const rowBackgroundTransition = getTableRowBackgroundTransition(theme);
+
+  return {
+    // Solid layer 1 background - should match the table background
+    [`& .${classes.HOVER_ACTIONS}`]: {
+      backgroundColor: getIn(theme.colors, tableBackgroundColor),
+      transition: rowBackgroundTransition,
+    },
+    // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc
+    [`& .${classes.HOVER_ACTIONS_LAYER2}`]: {
+      backgroundColor: getIn(theme.colors, backgroundGradientColor ?? 'transparent'),
+      transition: rowBackgroundTransition,
+    },
+    // Alpha layer 3 background - Hover, selection, active background
+    [`& .${classes.HOVER_ACTIONS_LAYER3}`]: {
+      backgroundColor: getIn(theme.colors, hoverColor),
+      transition: rowBackgroundTransition,
+    },
+  };
+};
+
 const StyledBody = styled(Body)<{
   $isSelectable: boolean;
   $showStripedRows: boolean;
@@ -318,36 +348,6 @@ const TableCheckboxCell = ({
   );
 };
 
-const getTableActionsHoverStyles = ({
-  hoverColor,
-  theme,
-  backgroundGradientColor,
-}: {
-  hoverColor: any;
-  backgroundGradientColor?: any;
-  theme: Theme;
-}): React.CSSProperties => {
-  const rowBackgroundTransition = getTableRowBackgroundTransition(theme);
-
-  return {
-    // Solid layer 1 background - should match the table background
-    [`& .${classes.HOVER_ACTIONS}`]: {
-      backgroundColor: getIn(theme.colors, tableBackgroundColor),
-      transition: rowBackgroundTransition,
-    },
-    // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc
-    [`& .${classes.HOVER_ACTIONS_LAYER2}`]: {
-      backgroundColor: getIn(theme.colors, backgroundGradientColor),
-      transition: rowBackgroundTransition,
-    },
-    // Alpha layer 3 background - Hover, selection, active background
-    [`& .${classes.HOVER_ACTIONS_LAYER3}`]: {
-      backgroundColor: getIn(theme.colors, hoverColor),
-      transition: rowBackgroundTransition,
-    },
-  };
-};
-
 const StyledRow = styled(Row)<{
   $isSelectable: boolean;
   $isHoverable: boolean;

diff --git a/packages/blade/src/components/Table/types.ts b/packages/blade/src/components/Table/types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import type { Theme } from '~components/BladeProvider';
 import type { BoxProps } from '~components/Box';
 import type { StyledPropsBlade } from '~components/Box/styledProps';