Color match solution

[Rope-a-dope]

It is indeed a major hassle to match the colors on the jobs, but there is a simple solution. Just hash the id with the last digit to each color, since 4 colors are provided, then we just need to use id % 10 % 10 % 4, then add that selector to each jobItem, add those 4 colors with differnt selector. We just can't guarantee the color is rotated like it was set before.

JobList.js

       <div class="job-item__badge job-item__badge--color${parseInt(jobItem.id % 10 % 4)}">${jobItem.badgeLetters}</div>

JobDetails.js

                                    <div class="job-info__badge job-info__badge--color${parseInt(jobItem.id % 10 % 4)}">${jobItem.badgeLetters}</div>                                   

index.css

.job-item__badge {
    font-size: 13px;
    height: 46px;
    width: 38px;
    /* background-color: #8dd335; */
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    margin-right: 13px;
}

.job-item__badge--color0 {
    background-color: #8dd335;
}

.job-item__badge--color1 {
    background-color: #3D87F1;
}

.job-item__badge--color2 {
    background-color: #D2D631;
}

.job-item__badge--color3 {
    background-color: #D96A46;
}

/* .job-item:nth-child(4n+2) .job-item__badge {
    background-color: #3D87F1;
}

.job-item:nth-child(4n+3) .job-item__badge {
    background-color: #D2D631;
}

.job-item:nth-child(4n+4) .job-item__badge {
    background-color: #D96A46;
} */

.job-info__badge {
    width: 55px;
    height: 70px;
    /* background-color: #d0d335; */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 13px;
}

.job-info__badge--color0 {
    background-color: #8dd335;
}

.job-info__badge--color1 {
    background-color: #3D87F1;
}

.job-info__badge--color2 {
    background-color: #D2D631;
}

.job-info__badge--color3 {
    background-color: #D96A46;
}