colt / react-colors

Clone of Flat UI Colors, made for my Modern React Bootcamp Course

React Colors Project

• A clone of websites like Flat UI Colors and Material UI Colors.
• One of the projects for my Modern React Bootcamp course.
• Each video has its own corresponding commit that you can follow along with.

react-colors's Issues

White lines appearing between color boxes, after adding a palette

This issue appears after completing lesson 213, but only under specific circumstances. The color boxes display correctly when the app initially loads - but once a new Palette is added white lines appear between color boxes in all contexts I can find:

This issue seems particular to two circumstances:

• Running with React.StrictMode (which is the current default with CRA), and
• The following dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.1",
    "react-material-ui-form-validator": "^2.1.4",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.3",
    "chroma-js": "^2.1.0",
    "rc-slider": "^9.7.1",
    "react-copy-to-clipboard": "^5.0.3",
    "react-router-dom": "^5.2.0"
  }

Note: If you pull the version stored here, and run npm install, then you will not see the issue, owing to the frozen dependency versions in the repo. You may encounter this issue if you work through the exercises.

If you are coming to this finding you are experiencing this issue, a workaround is to simply remove the <React.StrictMode> tags from index.js

App not working. The palettelist page is not responsive. If you click on a palette, the app throws an error.

I cloned the git repository. However, the app is not working properly.

Color Picker rgba problem

we can't use opacity for rgba in color picker when it changes it moves back to the first place

addRandomColor makes infinite loop in some circumstances

There is an issue with "addRandomColor" method inside NewPaletteForm.js.

Required conditions:

1. User deleted all palettes but first one ("Material UI Colors"), which has only 19 colors or less;
2. User is adding colors to new palette with "random color" button only.

This will lead to situation, when there is no any unique color left (we need at least 20 unique colors to fill whole palette using "random color" button), "isDuplicateColor" will be truthful forever, while loop will run infinitely.

To fix that we need to store somewhere at least 20 unique colors at any point of time, even when there will be less than 20 colors in user's palettes, so those colors would always be available for "addRandomColor" method.

Can't back to pervious page in mobile screen

I think logo should not remove in the mobile screen, because it is index page link

Forgot to make 404 not found page

If I type wrong url, I will git error on page
EX:
http://localhost:3000/palette/&@#$%%

react-colors/colors-app/src/App.js

Lines 21 to 25 in c358775

	findPalette(id) {
	return this.state.palettes.find(function(palette) {
	return palette.id === id;
	});
	}

Maybe it could write this to fix issue

  findPalette = id => {
    const defaultPalette = colorsConfig[0];
    return this.state.palettes.find(palette => palette.id === id) || defaultPalette;
  }

Random color selection shows error!

Both horizontal and vertical scroll bars are being undesirably shown.

Both horizontal and vertical scroll bars are being shown after running the code in this commit which are not there in the course's videos