This is Fix For #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
[x] 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 :
</div>
<div class="gh-btn-container"><a class="gh-btn" href="https://github.com/thepracticaldev/dev.to/pull/4212">View on GitHub</a></div>
My PR to add WebApp configs merged in REACT so you can now Add to Homescreen react's documentation!
Currently there is not manifest set for the website so logo is blank and title is set as a name. Also the color of URL bar in chrome is plain white. Here's how it will look after this PR.
Now
Image 1 is to show the new color of URL bar in chrome
Image 2 is the screen after selecting "Add to homescreen"
Image 3 is the splash screen after opening it as WebApp
I've added color to the URL bar, Configured name, short_name and other properties. and added a logo file in src/images/react_logo.png (Needed 512px png logo so had to add a new logo)
This is my first contribution here so I'm sorry if I missed out on something
All of my PRs (I made 5 :D) got Approved by the reviewers and 3 are merged!
I had an interview the day before yesterday and it went really well and I got a fair chance to prove my skills and the interview was very meaningful and probably the best interview of my life so I am very satisfied
Also, I slept for 10 hours today so yes it was a great week 🌻
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
SO MANY THINGS HAPPENED THIS WEEK
Fix #4106: Showing color preview in Edit Profile #4212
What type of PR is this? (check all applicable)
Description
This is Fix For #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 filecolorPreview.js
and some new classes in html.Mobile & Desktop Screenshots/Recordings (if there are UI changes)
Mobile
Desktop
Recording
Added to documentation?
[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 :
My PR to add WebApp configs merged in REACT so you can now Add to Homescreen react's documentation!
WebApp manifest added to allow users "Add to Homescreen" documentations #2377
This solves issue #2259
Then
Currently there is not manifest set for the website so logo is blank and title is set as a name. Also the color of URL bar in chrome is plain white. Here's how it will look after this PR.
Now
Image 1 is to show the new color of URL bar in chrome Image 2 is the screen after selecting "Add to homescreen" Image 3 is the splash screen after opening it as WebApp
I've added color to the URL bar, Configured name, short_name and other properties. and added a logo file in
src/images/react_logo.png
(Needed 512px png logo so had to add a new logo)This is my first contribution here so I'm sorry if I missed out on something
All of my PRs (I made 5 :D) got Approved by the reviewers and 3 are merged!
I had an interview the day before yesterday and it went really well and I got a fair chance to prove my skills and the interview was very meaningful and probably the best interview of my life so I am very satisfied
Also, I slept for 10 hours today so yes it was a great week 🌻