Create and Document ToolbarLogo and Theme Switcher UI Components for Reusable and Consistent Implementation

[esmaeil-ahmadipour]

Overview

Component/Feature: Reusable UI components
Reason: Current UI components are not reusable or aligned with the Figma design. A refactor is needed for consistency and maintainability.

Goals

• Identify and create reusable UI components from the Figma design.
• Align with Material 3 design specifications.
• Improve maintainability by consolidating UI elements into reusable components.

Proposed Changes

• Review the Figma design to identify reusable UI components (e.g., ToolbarLogo, Theme Switcher).
• For each reusable component identified, create a separate issue with detailed implementation steps.
• Document parameters and Material 3 specs for each component.
• Develop Flutter widgets for reusability and replace hardcoded UI elements with reusable components.

Design Reference

• Figma Design: Link to Figma Design

Related Issues

• issue #25: Implement Theme Management.
• issue #34: Refactor and align text styles in themes with Figma design specifications.

---

Tasks:

• Task 1: Create ToolbarLogo UI : Link 1 / Link 2
• Task 2: Write tests, and docs for ToolbarLogo
• Task 3: Write docs for ToolbarLogo
• Task 4: Create theme switcher UI, tests, and docs : Link 1 / Link 2
• Task 5: Write tests, and docs for theme switcher
• Task 6: Write docs for theme switcher

[esmaeil-ahmadipour]

Problem :

According material button spec , this dimensions is wrong and out of spec.
spec reference url : https://m3.material.io/components/buttons/specs#0697c92a-54ba-4921-b28a-0f4abeea0a85

and cant develop another styles of button according figma.
spec reference url : https://m3.material.io/components/buttons/specs#36956f5c-af6f-491a-99e8-2fa72d8d2d0c

Solutions:

1- the designer should update the design to align with the standard specifications of Material Design. This ensures consistency and a better user experience

2- we can implement a custom design without strictly adhering to Figma's design for now. This approach allows us to move forward and refactor later to align with the finalized design.

---

@Ja7ad

[esmaeil-ahmadipour]

One problem that needs to be fixed is the inconsistency between the light theme and dark theme in the Figma design. These differences should be addressed to ensure uniformity across both themes.

Example item 1

Example item 2

---

@Ja7ad

[esmaeil-ahmadipour]

📊 Current Status:

Progress: 100%
Inprogress Task: none

• ✔️ Completed Tasks:
  • Task 1: Create ToolbarLogo UI : Link 1 / Link 2
  • Task 2: Write tests, and docs for ToolbarLogo
  • Task 3: Write docs for ToolbarLogo
  • Task 4: Create theme switcher UI, tests, and docs : Link 1 / Link 2
  • Task 5: Write tests, and docs for theme switcher
  • Task 6: Write docs for theme switcher

🚧 Challenges/Blockers:

• Not identified

🛤️ Next Steps:

• Estimated time for completion: -

❓ Questions/Requests:

• none