Varkopat/feature/658/implement new teachersignincard component

[Varkopat]

📄 Pull Request Overview

Closes #658

🔧 Changes Made

1. [Briefly describe changes you made]

Implemented and polished the teacher sign-in card UI.

Key changes:

• Added username and password visibility toggles with eye icons.
• Updated the ALT logo and teacher character sizing/positioning to match the provided Figma/screenshot specs.
• Adjusted .Container and .Card layout to center the card properly.
• Center-aligned the username input, password input, and submit button while preserving Figma dimensions.
• Refined .SubmitButton styling, spacing, sizing, border, and text alignment.
• Verified the touched component with npm.cmd run lint -- --file src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.tsx.

2. [Any refactoring or clean-up tasks]

A few clean-up notes:

• Reused one local VisibilityIcon component for both username and password toggles instead of duplicating inline SVGs.
• Removed conflicting/off-screen positioning values from the card-related styles.
• Replaced invalid or awkward layout values, such as nonfunctional absolute offsets.
• Added box-sizing: border-box to preserve Figma dimensions while keeping padding from shifting inputs.
• Kept the changes scoped to TeacherSignInCard styles and markup.

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

Provide any additional context or information that reviewers may need to know:

• Screenshots: [Include any screenshots or videos if the changes affect the UI]

[Rutjake]

Great job overall! Just a few minor tweaks to match the Figma design (please also check the specific comments left on the code lines):

• Card borders: The card corners should be slightly rounded.
• Button: The button needs more rounded ends (higher border-radius).
• Login card size: The login card seems a bit smaller relative to the screen size in Figma compared to the current implementation.

[Varkopat]

Great job overall! Just a few minor tweaks to match the Figma design (please also check the specific comments left on the code lines):

• Card borders: The card corners should be slightly rounded.
• Button: The button needs more rounded ends (higher border-radius).
• Login card size: The login card seems a bit smaller relative to the screen size in Figma compared to the current implementation.

Thanks for your feedback! I made the requested changes in my latest pushes. Here is a screenshot of current UI:

[Rutjake]

Good Work!

[Skoivumaki]

Good use of existing components and variables, everything works and looks as expected. Your code looks very professional and you have clearly been reading the wiki👍
Some feedback:

• I noticed you declared some CSS px values in decimals. Precision like this is notable, but doesn't make much sense since most browsers will round it to the nearest value. (you cant split a pixel, 1px is always 1px etc)
• If you want even cleaner code, you can move SVG code into an actual .svg, its just XML text in the end.
• Usually we fetch translations useClientTranslation('teachers'); only in the top parent page.tsx layer and not in components them self. This is due to code readability and it negates potential errors. But the TeacherSignInCard is the only component which requires translations anyway, so its completely acceptable in this case.