Added folder icons

[Anubhav-Vashishtha]

Fixes #2881

Changes:

• I have changed scss files to make options icon more visible initially it was smaller in size

Replace Directional arrows and Added folder icon to the side bar to make user experiences better

I have verified that this pull request:

• [V] has no linting errors (npm run lint)
• [V] has no test errors (npm run test)
• [V] is from a uniquely-named feature branch and is up to date with the develop branch.
• [V] is descriptively named and links to an issue number, i.e. Fixes #123

[welcome[bot]]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[lindapaiste]

@raclim I wonder what your thoughts are on using the react-icons package, vs manually adding SVG files to the client/images/ folder of the repo. I find the current method burdensome so I'm totally on board with react-icons. They also have a search on their website so if we don't like these specific folder icons we could choose different ones: https://react-icons.github.io/react-icons/search/#q=folder

@Anubhav-Vashishtha This PR looks generally good. We may want to make some small tweaks to the alignment and margin.

[raclim]

@raclim I wonder what your thoughts are on using the react-icons package, vs manually adding SVG files to the client/images/ folder of the repo. I find the current method burdensome so I'm totally on board with react-icons. They also have a search on their website so if we don't like these specific folder icons we could choose different ones: https://react-icons.github.io/react-icons/search/#q=folder

I don't have any strong preferences here and would be down to use react-icons! I can't think of any strong cons of using it over manually adding in SVG files besides maybe having less fine-tuned control/management over the assets, but it seems like react-icons has a lot of great options.

This might be better to pinpoint in the associated issue (#2881) or in a new one, but while I was testing this PR I realized something about the folder icons felt a little unfamiliar for me. I think it's because I'm accustomed to usually seeing chevron arrows when toggling a folder within a code editor.

I do think the current icons we're using can be confusing. I'm wondering if maybe instead of changing the folder icon, it would be better to change the icon we're using to indicate options? Maybe something like this image (pulled from Glitch)?

What I'm proposing is definitely a separate issue though (and would require a much bigger change), and I do also feel that the folder icon here works perfectly fine as well! I'm wondering if folks here have thoughts on what might be better?

[Anubhav-Vashishtha]

@raclim Yup got your point and currently working on it❤️ . I find your idea about arrows bit better and more intuitive

Thanks buddy

[Anubhav-Vashishtha]

@raclim Take a look ✨

[Ri-Sharma]

I do also feel that the folder icon here works perfectly fine as well! I'm wondering if folks here have thoughts on what might be better?

@raclim I think that using Open/Close folder icon will be more intuitive instead of using directional arrows because the folder icons are widely recognized as a symbol for organizing and categorizing content. And the open/close folder icons provide a simple and straightforward visual cue, making it easy for users to understand. Also as we are using file icon for the files it would make more sense to use folder icons to maintain the web app's consistency.

[Anubhav-Vashishtha]

I do also feel that the folder icon here works perfectly fine as well! I'm wondering if folks here have thoughts on what might be better?

@raclim I think that using Open/Close folder icon will be more intuitive instead of using directional arrows because the folder icons are widely recognized as a symbol for organizing and categorizing content. And the open/close folder icons provide a simple and straightforward visual cue, making it easy for users to understand. Also as we are using file icon for the files it would make more sense to use folder icons to maintain the web app's consistency.

Ahhh I don't think so .... Look brother the arrow points down showing all the files in the folder but after we close the it just point toward the folder name and there is another problem if we have let's say four folders inside one folder and we open this folder so now on screen we will see five folder icon (one open and 4 closed ) which is not a good UI and led to confusion

[Ri-Sharma]

Hey @Anubhav-Vashishtha, I understand your considerations regarding the use of directional arrows for folders. Your point about arrows indicating the direction of expansion is valid, and I understand your concern about the potential visual clutter caused by having multiple close folders among open ones. However folder icons do provide some advantages, like :-

1. As we are using file icons for individual files, adopting folder icons for directories ensures a consistent visual language throughout the web app.
2. Open/close folder icons provide flexibility in design, allowing for variations that suit the overall aesthetics of the web app.
3. Users often expect folder icons to signify the hierarchical structure. Open/close folder icons align with these expectations, making it easier for users to anticipate the functionality.
4. While it's true that having multiple open folders among closed ones might create some visual clutter, well distinguishable open/close icons can help mitigate this issue.

These are my thoughts, let me know what you think about it.

[raclim]

Since it's been a while since this PR was submitted, some of its contents have fallen quite out of sync with the current develop branch so I'm going to close this for now. I'm sorry that we couldn't get this in, but please feel free to reopen this PR with any updates or check out our other issues!