Meals/Pantry icons don't match order of filter buttons

[fancyham]

The icons on the map / lists don't match up with the filter buttons.

On the filters, Pantry is on the left, Meals is on the right.

On the List and Map, the icons have Meals on the left, Pantry on the right.

The mismatched order make it harder to visually and intuitively relate buttons to items on map.

This will also be a problem if we colorize the filter buttons to match the icons.

Some possible solutions:

Simple: Swap the filter buttons so 'Meals' is to the left of 'Pantry'.

More difficult: Swap sides on icons.

Consider:
Which is higher priority to our target users? Pantries or meals?

[entrotech]

Good observation. We have a lot more pantries in the database, but that doesn't necessarily mean that they are more important to users. It is easier to swap the position of the fliter buttons than to create new icons for the markers and list items - but that shouldn't be the dirving factor on what we choose to do.

[dking1342]

buttons have been swapped and awaiting merge

[fancyham]

Do we have any stats about what food-seekers are viewing most often? (i.e. getting details on pantry or meal) I think swapping the buttons could work for the short-term, but long-term we should look at changing the icons. If someone can point me to the icon files or sources, I might even be able to do the edits myself.

…

On Jun 22, 2021, at 5:45 PM, Kavooce ***@***.***> wrote: buttons have been swapped and awaiting merge <https://user-images.githubusercontent.com/28996149/123032403-8047f580-d3ab-11eb-94ef-42fdecdecfc3.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#927 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZYOPPVGTKBHCHHW3HOTZ3TUFKGXANCNFSM42IFYCRA>.

[dking1342]

It looks like the js file with the svg is located in the client/src/images folder. I believe it is labelled as the splitPantryMealIcon.

[fancyham]

@dking1342 I created new 'mixed' icons where I swapped the left and right sides and put them back into the Google Drive where the original files are located (client/src/images). They're named locator.svg and main.svg

I don't know how to add them to the .js files or make a pull request yet — would you mind putting the svg data into the correct files?

I think that should solve this issue?

https://drive.google.com/drive/folders/1jb3yV4B5Isd8oelQ2DTYUvXhm9e6t5fy

[dking1342]

I have swapped out the svg paths to reflect the changes. However, there is an issue with data which prevents the icons, correct icons being shown. I'll have to work on fixing this issue before a pull request can be made.

[dking1342]

@entrotech fixed the issue with the data not showing. The icons not show the proper image and the filter buttons have been ordered to match the icon images. It is now ready to be sent for a pull request.