style: create global styles

[Matdweb]

About the Pull Request

This pull request aims to enhance the project by creating global CSS styles and Tailwind CSS properties. It involves the installation of essential packages, integration of new fonts, creation of consistent CSS classes for styling, and configuration changes in alignment with the provided design solutions in the Figma documents.

You can check them in the Figma documents for the desktop version and the responsive version.

Details

Objective

• Create global CSS and Tailwind properties to improve development efficiency and maintain consistency within the project.
• Utilize best practices and align with the design solutions specified in the Figma document.

Changes Made

1. Integration of New Fonts

   • Added Segoe UI and Roboto fonts to the project.
   • Created Tailwind CSS variables to facilitate their use throughout the project.

2. Creation of CSS Classes

   • Designed CSS classes for styling, following the Figma design solutions:
     • .font-big-title: For large titles.
     • .font-primary-title-roboto: For primary titles using the Roboto font.
     • .font-primary-title-bold: For bold primary titles.
     • .font-primary-text: For primary text elements.
     • .font-secondary-text: For secondary text elements.
     • .font-gray-text: For gray-colored text.

3. Responsive Solutions

   • Implemented responsive solutions based on the provided design solutions in the Figma document for a consistent interface.

Dependencies

• react-icons
• next/font

Configuration Changes

• Adjusted the Tailwind CSS configuration to:
  • Define primary colors.
  • Assign font families correctly.
  • Manually handle dark mode, following the Tailwind CSS documentation.

User Interface (UI) Changes

• The layout demonstrates the application of CSS classes and styles, providing a basic visual representation of their effects.

Testing

• The layout mentioned earlier is used for testing styles, configurations, and classes to ensure correct implementation. View the page rendering here.

Known Issues

• This pull request is a solution for the ticket 'Create Global Styles' (Creare global styles  #1).

Impact

User Impact

• This implementation significantly enhances the user experience by providing correct text sizes and fonts for effective information sharing.
• It also improves button styles with clear signifiers.

Performance Impact

• The use of next/font, even with local fonts like Segoe UI, significantly improves performance.

[Matdweb]

Hi,

It seems that react-icons libraryis missing but it will be handled in a separate ticket. To keep the development process smooth, I suggest merging this pull request while we create a new ticket specifically for addressing the 'react-icons' integration. Your prompt action on this matter is greatly appreciated.

Thank you!