Redesign UI Elements Related to LoginPage.jsx

[gabrielvaca]

Refactor Styles for LoginPage to Improve Responsiveness on Mobile and Desktop

Objective:
Refactor the CSS for LoginPage to ensure it is fully responsive and provides an optimal user experience on both mobile and desktop devices.

Requirements:

• [x] Implement a mobile-first design approach, ensuring that the login page looks and functions well on mobile devices.
• [x] Use CSS media queries to add desktop-specific styles, adjusting layout and components for larger screens.
• [x] Ensure that all interactive elements (input fields, buttons) are easily accessible and usable on touch devices.
• [x] Optimize images and assets for fast loading times on mobile networks.
• [x] Test responsiveness and functionality across a range of devices using browser developer tools or physical devices.

Acceptance Criteria:

• The LoginPage renders effectively on screens as small as 320px in width without horizontal scrolling.
• The layout adjusts appropriately for desktop screens, with enhanced usability features suited for non-touch interfaces.
• All form inputs and buttons are comfortably usable on touch devices, with adequate size and spacing for touch interactions.
• Page performance is optimized for mobile users, with assets that load efficiently and do not hinder the initial page load.
• The page passes accessibility checks to ensure it meets standard usability requirements for users with disabilities.

[System-Garcia]

Resolved in #89