Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed UI for Live/Discharged Tabs in Patients Page #5543

Merged
merged 13 commits into from
Jun 13, 2023
Merged

Changed UI for Live/Discharged Tabs in Patients Page #5543

merged 13 commits into from
Jun 13, 2023

Conversation

GokulramGHV
Copy link
Member

@GokulramGHV GokulramGHV commented May 26, 2023 •
edited by ghost
Loading

WHAT

🤖 Generated by Copilot at 5f17ac0

This pull request updates several components in the coronasafe/care_fe repository to improve the UI, UX, and localization of different views. It introduces a new component called SwitchTabs that can be used to switch between tabs, and replaces the NavTabs component with it. It also replaces the button elements with the ButtonV2 components, which provide a consistent and customizable UI for buttons. It also uses the useTranslation hook and the t function to translate the text based on the current language. It also modifies the layout and alignment of the header sections of different views to make them more consistent and responsive.

Proposed Changes

  • Fixes Titles should be more highlighted  #5441
  • Created a new component named SwitchTabs
  • Changed UI for the live/dischared tabs in patients page
  • Used the SwitchTabs components for (Active/Completed) in Resource and Shifting pages.

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

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

HOW

🤖 Generated by Copilot at 5f17ac0

  • Create a new SwitchTabs component that renders two buttons for tab switching (link)
  • Replace the NavTabs component with the SwitchTabs component in the PatientManager component, and comment out the unused code (link, link, link, link)
  • Use the SwitchTabs component in the ResourceBoardView and BoardView components, and adjust the layout and spacing of the header elements (link, link, link, link, link)
  • Add the ButtonV2 component that provides a consistent and customizable UI for buttons, and use it in the AssetsList, ListView, ResourceBoardView, and BoardView components, replacing the button elements (link, link, link, link, link, link, link, link, link)
  • Add the useTranslation hook that enables localization of the UI text, and use it in the ListView and ResourceBoardView components, adding the t function to the button text (link, link, link, link)
  • Improve the alignment and spacing of the PageTitle and the Add Patient Details button in the PatientManager component, and move them to the left side of the header (link, link)
  • Adjust the bottom padding of the Loading component in the PatientManager component to match the new layout of the header (link)
  • Add a className attribute to the span element in the AdvancedFilterButton component, which sets the vertical padding to 0.5 units (link)
  • Remove the unused import of the NavTabs component from the ManagePatients component (link)
  • Reduce the horizontal gap between the header elements in the BoardView component to avoid overflow (link)

@GokulramGHV GokulramGHV requested a review from a team May 26, 2023 12:18
@GokulramGHV GokulramGHV requested a review from a team as a code owner May 26, 2023 12:18
@GokulramGHV GokulramGHV requested a review from gigincg May 26, 2023 12:18
@vercel
Copy link

vercel bot commented May 26, 2023 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
care-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 13, 2023 8:26am

@netlify
Copy link

netlify bot commented May 26, 2023 •
edited
Loading

✅ Deploy Preview for care-egov-staging ready!

Name Link
🔨 Latest commit d160d59
🔍 Latest deploy log https://app.netlify.com/sites/care-egov-staging/deploys/648827dd885b1c0008849219
😎 Deploy Preview https://deploy-preview-5543--care-egov-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@nihal467
Copy link
Member

@GokulramGHV
image

  • Make the button full width on the mobile view
  • make it consistent in external results too

@GokulramGHV
Copy link
Member Author

@nihal467 I've made the requested changes

@nihal467
Copy link
Member

LGTM

@nihal467 nihal467 mentioned this pull request May 29, 2023
Closed
@github-actions github-actions bot added the merge conflict pull requests with merge conflict label May 30, 2023
@github-actions
Copy link

👋 Hi, @GokulramGHV,
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.

khavinshankar
khavinshankar reviewed May 30, 2023
View reviewed changes
src/CAREUI/interactive/FiltersSlideover.tsx Outdated
Comment on lines 58 to 59
<i className="fa fa-filter" aria-hidden="true"></i>
<span className="py-0.5">{t("advanced_filters")}</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@GokulramGHV can you use care icon instead of font-awesome

src/Components/Shifting/ListView.tsx Outdated
Comment on lines 313 to 315
<i
className="fa fa-list mr-1 transform rotate-90"
aria-hidden="true"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here too, use care icon

@nihal467
Copy link
Member

@GokulramGHV clear the merge conflict

@GokulramGHV GokulramGHV added needs testing and removed test failed merge conflict pull requests with merge conflict labels Jun 5, 2023
@nihal467
Copy link
Member

nihal467 commented Jun 5, 2023

@GokulramGHV check the failed cypress

@nihal467 nihal467 added the cypress failed pull request with cypress test failure label Jun 5, 2023
@sonarcloud
Copy link

sonarcloud bot commented Jun 6, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

No Coverage information No Coverage information
0.0% 0.0% Duplication

@nihal467
Copy link
Member

nihal467 commented Jun 6, 2023 •
edited
Loading

@GokulramGHV fix the cypress, the test is failing since you change the button
image

@vercel
Copy link

vercel bot commented Jun 9, 2023

@nihal467 is attempting to deploy a commit to the Coronasafe Team on Vercel.

A member of the Team first needs to authorize it.

@nihal467 nihal467 added needs testing and removed cypress failed pull request with cypress test failure changes required labels Jun 11, 2023
@nihal467
Copy link
Member

LGTM

khavinshankar
khavinshankar approved these changes Jun 12, 2023
View reviewed changes
src/Components/Patient/ManagePatients.tsx Outdated Show resolved Hide resolved
@khavinshankar khavinshankar merged commit 5f0db99 into ohcnetwork:develop Jun 13, 2023
22 of 23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khavinshankar khavinshankar khavinshankar approved these changes

@gigincg gigincg Awaiting requested review from gigincg

Assignees
No one assigned
Labels
tested
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Titles should be more highlighted
3 participants
@GokulramGHV @nihal467 @khavinshankar