Refactor all search bars into reusable components

[palisadoes]

This will require someone with proven expertise

Problem Definition

Is your feature request related to a problem? Please describe.

1. All screens have custom search bars
2. This makes the UI/UX inconsistent and the code hard to manage
   1. For example, icons and related search bar buttons are frequently misaligned.
   2. Buttons often don't work

Describe the solution you'd like

1. Use a single reusable component for all search bars
2. Ensure that all translations are completed
3. Refactor the code:
   1. to match that of the Figma design AND have a consistent UI/UX
      • https://docs.talawa.io/docs/design/ux-design-system#talawa-admin---figma-designs
   2. exclusively use shared components and appropriate props for both the Admin and User portal. When in doubt, follow the guidance here:
      • https://docs-admin.talawa.io/docs/developer-resources/reusable-components
4. Ensure that existing features are maintained in each screen
5. Update the test suite to achieve 100% code coverage for your patch.
6. Ensure all tests submitted are functional and valid
7. Fix the profile links and write tests to ensure this feature doesn't break.

Be aware of these related issues:

1. Refactor all search bars into reusable components #4674
2. Refactor: Select Organization Screen #4673
3. Refactor all reporting tables into modular components #4676
4. Refactor The Left Navigation Bar to Reusable Components #4735
5. Refactor: User Profile Page to Match Figma (Admin and User Portal) #4637

Other

Potential internship candidates

Please read this if you are planning to apply for a Palisadoes Foundation internship

• Student Internship Programs talawa#359