MedFlare : UI Changes in the Home Page

mateahoward commented 1 year ago

Related Issue

Info about the related issue
[x] Hacktoberfest Participant
[ ] Contributor

Closes: #46 46 (Issue can be found here https://github.com/prathimacode-hub/MedFlare/issues/46)

Describe the changes you've made

Give a clear description what modifications you have made

replaced multiple<h1> elements with a <h2> instead (only one <h1> is allowed per page)
added a meta description to (text used has been copied from the header)
added alt text attribute to images that were missing (I left the values empty as they're decorative images)
updated the colours of CTA-1 and CTA-2 buttons to match WCAG 2.1 contrast requirements
applied the:target and:focus styles to CTA-1 and CTA-2 we've used on :hover state

Type of change

What sort of change have you made:

[x] Bug fix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Code style update (formatting, local variables)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] This change requires a documentation update

How Has This Been Tested?

Describe how have you verified the changes made

Checklist:

[x] My code follows the guidelines of this project.
[x] I have performed a self-review of my own code.
[ ] I have commented my code, particularly wherever it was hard to understand.
[ ] I have made corresponding changes to the documentation.
[x] My changes generate no new warnings.
[ ] I have added tests that prove my fix is effective or that my feature works.
[ ] Any dependent changes have been merged and published in downstream modules.

Screenshots

Original	Updated
Original Screenshot	Updated Screenshot

My fixes haven't brought any visual changes, hex codes used on CTA-1 and CTA-2 are slightly different shade but the change is barely visible as shown on the screenshots below 😄

Adding the new hex codes improved accessibility by changing the contrast ratio of text/background

Original:

Update:

welcome[bot] commented 1 year ago

Hello there! 👋 Welcome to the project! 💖 Thank you and congrats 🎉 for opening your first pull request. Please adhere to our Code of Conduct. 🙌🏻 We will get back to you as soon as we can. 😄

Feel free to get in touch with me through social media handles. Hope to see you there!😄

prathimacode-hub commented 1 year ago

This is cool, but I think you can add some more changes to it based on UI. Atleast 1 to 2 more to merge the PR. @mateahoward

mateahoward commented 1 year ago

This is cool, but I think you can add some more changes to it based on UI. Atleast 1 to 2 more to merge the PR. @mateahoward

Sure thing ☺️ is there anything specific you'd like me to work on or am I free to pick something myself? ☺️

prathimacode-hub commented 1 year ago

You're free to pick up according to the requirements the web page suggest. @mateahoward

mateahoward commented 1 year ago

Me again 😄 I've added a few more things:

Fixed a typo in one of the class names [class didn't apply because a letter was missing]
Fixed one of the titles not having an underline (why us)
Updated the transition of cards when you hover over them

Before

https://user-images.githubusercontent.com/51357920/193418958-ec84b578-6596-41ca-8184-c05ec9d0c6d1.mp4

After:

https://user-images.githubusercontent.com/51357920/193418908-f4017097-d506-4e35-b810-dce9b1074e80.mp4

welcome[bot] commented 1 year ago

Congrats on merging your first Pull Request! 🎉 All the best for your amazing open source journey ahead. 🚀⚡️

prathimacode-hub / MedFlare