Inconsistent Font Sizes and Colors Across the Application

[Paxxack]

Review and standardize font sizes, colors, and capitalization across the application to match the Figma design system. Fix inconsistencies in font usage, color application, and capitalization of text elements. Utilize the globalTheme for centralized control of typography and color standards, ensuring the app is consistent and professional.

Note: This should be coordinated with Improve App Responsiveness (#152) so that any typography or spacing changes also respect responsive design. Update the globalTheme as needed to handle both color and responsive typography.

---

Tasks

Typography

• Refactor font sizes to use globalTheme variables for maintainability.
• Align with Figma specs (e.g., 11px for grayed-out notes, 13px for main content, 16px for titles) or other design tokens if given.
• Remove improper capitalization (only capitalize first word in headings/tags/buttons).
• Ensure all references to font sizes (e.g., px or inline values) are replaced with theme tokens or MUI typography variants.

Color Consistency

• Standardize font colors in line with Figma, E.g.:
  • #344054 for dark main text,
  • #A1AFC6 for grayed-out notes,
  • #1570EF for highlights/links.
• Remove any instances of pure black in the application, using theme-based neutral or brand color instead.
• Use globalTheme color variables for all text and backgrounds, avoiding inline color codes.

Additional Fixes

• Ensure all menus have consistent shadows across the app.
• Review hover states for buttons/links to match Figma designs (colors, underline, etc.).
• Confirm no duplicated style definitions exist; unify them in the theme where possible.

Page-Specific Tasks

1. Documents Page

   • Verify/update font sizes, colors, capitalization for table headers/rows.
   • Ensure any custom text styles align with globalTheme.

2. Profile Page

   • Update form labels, inputs, and avatar text with consistent font sizes and color usage.
   • Check capitalization on field labels and action buttons.

3. Contacts Page

   • Align headers, table content, row details with theme-based typography.
   • Fix any color mismatches (e.g., headings or text using the wrong hex).

4. Document Details Page

   • Ensure all sections (headers, subheaders, body text) use the same theme-based sizing and color tokens.
   • Fix any leftover inline color or font-size definitions.

---

Notes

• Refer to the Figma design system for exact typography and color guidelines.
• Collaborate with Improve App Responsiveness #152 to avoid duplicating spacing or breakpoints changes.
• The globalTheme must be expanded or refined to include all relevant tokens for typography (sizes, weights) and color (text colors, highlights, hover states).

---

Deliverables

• Standardized font sizes, colors, and capitalization across all relevant pages.
• Updated globalTheme for typography/color variables (removing inline styling).
• Screenshots demonstrating consistent typography and color usage, especially on pages with tables/forms.

[mahid797]

Updated the Issue description, please review it @SepidehShahbazi