Implementation of Light Theme and Global Style Revision #9

gabrizord · 2024-09-08T20:18:29Z

This PR adds support for a light theme to the project and refines global styles across the layout, tables, and UI elements. Key changes include:

Introduction of CSS variables for the light theme.
Added a toggle button to switch between light and dark themes, with preference saved in localStorage.
Revised styles for the navbar, header, tables, and pagination to ensure visual consistency across themes.
Refactored JavaScript to manage theme switching and navigation behavior.
Removed unnecessary footer.
These changes enhance the accessibility and usability of the interface, providing a smoother and more responsive user experience.

…L structure removed unnecessary CSS properties from .header and .header_img classes in layout-styles.css. Updated header HTML to use Bootstrap classes for layout and added a theme toggle button to improve UX. this refactor simplifies the code, reduces redundancy, and aligns with Bootstrap's utility classes. The added theme toggle improves user experience by enabling dark/light mode switching.

…ality - Added light mode theme in CSS with corresponding color variables and applied it through JavaScript functions. - Enhanced navbar interaction by adding hover effects and improving toggle button functionality. - Refactored JavaScript functions for better readability, added comments, and organized theme switching logic with localStorage support. - Removed footer fragment references and deleted unused footer.html file from the project.

…gination layout - Updated background color for the search bar in the table styles to a lighter shade (`#f8f8f8`) for better contrast. - Refined the HTML structure in the company list page, improving alignment and readability of pagination elements. - Corrected formatting in the pagination loop for better clarity and consistency.

- Added `.sr-only` class in CSS for screen readers, ensuring better accessibility by styling hidden text used for captions. - Removed unnecessary text color styling from `sr-only` captions in company and employee tables to align with accessibility best practices. - Simplified heading text in the company list page and removed redundant whitespace for consistency.

refactor layout styles and comments in CSS and JS files to improve readability and maintain consistency. Updated Portuguese comments to English, fixed positioning issues in the layout, and removed redundant classes in navbar styling. Changes include: - Converted comments from Portuguese to English in CSS and JS files for better readability. - Fixed navbar position and improved layout in `layout-styles.css`. - Refined search bar and add button comments in `tables-styles.css`. - Updated JS comments to describe functionality in English and optimized navbar visibility logic. - Improved HTML structure in header and navbar templates for clarity.

adjusted the query selector in layout-script.js to target '.nav_list .nav_link' for more specific link selection. removed redundant theme toggle button in header.html. reorganized the structure of elements in navbar.html for better readability and consistency, including the dark mode button and logout form.