Making the X button on Reactour bigger with padding and better UX?

[Priyansh4444]

The button is getting in the way of the text, and is quite small to click on, was wondering if it could be made bigger by adding padding potentially and if it could have an onhover effect to like help the user notice when its being hovered on?

[MinhxNguyen7]

Feel free to whip it up so we can look at it

[Priyansh4444]

I am having a hard time getting the front end running despite the tutorial provided 😔. With errors regarding like turbo.

[MinhxNguyen7]

Feel free to ask for help in the Discord!

[KevinWu098]

Cross posting my comment:

My personal recommendation would be to take a simpler approach:

By just adjusting the tourguide styles slightly, we can prevent the textwrap and position the button in a much clearer, overlap-free position.

// reactour__popover
padding: 24px

// reactour__close-button
top: 8px;
right: 8px;
width: 8px;
height: 8px;