araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

refactor icons. Somehow button colors are no longer working...

Browse source
This commit is contained in:
Anika Raemer 2025-10-12 17:17:21 +02:00
parent a224397079
commit 3f075d509b
16 changed files with 152 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/components/basics/PasswordField.tsx
View file

@ -1,5 +1,6 @@
import { Eye, EyeOff } from "lucide-react";
import { useState } from "react";
import { defaultIconSize } from "./SvgIcon";
type PasswordFieldProps = {
onPasswordChanged: (password : string) => void
@ -12,7 +13,6 @@ type PasswordFieldProps = {
export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordFieldProps){
const [showPassword, setShowPassword] = useState(false);
const [password, setPassword] = useState<string>("");
const iconSize = 20;
const changePassword = (password : string) => {
setPassword(password);
@ -28,13 +28,14 @@ export default function PasswordField({onPasswordChanged, onKeyDown} : PasswordF
onChange={(e) => changePassword(e.target.value)}
onKeyDown={onKeyDown}
/>
{/* Add a little eye icon to the right for showing password */}
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
aria-label={showPassword ? "Passwort ausblenden" : "Passwort anzeigen"}
>
{showPassword ? <EyeOff size={iconSize} /> : <Eye size={iconSize} />}
{showPassword ? <EyeOff size={defaultIconSize} /> : <Eye size={defaultIconSize} />}
</button>
</div>
);