Fixes some styles of the Tile component

[blenderskool]

Fixes #62

Checklist

• [X] I have read the Contribution & Best practices Guide and my PR follows them.
• [X] My branch is up-to-date with the Upstream master branch.
• [ ] I have added/updated necessary tests/documentation (if applicable)

Changes proposed in this pull request:

• Fixed the box-shadow - converts the color passed to rgba() and sets it dynamically
• Added linear-gradient - uses a function from https://stackoverflow.com/a/13542669 to darken the color passed and set the background dynamically. Additionally, browsers that don't support linear-gradient would fallback to using background-color
• Fixed spacing - Centered the text using inline-flex, added spacing between adjacent tiles

[saini-himanshu]

Also just adding color:backgroundColor in styles adds the box-shadow color as background

const tileStyles = {
backgroundColor,
color:backgroundColor,
}

where we can keep box-shadow as box-shadow: 0px 0px 15px 0px; here we can avoid the hexToRgba function, ain't this apporach good try this it works.

[saini-himanshu]

Also look at this it may be useful it works same -

  const Box = ({color1}) => {
  const rgb = [color1.substring(1,3), color1.substring(3,5), color1.substring(5,7)];
  const color2 = `rgb(${rgb.map(c => (parseInt(c, 16) * 0.8)).join()})`;
  return (
    <div className="box" style={{background: `linear-gradient(${color1}, ${color2})`}} />
  );
}

[blenderskool]

@saini-himanshu Yes, even that can be done, but hexToRgba() function would be needed in that case also since the opacity of the color needs to be changed. It can be easily done by just using 8-digits Hex color code but that isn't supported by all major browsers, hence some JS comes into play

[saini-himanshu]

ok, what about the linear-gradient method. it looks simplelinear-gradient(${color1}, ${color2}) just needs adjusting the value.

[blenderskool]

@saini-himanshu I was testing the color converter, it works fine for our case, and is a very simple implementation. Do note that you need to round the values after decimal multiplication since RGB does not have decimal numbers. I have made the changes :slightly_smiling_face:

[saini-himanshu]

👍