Login Screen UI

[izakrobles]

Issue Details

Design and implement a UI for the login screen which includes fields for username and password, along with a designated spot for a login button. The login button itself will handle the logic of authenticating the user and this aspect will be covered by @Stuartwastaken in a separate issue. The UI should incorporate a background image (the same one used in the mobile app) with a white box overlay for the input fields.

Technical Requirements

1. Create a login_screen.tsx file in the src/components folder.
2. In login_screen.tsx, design a layout that includes:
   • A background image identical to the one used in the mobile app.
   • A white box overlay that houses the input fields for username and password, and a designated area for the login button.
3. Ensure the layout is responsive and renders correctly on different screen sizes, maintaining a user-friendly interface and alignment with the overall styling of the application.

Acceptance Criteria

1. A login_screen.tsx file exists in the lib/components/pages folder.
2. The login screen UI renders the background image, the white box overlay with input fields for username and password, and a designated area for the login button.
3. The UI is responsive and maintains a consistent appearance across different screen sizes without any distortion or misalignment.
4. The design aligns with the overall styling and theme of the application, providing a seamless user experience.

Issue:
The necessity for a designated login screen emanates from the need to authenticate users before they access the application. The UI should be intuitive and user-friendly, encapsulating fields for username and password, and a spot for the login button. The background image, aligning with the mobile app's theme, alongside a white box overlay for the input fields, is envisaged to create a visually appealing and coherent user interface.