search

codetriage / CodeTriage

Discover the best way to get started contributing to Open Source projects
https://www.codetriage.com
MIT License
1.38k stars 359 forks source link

On user profile update, success alert's background color blends into part of rainbow border #1793

Open maryamkhan14 opened 9 months ago

maryamkhan14 commented 9 months ago

This may be a style choice and not a bug, but I wanted to flag it just in case it isn't working as intended. As title mentions, when a user tries to update their profile (e.g. preferred languages), and saves their profile, the background color of the success alert blends into the green portion of its rainbow border: image This makes the border look inconsistent.

Expected Behavior

I expect the border would be visibly distinct from the alert notification's content, and have a consistent look (all 4 CodeTriage colors would be visible.)

Current Behavior

Currently, one bar of the alert notification's border disappears, because the alert background color is set to the same color.

Possible Solution

The border would be more distinct, if its bars had different background colors than the one used in the alert's background. Currently, they are forced to be the same, because of the styling rules declared in _flashes.scss. The flash mixin sets the alert's background color to the argument passed in. However, _flashes.scss sets the arguments as either $alert-color, $error-color, $notice-color, or $success-color, and variables.scss sets those variables to $codetriage-yellow, $codetriage-red, and so on. This forces the background color to match at least one of the bars in the border.

If instead, the alert's background color was a lightened/darkened variation of the color argument passed to the flash mixin, both the alert and the border bars would be visible.

Steps to Reproduce (for bugs)

  1. Log into your CodeTriage account
  2. Click your profile
  3. Scroll down, and click 'Save Favorite Languages'
  4. Note that one of the bars in the alert border is invisible.

Context

It seems to be a slight styling issue (unless it is a styling choice). To me, it seems as though the alert is 'bleeding into' the border, and it clashes with the otherwise seamless UI. I am trying to make it look better.

Your Environment

schneems commented 8 months ago

If instead, the alert's background color was a lightened/darkened variation of the color argument passed to the flash mixin, both the alert and the border bars would be visible.

Seems reasonable. I would accept a change like that with a screenshot showing the color difference.

maryamkhan14 commented 8 months ago

Sounds great, thank you for reviewing this! I will make the changes needed and submit a PR soon.