From 431c1fe9b35207db7f975db154c3c5ddc1f73926 Mon Sep 17 00:00:00 2001
From: Simon <simon.davis.dev@gmail.com>
Date: Tue, 2 Jul 2024 19:01:35 -0400
Subject: [PATCH] Updated PasswordField Icons and made it accessible

---
 src/components/PasswordField/PasswordField.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx
index 03cd33d..12002d6 100644
--- a/src/components/PasswordField/PasswordField.tsx
+++ b/src/components/PasswordField/PasswordField.tsx
@@ -1,4 +1,4 @@
-import { InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
+import { Button, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material";
 import { useState } from 'react'
 
 export const CustomInput = styled(TextField)({
@@ -48,12 +48,10 @@ export const PasswordField: React.FunctionComponent<TextFieldProps> = ({ ...prop
                 type={canViewPassword ? 'text' : 'password'}
                 InputProps={{
                     endAdornment: (
-                        <InputAdornment position="end" data-testid="toggle-view-password-btn" style={{
-                            cursor: 'pointer'
-                        }} onClick={() => {
+                        <InputAdornment position="end" data-testid="toggle-view-password-btn" onClick={() => {
                             setCanViewPassword((prevState) => !prevState)
                         }}>
-                            {canViewPassword ? <span data-testid="plain-text-indicator">🙀</span> : <span data-testid="password-text-indicator">😸</span>}
+                            {canViewPassword ? <Button data-testid="plain-text-indicator" sx={{ minWidth: 0, p: 0 }}>👁️</Button> : <Button data-testid="password-text-indicator" sx={{ minWidth: 0, p: 0 }}>👁️‍🗨️</Button>}
                         </InputAdornment>
                     )
                 }}