Skip to content

Varkopat/feature/658/implement new teachersignincard component#663

Open
Varkopat wants to merge 10 commits into
devfrom
Varkopat/feature/658-implement-new-teachersignincard-component
Open

Varkopat/feature/658/implement new teachersignincard component#663
Varkopat wants to merge 10 commits into
devfrom
Varkopat/feature/658-implement-new-teachersignincard-component

Conversation

@Varkopat

@Varkopat Varkopat commented Jun 29, 2026

Copy link
Copy Markdown

📄 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.
  1. [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]
screenshot

Varkopat added 10 commits June 4, 2026 17:40
- Created TeacherSignInCard component for teacher sign-in functionality.
- Added styles for the TeacherSignInCard in TeacherSignInCard.module.scss.
- Implemented visibility toggle for username and password fields.
- Integrated ALT logo and teacher character images.
- Set up routing to navigate to the instructions page upon form submission.

TODO: Adjust UI to match Figma Designs.
…siveness.

I centered the input/button rail while keeping the Figma dimensions:
.Form is now centered inside .Card.
.UsernameInput and .PasswordInput keep 438.51px x 54.54px, but now use box-sizing: border-box so padding does not push them off-center.
Input wrappers and form groups center their children.
.SubmitButton keeps its Figma size and is centered with flex alignment.
Verification passed without ESLint warnings or errors: npm.cmd run lint -- --file src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant