refactor(console): table hover behaviors (#2938)

packages/console/src/components/Table/index.module.scss

@@ -67,29 +67,29 @@
 
           &.clickable {
             cursor: pointer;
+          }
+        }
 
-            &:hover {
-              background: var(--color-hover);
+        tr.hoverEffect:hover {
+          background: var(--color-hover);
 
-              td {
-                border-top: 1px solid transparent;
-              }
+          td {
+            border-top: 1px solid transparent;
+          }
 
-              + tr {
-                td {
-                  border-top: 1px solid transparent;
-                }
-              }
-
-              td:first-child {
-                border-radius: 8px 0 0 8px;
-              }
-
-              td:last-child {
-                border-radius: 0 8px 8px 0;
-              }
+          + tr {
+            td {
+              border-top: 1px solid transparent;
             }
           }
+
+          td:first-child {
+            border-radius: 8px 0 0 8px;
+          }
+
+          td:last-child {
+            border-radius: 0 8px 8px 0;
+          }
         }
       }
     }

packages/console/src/components/Table/index.tsx

@@ -28,6 +28,7 @@ type Props<
   columns: Array<Column<TFieldValues>>;
   rowIndexKey: TName;
   filter?: ReactNode;
+  isRowHoverEffectDisabled?: boolean;
   isRowClickable?: (row: TFieldValues) => boolean;
   rowClickHandler?: (row: TFieldValues) => void;
   className?: string;
@@ -48,6 +49,7 @@ const Table = <
   columns,
   rowIndexKey,
   filter,
+  isRowHoverEffectDisabled = false,
   rowClickHandler,
   isRowClickable = () => Boolean(rowClickHandler),
   className,
@@ -130,7 +132,10 @@ const Table = <
                     return (
                       <tr
                         key={row[rowIndexKey]}
-                        className={classNames(rowClickable && styles.clickable)}
+                        className={classNames(
+                          rowClickable && styles.clickable,
+                          !isRowHoverEffectDisabled && styles.hoverEffect
+                        )}
                         onClick={onClick}
                       >
                         {columns.map(({ dataIndex, colSpan, className, render }) => (

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx

@@ -177,6 +177,7 @@ const LanguageDetails = () => {
       </div>
       <div className={styles.container}>
         <Table
+          isRowHoverEffectDisabled
           className={styles.content}
           headerClassName={styles.tableWrapper}
           bodyClassName={styles.tableWrapper}