🛠 Upgrade the colors of tailwind input components + 🛠 Tailwind Consultation Form + 🛠 Tailiwnd discharge patient dialog

[rithviknishad]

Proposed Changes

• Resolves Tailwind Consultation Form #3594
• Resolves Text box and borderline are different across the platform #4271
• Resolves Update the colors used by the new tailwind input components #4277
• Closes Migrate to TextAreaFormField Part 1 (9 migrations) #4318
• Fixes Diagnosis Select causes to select/unselect unintended option when dropdown goes out of focus #4328
• Fixes Create consultation button is misaligned #4336
• Tailwind the Consultation form partially
• Tailwind the Discharge from care dialog box.
• Upgrade colors of:
  • TextFormField
  • TextAreaFormField
  • SelectMenuV2
  • MultiSelectMenuV2
  • AutoCompleteAsync
  • DateInputV2
  • PhoneInput
• TextAreaFormField's colours have been upgraded to the latest design.
• Replaced all material UI's InputLabel and MultilineInputField to tailwind components FieldLabel and TextFormField in the Consultation form.

Upgrades the colors of tailwind input components and reverted to original grey shades

So far we had 3 shades of gray, and now 1 remains.

1. Tailwind's gray accessible through secondary
   

2. The CARE gray
   

3. The CARE gray that got deviated to match Figma (thinking Figma had correct colors) in 📖 Storybook + 🛠 Tailwind Patient Filters #3744
   

Made PhoneNumberInput into 1 piece

Before

After

useAsyncOptions hook helps compose async autocompletes with ease and type-safety :)

New Components 🚀

1. SymptomsSelect

(because ASYMPTOMATIC is listed under symptoms)

Screenshots

2. PatientCategorySelect

(because it has category-specific colors)

---

3. DiagnosisSelect

(because earlier one had issues, and wasn't FormField compliant)

4. SelectFormField

{/* A FormField compliant component of SelectMenuV2 */}
<SelectFormField
  required
  label="Decision after consultation"
  {...selectField("suggestion")}
  options={CONSULTATION_SUGGESTION}
/>

---

5. MultiSelectFormField

{/* A FormField compliant component of MultiSelectMenuV2 */}
<MultiSelectFormField
  required
  label="Decision after consultation"
  {...selectField("suggestion")}
  options={CONSULTATION_SUGGESTION}
/>

(No screenshot for this, as it's not directly used anywhere so far)

---

6. AutocompleteV2

(not used anywhere so far, built it now itself because AutocompleteMultiselect was built parallely)

---

7. AutocompleteMultiSelectV2

---

8. AutocompleteMultiSelectFormField

(Same usage and as the DiagnosisSelect mentioned above)

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

Screenshots

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Update product documentation.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews
• Completion of QA

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
care-storybook	✅ Ready (Inspect)	Visit Preview	Dec 21, 2022 at 4:27PM (UTC)

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	771e215
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/63a33392354da100099b7351
😎 Deploy Preview	https://deploy-preview-4309--care-egov-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[nihal467]

@rithviknishad

when someone selecting any symptoms, all the times, if we are seeing this alert statement, feel like it will confuse a normal user a bit, can you take this up in the EOD, and the opinion

[github-actions]

👋 Hi, @rithviknishad,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[nihal467]

@rithviknishad

make the border green

[nihal467]

@rithviknishad

https://app.flonnect.com/view/video/nihalcct/63a2bd33f31aaa756efa33bb

in the diagnosis, if I select anything starting with 1A, the multi-select are working properly, but when I select something of 3A, then the already selected 1A starting diagnosis are getting unselected

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
41 Code Smells

No Coverage information
0.0% Duplication

[nihal467]

LGTM