Add gradient border to tags

[Utkarshn10]

Add a colorful gradient border to new tags on "Meditate" tab.

Refer to this image

[notpx]

!assign

[Utkarshn10]

Hey @notpx Issue assigned.

[notpx]

Added the gradient on the border, but need to add it only when the user clicks meditate tab.
1.Thinking of changing the name of class of card for meditate
2. Using states when the user clicks the meditate button, and the color gradient gets added after the click.

Guide me through this, need few hints and will get the work finished

[Utkarshn10]

This looks great.

Some additions:

1. How about decreasing width of border and keeping it around 5-7px.

2. We only need these gradient border for cards in new tab so we can add a parameter in 'info' array and mention there that whether this particular card belongs to new or not.

And then we can add gradient to it.

[notpx]

Few questions,

1. After adding another parameter into the info array, how do I add css specifically for that particular element in the array with that parameter?
2. Drop some topics which might help me in order to get this done, I'll learn them and finish the pending code.

[Utkarshn10]

You can refer this to add condition in tailwind css.

And if you want to dive deep then you can further look into this topic.

[agustintrossero]

hello!. is this issue still open? I want to contribute to several of the open issues in this project but when I run npm install it won't let me deploy the project

[Utkarshn10]

hello!. is this issue still open? I want to contribute to several of the open issues in this project but when I run npm install it won't let me deploy the project

Hey @agustintrossero. Try running npm install --legacy-peer-deps.

Thanks for contributing to Focusly.

[notpx]

1. I need to know where to put this function, because chakra UI manages the class names and we can't know what class is it without checking inspect element. Even after finding out the class of the box... I need to figure out where that class generates from, is it from the Card.js or Meditate has its own box.

I figured out how to use the class name library as you mentioned...but help me out with the placement of the function at the right place so it gets called.

If that gets clear code will work. Need help with this lads.

[Utkarshn10]

Hey @notpx, you can call the function on button click using the onClick function

[KSSaiTeja]

if the issue still open i will start work. if shared some pictorial explaination..