Improve filter panel appearance

[ojasbhanarkar04]

Hi,

The current filter panel when you click the Analysis tab looks pretty congested and uneven in design. I was wondering if some improvements could be made to this by making the panel buttons more evenly spaced. Would like to try out as a first issue, let me know what you think.

Eg. https://www.wallstreetlocal.com/filers/1067983?tab=stocks

[leftmove]

Always open to contributions in the form of better design!

Here are some places you can get started to change this/

• The entire stocks analysis tab
• Specifically the upper portion
• The analysis tab
• The headers tab, probably what your looking for

The CSS is managed using CSS modules, so look into the .css.module files to change things around.

Thank you!

[leftmove]

Just a quick note since this issue has been open for almost 10 days.

Some of the React logic mixed with the CSS can be hard to interpret - especially since there is little documentation.

Feel free to drop a Figma design or create your own CSS to drop in. A completely React-free, HTML/CSS only design would be fine.

Given the empty components, I would be happy to add programming logic to a design and integrate it into the source code.

[ojasbhanarkar04]

Hi @leftmove

Thanks for the info. Sorry for the delay, I'm not well versed in React.

I'm a little confused as to why the Sold and Unavailable buttons are in a separate file (Headers.jsx) and all the buttons above them are in a separate file (filerSlice.jsx).

I might have underestimated the effort required for this issue 😅 I'm trying to think of how we can shift some of the buttons from the first row to the second one where Sold and Unavailable are. Let me know what you think, I'll try to come up with something in a couple of days or you can assign it to someone better versed, thanks.

[leftmove]

They are separate because the provide different functionality.

For the headers on the top, the function to "activate" the property is to simply turn a 'true' value 'false' for all stocks.

For the bottom two options, there is no visible header on the table which reflects them, and the function to "activate" them is more complex than turning a couple boolean values opposite.

Basically, they are just edge cases.

If you want to strip the components of all programming logic or join the above headers with the below, go right ahead if that makes things easier to work with.

(Or if this issue is too difficult/time consuming, feel free to abandon it as well - I hope you do not feel pressured.)

Thanks again!

[ojasbhanarkar04]

Hi @leftmove so sorry, I've been caught up in work related assignments. Yes, please unassign this issue from me, thanks.

[leftmove]

@ojasbhanarkar04

No problem.

Good luck on your work!

[leftmove]

To any newcomers, please read the above comments to get a good idea where to start.

If you have any questions, don't hesitate to ask me.

[PreethikhaS]

Hi @leftmove I read the previous comments and I understood what challenges I would like to contribute to fix the issue

[leftmove]

@PreethikhaS

I've assigned you, let me know if you need anything at all.

Thanks and good luck!