[Fix] readability issues

[pranay202]

Description

Needs better color combinations of text color and background color of buttons to increase readability.

Screenshots

Additional information

No response

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[jsvigneshkanna]

I would like to take this issue fix

[pranay202]

I'm working on this. Once assigned, I'll start the procedures.

[EmmaDawsonDev]

Wow, yeah. That’s not a good colour combo!

[pranay202]

Hi @EmmaDawsonDev, can you please guide me regarding the file in which I have to make the changes.

[schmelto]

@EmmaDawsonDev does something like an inversion of the color make sense here? I have implemented something similar to this to one of my projects. There I implemented a function that calculates the text color based on the background color and sets the text black or white depending on the contrast.

function invertColor(hex, bw) {
  hex = `#` + hex;
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // convert 3-digit hex to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }
  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
  if (bw) {
    // https://stackoverflow.com/a/3943023/112731
    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
  }
  // invert color components
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // pad each with zeros and return
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

https://github.com/schmelto/Portfolio/blob/main/js/issues.js#L145-L170

[EmmaDawsonDev]

@EmmaDawsonDev does something like an inversion of the color make sense here? I have implemented something similar to this to one of my projects. There I implemented a function that calculates the text color based on the background color and sets the text black or white depending on the contrast.

function invertColor(hex, bw) {
  hex = `#` + hex;
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // convert 3-digit hex to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }
  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
  if (bw) {
    // https://stackoverflow.com/a/3943023/112731
    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#FFFFFF';
  }
  // invert color components
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // pad each with zeros and return
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

https://github.com/schmelto/Portfolio/blob/main/js/issues.js#L145-L170

Inversion might work. But I think what we need is something that can take the hex code and work out whether it would have higher contrast with black or white text. Otherwise we're gonna get some really weird button color combinations. This problem only occurs because users are allowed to specify their own background color in the json

[EmmaDawsonDev]

Hi @EmmaDawsonDev, can you please guide me regarding the file in which I have to make the changes.

I believe the buttons are related to the milestone cards so should be in that component or if they're not you should be able to look in that file to see where they're being imported from

[eddiejaoude]

The new version of LinkFree is out, I will close this issue, feel free to create a new issue for the new version if still relevant