Filters bar & filters' style don't match the design

[AllieMendes]

Describe the bug
Here is a list of inconsistencies found:

1. The "Add Filter" button's icon doesn't match the designs and doesn't seem to be using our icon library.

Implementation:

Figma reference:

3. The filters bar has a "Filters" title before the filters that shouldn't be there.

Implementation:

Figma reference:

4. The filter's margins don't follow the ones set on the Figma component; the icon stroke is thinner than it should; the close button doesn't match the design.

Implementation:

Figma reference:

5. The add filter button (after a filter has already been added) is not really a button and doesn't match the one on the Design System.

Implementation:

Figma reference:

6. The divider between the filters and the "Clear filters" button's color doesn't match the design.

Implementation:
0 solid #e5e7eb

Figma reference:

1px solid #edebee

7. The "Clear filters" button doesn't match the design — it should be a text button with an icon (the button states are all documented on the Design System).

Implementation:

Figma reference:

Additional context
If you want to tackle this task, feel free to share with us your email address so we can give you access to the Figma project :)

[github-actions]

Hey, thank you for opening your first Issue! 🙂 While a Tailwarden team member takes a look at your issue we would like to invite you to join our official Discord server, where you can interact directly with other contributors and Tailwarden team members. Link here: https://discord.tailwarden.com

[sajdakabir]

Hey @AllieMendes I would like to work on this issue. Can you assign it to me?

[mlabouardy]

Hey @AllieMendes I would like to work on this issue. Can you assign it to me?

all yours @sajdakabir

[sajdakabir]

Hey @mlabouardy Can you please give me Figma assess

[AllieMendes]

Hey
I've sent an invitation @sajdakabir!

[Traxmaxx]

@sajdakabir just as a heads-up, we just introduced the dependency-graph which is re-using some of the inventory filters. You can see the changes here. I hope it can be merged soon!

Ping me if you have any questions regarding my changes 🙏

[sajdakabir]

Hey @AllieMendes, Can you please help me with the below error?

To run the server I have flowed https://github.com/tailwarden/komiser/blob/develop/CONTRIBUTING.md#how-can-i-contribute-to-komiser-dashboard .

[AvineshTripathi]

I think you have not started the server, if not please create a config.toml and then in komiser dir run go run *.go start --config="./config.toml". Let me know if this works

[sajdakabir]

After running go run *.go start --config="./config.toml" I am still getting the same error.

[Azanul]

After running go run *.go start --config="./config.toml" I am still getting the same error.

On which port does your server start? How are you starting the UI?
In NEXT_PUBLIC_API_URL=http://localhost:3000 npm run dev, the value of NEXT_PUBLIC_API_URL should be the server url.

[sajdakabir]

It's working now. Thank you @Azanul and @AvineshTripathi

[AllieMendes]

Hey @sajdakabir, any update on this issue?
Let me know if you have any questions!

[sajdakabir]

Hey @AllieMendes, Please pass it to another one.
I am busy with something else.

Thank you.

[AllieMendes]

Thank you for the update @sajdakabir!
I'll unassign you then