Intro...

This week, I worked on my first commit to a public open source repository. I was a bit stressed on what I would commit and how I would go about doing it. But I found something small that I could fix very simply, and would most likely be approved by the maintainer.

The issue ...

The issue I worked on contained changing the background colour of a header section within the menu of an application designed for teachers to host classroom materials.
This menu pertains to each individual class, so it is important that the styling is correct as the maintainer has planned.

The issue I contributed to can be found here: https://github.com/admiralorbiter/EngageKC/issues/9

The fix ...

To prepare the fix I had to setup the environment of the project. For this project I got lucky that the README.md of the project had more than enough information for me to get started in making admin credentials and accessing the portion of the code to fix.

The steps I took were as follows:

1. fork the repo
2. Clone the forked repo
3. create a new branch
4. install any dev dependencies
5. setup admin credentials as defined in instructions
6. run the server / application
7. locate the files I would be working on

In order to prepare and actually make the fix, I had to locate the file I would be changing. At first the actual file was hard to find as I hadn't seen the project before. I used my admin credentials to find the page where the maintainer had found the issue, and used inspect element and the source tab to see which file this was from and what component was being called in the area specified. I then located the file and the CSS for it, and changed the values to match what the request was.

Code ...

The code for my fix was simple. Someone had set the background to white as a default value when it should have been set to a light blue like the rest of the site. I simply located the background-color tag in the CSS, and updated the value to reflect the new changes. Obviously this is something small, and I am very used to editing CSS, but it is still a contribution I am happy to make nonetheless.

Code after the fix:

Previous Design:

New design:

In the new design you can see the background colour has changed for the header. Obviously there are other styling improvements that can be added, but they are being worked on by others at the moment, so I stuck to what was asked of me.

Difficulties ...

Honestly, this project did not require a lot of research. There were more repos I tried to get to work on as well but others had taken them just seconds to minutes before me. I had researched a lot in regards to those other projects and even learned about a new framework for web development called Hugo, and got some experience with docker along the way. For my specific issue though, I didn't face much research challenge.

Maintainers ...

Overall I had minimal interaction with the project maintainers but from what I can gather, they seem nice, and were happy that people were contributing to their project.

PR ...

My pull request for this week's post can be found here:
https://github.com/admiralorbiter/EngageKC/pull/16