[doc] Adding Hover Effects to Components and Buttons

[driyash9881]

Problem Description

The goal is to add hover effects to various components and buttons on a website to enhance its visual appeal and user experience. Hover effects can provide visual feedback to users, making the website more interactive and engaging.

[vr-varad]

Hey @stanlee974 I am not able to locally setup, getting these errors

Error: Docusaurus could not load module at path "/home/varad/Desktop/uuv/packages/docs/docusaurus.config.js"
Cause: Cannot find module '/home/varad/Desktop/uuv/node_modules/@uuv/a11y/dist/index.js'

Any Idea Why?

[stanlee974]

Hey @vr-varad. Sorry for that. Yeah, to get the dist director, you must package uuv/a11y before. Can you try in your terminal : nx run a11y:package when you are in /home/varad/Desktop/uuv Or you can try the command : npm run package when you are in /home/varad/Desktop/uuv/packages/a11y

[vr-varad]

Sorry I tried both things but no dist folder is made @stanlee974

[luifr10]

Hello @vr-varad , did you follow the DEV_SETUP file for installing your development environment ?

After npm installcommand, you can then start the documentation app locally with npx nx start:en docs as mention in documentation

[vr-varad]

I first forked the project clone it using git clone https://github.com/vr-varad/uuv.git npm install went inside packages/a11y ran npm run package went inside packages/docs ran npm run start:en got the same error after running npx nx start:en docs

[luifr10]

So basically, you just need execute the 2 following commands after npm install :

• build a11y package : npx nx build a11y
• Start docs app : npx nx start:en docs

With nx you have to run commands directly from the project root folder, no need to go to inside package folder.

Hope It helps ! 😉

[vr-varad]

Thanks @luifr10 @stanlee974 I got to work on it and made some changes, I just wanted a review https://github.com/user-attachments/assets/0cd7dc25-cc3a-4d3c-bbe5-930c95404545

[stanlee974]

Hi @vr-varad !

Sorry for the delay. It's cool what you've done. As the issue concerns all buttons from what I understand, I can merge your branch, but we'll leave the issue open to generalize your use of css to all buttons. You can do it if you want, otherwise we'll try to do it when we have time.

[vr-varad]

I can do it for all the buttons!! No Problem

[stanlee974]

@vr-varad All buttons are covered by this rule. .button:hover { transform: scale(1.05); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); background-color: black; color: #f2cc31; border-color: #f2cc31; }

I think, we don't need another update of code.

Thank you for your help !

[vr-varad]

That's what I was figuring where are all other button Css but realised it's for all. Thanks