UX Enhancements to React Application May 2024

The main goal of this project is to improve our React application so it looks professional and has a better overall UX. Below are some of the requirements and will be broken down into milestones. Everything below should work on Chrome, Edge, Firefox and Safari of windows desktop, iphone and android. Please test on those browsers and let me know if you are not able to test on both mobile devices. We need too complete bugs first followed by enhancements. Some of the styling items may require revisions. Milestones will be created Bugs: a. When there are no results, we need to display a message at the top that of the no results page that says "No results found". (you can test it with price, RAM and CPU Speed set to highest values) b. When we click on Show details, it shows a border around it, we need to avoid that. c. When we launch Show details and close the page behind it moves to the left and right. I can send a video if you are not able to reproduce this issue. d. Compare table is not centered. e. When you see the results in list view (one item per row) the logo for Walmart seems to go off the screen/item box, it should be within the item box and have some spacing around it. f. Radio buttons are not getting selected sometimes when you click first time. Noticed on both dekstop and iphone, but on iphone, it is very consistent. Only the 2nd click selects the radio button. g. mobile: on search results display, sort by, drop down and the two icons that allow to change layout seem to be pushed to the right and not full visible. Enhancements: 1. Search filter improvements: a. Scrollbar should not show but appear when mouse is in the left pane. Go to Bing shopping webite and enter search for "laptops", scroll down past the Ads (top two rows) and observe what happens when you scroll the down on results. The filters do not scroll but there is also no visible line or scrollbar. Now you move your cursor over the left pane (left pane scrollbar appears) This is exactly how we should implement for [login to view URL] b. Scroll bar should be a little thinner, maybe 10-13 pixes when it appears and light gray color - (on all browsers - Chrome, Firefox, Safari and Edge.) - please add comment on the scrollbar color so we can change if we want slight adjustment. c. Provide a small toggle icon at the top (right aligned), same rows as Clear filters, to collapse all search filters on one click and expand all when clicked again. Mouse-over text should show: "Collapse all" "Expand all" depending on what the next click will do. When a filter is selected (and set to something other than default) d) the heading of that filter needs to change to bold, example: if we selct RAM 8GB-16GB. e) On desktop only: we need to see a button show up at the top of all search filters that says "RAM 8GB-16GB" with an x to remove it from search filters ( see Bing shopping) 2. Header improvements - (please wait for us to provide a screenshot/figma of a sample header): a) too crowded and needs bit more spacing around it and have a cleaner look and should match the height of the blog header. a) search field should have a max-width of say 500px (please add a comment in the code so we can change if we need to) 4. General styling a. Entire screen should have background color e6e6e6 (should be set in a common css or scss file and reused as a variable in all pages). Search filter cards, header and results list should be white. b. all headings / links need to use font Jura - eg. Compare page --> "Compare Specs" "Clear All" , Results page --> Show details, compare, etc.