From 813d321ef3515efddc5eb8fe8d13bbdd45e8f2cb Mon Sep 17 00:00:00 2001
From: Flora Li <samantha20200604@gmail.com>
Date: Tue, 6 Aug 2024 00:05:46 +1000
Subject: [PATCH] fix: Refine the color of the show password icon button fixed
 the user login/register page: - add hover and click effects for the show
 password icon button (eye icon button) Resolve CP-84

---
 src/shared/components/form/FormElements.tsx | 9 ++++++++-
 src/styles/palette.ts                       | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/form/FormElements.tsx b/src/shared/components/form/FormElements.tsx
index d2c1f35..91b60ea 100644
--- a/src/shared/components/form/FormElements.tsx
+++ b/src/shared/components/form/FormElements.tsx
@@ -7,6 +7,8 @@ import {
   colorFieldsBorder,
   colorText,
   colorWhite,
+  colorBlueHover,
+  colorBlueDarkHover,
 } from '@/styles/palette';
 import { left, paddingLeft, direction, marginLeft, marginRight } from '@/styles/directions';
 import { ButtonToolbar } from '../Button';
@@ -236,7 +238,12 @@ export const FormFieldButton = styled.button<{ $active?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-
+  &:hover {
+    background: ${(props) => (props.$active ? colorBlueDarkHover : colorFieldsBorder)};
+  }
+  &:active {
+    background-color: ${(props) => (props.$active ? colorBlueHover : colorFieldsBorder)};
+  }
   svg {
     fill: ${(props) => (props.$active ? colorWhite : colorAdditional)};
     width: 18px;
diff --git a/src/styles/palette.ts b/src/styles/palette.ts
index 4422d2d..173f63d 100644
--- a/src/styles/palette.ts
+++ b/src/styles/palette.ts
@@ -132,6 +132,7 @@ export const colorRedHover = darken(0.1, colorRed);
 export const colorBlue = '#70bbfd';
 export const colorLightBlue = '#87c3f7';
 export const colorBlueHover = darken(0.1, colorBlue);
+export const colorBlueDarkHover = darken(0.3, colorBlue);
 
 export const colorBlack = '#000000';
 export const colorGray = '#787985';