Improve UI for Slur Crowdsource Feature

[aatmanvaidya]

Is your feature request related to a problem? Please describe.

In the latest release of Uli v0.1.14 - https://github.com/tattle-made/Uli/releases/tag/v0.1.14

In the crowdsource feature users can now crowdsource slur's and its relevant metadata using Uli. A user can select and right-click on a word to crowdsource it.

The metadata helps in providing better context to slur words. Metadata that can be crowd sourced for a slur is:

1. Level of Severity
2. Casual
3. Appropriated
4. If Appropriated, is it by community or others?
5. What makes it problematic?
6. Category of Abuse

More details about the feature can be found in this issue - #389

We are displaying the all the data in a box that looks like this

All the current code for this can be found it here - browser-extension/plugin/src/ui-components/atoms/SlurCard.js
https://github.com/tattle-made/Uli/blob/main/browser-extension/plugin/src/ui-components/atoms/SlurCard.js

We use the Grommet component library for frontend. - https://v2.grommet.io/

The task is to change the box to a grommet card component.

1. I have written some code of the card component in this file - browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
   https://github.com/tattle-made/Uli/blob/main/browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js

This is the Grommet Card Component - https://v2.grommet.io/card

The task is just to complete the code, you have to make sure that everything is responsive and no text overflows etc.

If there is any other way to also display all the text/ content in the box, please feel free to suggest us those changes.

[ashishpetwal]

Hello there, I would like to work on this issue. Could you provide me with more details about it?

[aatmanvaidya]

Hello @ashishpetwal , I have revised the issue and made some changes to the description, please let me know if any more clarifications are required.

The task is just to code the above box seen into a grommet card component. Grommet is the component library that we use in our frontend. This issue involves writing code in JavaScript

Please let me know if any other help / clarification is needed

[ashishpetwal]

Ok Fine! You can assign the issue to me.

[aatmanvaidya]

Hello @ashishpetwal,
As Hacktoberfest is almost coming to an end, I wanted to check in and see if you're still actively working on the issue. It would be great to know your current status so that we can plan accordingly.

Please don't hesitate to reach out in case you need any help.

[ashishpetwal]

Sorry for late, I was busy in some other things. You can assign the issue to someone else.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[ckirby19]

Hello, is this issue still open to be worked on?

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[aayushk9]

Hello @ashishpetwal , I have revised the issue and made some changes to the description, please let me know if any more clarifications are required.

The task is just to code the above box seen into a grommet card component. Grommet is the component library that we use in our frontend. This issue involves writing code in JavaScript

Please let me know if any other help / clarification is needed

Great, I can work on implementing this!

[Gmin2]

on starting the uli chrome extension locally , when i click on activate account this error is popping

any idea to resolve it ?

cc @dennyabrain @ckirby19

[aatmanvaidya]

on starting the uli chrome extension locally , when i click on activate account this error is popping

any idea to resolve it ?

cc @dennyabrain @ckirby19

Hi @utnim2 , can you ignore this error and try clicking the "Activate Account". Make sure you have all the docker containers running, then Uli should be working fine on a development setup.

[aatmanvaidya]

Hello everyone, thank you so much for your interest and work on this issue, this issue has been resolved with this PR - #546