[FEATURE]: Use variables of colors in the frontend and replace the hardcoded oens

### Feature and its Use Cases

Instead of using repeated color constants as hardcoded in the components, we can make them as variables in the `globals.css` file and use them, so no redundancy and it can be easily debugged

### Additional Context

_No response_

### Code of Conduct

- [x] I have joined the [Discord server](https://discord.gg/hjUhu33uAn) and will post updates there
- [x] I have searched existing issues to avoid duplicates