From 692a91f6db0cc3850741d5a62f735a97d4490774 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Tue, 10 Feb 2026 21:41:59 +0530
Subject: [PATCH] refactor: replace emoji-based password visibility toggles
 with SVG icons using `next/image` components.

---
 .../settings/PasswordSecurityForm.tsx         | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/PasswordSecurityForm.tsx b/src/components/settings/PasswordSecurityForm.tsx
index aabbf60..9a0e005 100644
--- a/src/components/settings/PasswordSecurityForm.tsx
+++ b/src/components/settings/PasswordSecurityForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import Image from 'next/image';
 import { TwoFactorSettings } from './TwoFactorSettings';
 import api from '@/services/api';
 
@@ -146,7 +147,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('current')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.current ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.current ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.current ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
           </div>
@@ -169,7 +175,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('new')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.new ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.new ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.new ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
             <p className="text-[11px] text-[#00293D]/50 font-serif mt-1">
@@ -195,7 +206,12 @@ export function PasswordSecurityForm({ onSave }: PasswordSecurityFormProps) {
                 onClick={() => toggleShowPassword('confirm')}
                 className="absolute right-4 top-1/2 -translate-y-1/2 text-[#00293D]/50 hover:text-[#00293D] cursor-pointer"
               >
-                {showPasswords.confirm ? '🙈' : '👁️'}
+                <Image
+                  src={showPasswords.confirm ? '/assets/icons/eye-off-icon.svg' : '/assets/icons/eye-icon.svg'}
+                  alt={showPasswords.confirm ? 'Hide password' : 'Show password'}
+                  width={20}
+                  height={20}
+                />
               </button>
             </div>
           </div>