First sprint.
For the first sprint submission, I want to work on something simple first as I try to familiarize myself with the overall code structure of the project chatcraft.org. To start with I just try to improve the some of the UX element of the project. So I created a couple of issues. One of which is add a hover effect on the sidebar items Issue: #783. To summarize the issue, does not have any hover over effects like the other elements on the projects. At the same time I want to add the same functionality if it was selected, showing the buttons for editing and deleting the chat if the mouse is hovered over them. This also would reduce the number of action needed to either delete or edit an item. Before, the user needs to select the item first then they can do edit or delete them.
As shown here:
Implementing this change wasn't too hard to do. As most of the things I need are already in the code. I just need to add the hover functionality on the components and use the functions that was used for selecting the sidebar items. A thing I noticed while working is the method used for changing the background color based whether the the site is in dark or light mode. My first thought on how dark and light mode work was that I need to make the same thing again but for the other mode. But react (I'm assuming) already has something for this instance, where I just need to input the value for whichever mode.
Another small thing I implemented was add icons on the header menu for settings and logout, to make them more visible, Issue:#792. I wanted to make them align together with the other menu items. It also make them easier to find. As before I was having issues looking for the settings because I was searching for the settings icon since almost everything else has an icon beside them.
Before the change:
This was just a tiny change but I did discover something that is really neat from working on this. I found out, from looking into how the other items on the menu has icons, that its using icons from react-icons. Where you can easily import the icons and implement them as components. They also work light and dark mode, where they change automatically when the user change color modes. If it weren't for this, I would look for an .png of the settings icon and add the image beside the text and I would need to for light and dark mode.
Though the things I implemented was not that difficult to do. I learned somethings that I can use on other projects. It also made me more familiar what is the code structure of the project, giving more confidence on tackling more complex issues. At least, on UX/UI elements for now. Later down the line I want to learn how to include onboarding on the project for new users, where it would point out features/functions of the project and instructions on how to use it. Considering when I was using the app for the first time, I wasn't sure what can I do and where to find the function I need.
Author Of article : aldrin312 Read full article
