Fix #4106: Showing color preview in Edit Profile

[saurabhdaware]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Documentation Update

Description

Fixes #4106.

The current color-picker does not show a preview so it is hard to guess the color contrast. I added a preview (screenshot added below) which shows your selected colors.

Also, Added a <input type="color"> which makes it is easy to select the color.

Since there are other pages that depend on 'color-picker' class I did not change anything in colorPicker.js or any of the styles of current color-picker. I created a new file colorPreview.js and some new classes in html.

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Mobile

Desktop

Recording

Added to documentation?

• docs.dev.to
• readme
• no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

My first PR To DEV!
I was not very sure if I could do this or not since DEV's codebase is probably the largest codebase I've ever worked on but now I'm super proud of myself to complete this 🌻

Me showing this code to everyone :

[CLAassistant]

All committers have signed the CLA.

[rhymes]

Hi @saurabhdaware, this PR looks great! I played with it and it opens the system color picker on my Mac and I can see the DEV logo change in real time :)

I've added just a small request on grouping the initializing code.

[rhymes]

@saurabhdaware can you take a look at the code climate issues as well just in case? I think it's complaining that updateColorFields and updateTextFields are basically doing the same exact thing.

[saurabhdaware]

Not sure why it is showing the issue in it. updateColorField() Updates the color fields to be in sync with text fields and I call it when text fields are changed. and updateTextField() updates text fields to be in sync with color fields and they are called when color input is changed. can't really think of any other way of doing it.

[rhymes]

@saurabhdaware Let's leave it like this :)

for future reference: a possible way would be to pass the elements as arguments to the function and have only one function, since you're basically swapping the values between the colorField and the textField. That change is probably going to trigger the parameter reassignment error in eslint though.

[saurabhdaware]

Cool, thank you @rhymes ! and yeah we can pass parameters and get around code climate I guess. This way just makes it easier for me to update the fields whenever necessary. I'll keep it in mind for the future though. thanks :D