Repository metrics
- Stars
-  (17 åã®ã¹ã¿ãŒ)
- PR merge metrics
- Â (PR metrics pending)
説æ
Important Note
- Please read the guidelines first
- Include the open-source program name(s) you are part of in your comment
Issue Description
Design and implement the Sign In Page UI for the WallGodds app, allowing users to sign into an existing account using social providers or email credentials.
Design Requirements
-
Strictly UI Only: This task focuses purely on the UI layout and basic input behavior. No authentication logic, API calls, or account creation functionality is required.
-
Header Section: i. Display the âSign Inâ title prominently at the top. ii. Below it, include the subtitle: âWelcome back! Sign in to explore and manage your favorite wallpapers"
-
Social Sign-In Options: i. Provide three rounded buttons for signing up using external providers: Google, Microsoft and Github ii. Each button should include the respective logo and label, styled consistently with the design.
-
Divider Text: Display a small âorâ text separating the social login options and the email form.
-
Input Fields: i. Create four rounded text input fields: Email *, Password * ii. The Password and Confirm password fields must hide the entered text and display "*" characters instead.
-
Forgot Password: i. Add a right aligned clickable text "Forgot Password?" ii. Just make the button clickable and that's it. No need to assign navigation or any other logic to it.
-
Primary Action Button: i. Add a prominent âSign Inâ button below the form fields. ii. No submission logic is required.
-
Sign-In Redirect Text: Display the text: i. "Donât have an account ? Sign up here" ii. The âSign up hereâ portion should be a button and appear visually highlighted.
-
Scope Limitation: i. This issue focuses only on rendering the UI. ii. Authentication, validation, and navigation logic are not part of this task.
Reference: Check the design.md file in the repository to get your hands on the Figma design file. Ensure the layout, spacing, icons and typography strictly follow the provided design.
If you face any issues while working on this page or have questions, feel free to reach out to us on Discord â weâre always happy to help!