varlevi / shadeswash

An online web app to be used by web designers and developers that returns all the shades of a color the user inputs.

The Shade Generator

Hi everyone! Varlevi here with a new project. This project is an online web app to be used by web designers and developers that returns all the shades of a color the user inputs. It also has support for hex codes and the site features a sleek design including a new dark mode.

shadeswash's Issues

Branding: Catchy Name

Just like the new logo, a catchy name will enhance the website's personality.

Enter Key

Accessibility will be much better if we allow rgb values to be entered using the enter key as an alternative to pressing the submit button. This would be a simple fix.

Input Fields Are Too Small

Describe the bug
The input fields are too small

Expected behavior
The user expects a larger input field for easier use.

Desktop (please complete the following information):

• OS: ALL
• Browser: ALL
• Versions: ALL

Smartphone (please complete the following information):
I have not tested this on a smartphone, but iPad screens also show that the input is too small.

Additional context
This is probably a simple CSS fix.

Add copy function when rgb() or hex code is clicked.

Adding a copy on click function will allow for users to use the site more quickly and will remove one more step in the process of input to into code.

Site Re-design For Better Branding

Is your feature request related to a problem? Please describe.
No. It will just help brand the site and set it apart from other similar tools.

Describe the solution you'd like
I'm imagining a more "splashy" theme. Mockups forthcoming.

Explain any problems that could arise
We must be careful to maintain (or better yet, imporove) the functionality of the site. If anything hinders functional growth, then it is not worth it.

Additional context
As mentioned above, I'll attach some mockups once I've finished them!

When an error occurs, the script keeps going

Describe the bug
When confronted with bad inputs, the script gives the user an alert, and then still tries to output shades.

To Reproduce
Steps to reproduce the behavior:

1. Open up the website.
2. Input some bad inputs (> 255, or strings).
3. Accept error.
4. Look at the shades output.

Expected behavior
An error alert, and no output.

Branding: Create site logo.

Creating site logo will create better branding and a more attractive website.

Create A Link to Github

See Issue #26.

dark mode

I think it would be a great feature, especially since users could be viewing bright colors and want to see the contrast.

I think a button that toggles from light to dark mode would be very helpful. This would not only change the background color, but the text color as well.

As long as this feature is programmed well, I cannot think of any problems that could arise.

HSL Support

Is your feature request related to a problem? Please describe.
Not a problem, but an increasingly important feature as it seems lots of devs are using hsl color values.

Describe the solution you'd like
I'd like a way, much like with hex values, to input and output hsl values.

Describe alternatives you've considered
Link to an already-created site for converting color values (probably not a great idea!)

Explain any problems that could arise
See issue #53.

Additional context
The following stack overflow pages may be helpful:

HSL to RGB
HSL to Hex and RGB

the footer text should show an actual heart icon

Footer text should be updated:

- Made with U+2764 by varlevi and other GitHub contributers.
+ Made with ❤️ by varlevi and other GitHub contributors.

Current:

Expected (minus the mispell of contributors):

Create a form field to replace the alerts.

Create a form to replace the JS prompts for better UX.

BETA: Base Card Not Centered

Describe the bug
In beta, the base card is not centered on the page.

To Reproduce
Steps to reproduce the behavior:

1. Launch beta branch locally.
2. Input colors.
3. Look at base card vs other shades.

Expected behavior
All cards should be centered.

Desktop (please complete the following information):

• OS: Raspian Linux
• Browser: Vivaldi

Alert not working...

The alert button does not give the user another opportunity to enter the digit.

BETA-0.7: Logo Not Working in Dark Mode

Describe the bug
When Dark Mode is turned on, the logo stays a dark gray and blends into the background.

To Reproduce
Go to the website and hit the dark mode button. ^_^

Expected behavior
The Logo should adapt to the dark mode just like the rest of the site.

Screenshots

Desktop (please complete the following information):
Not Applicable.

Shade Modal Popups

The Shades need to be packed together, but users need to be able to zero in on one shade for more information. If a user clicks on a shade, having the shade expand to cover the page, like a modal box, will separate it from the rest of the page, but still have the other shades easily accessible (the user is not taken to a new page).

Add Settings Pane

In order to keep minimalistic style, madd a settings panel letting users add Hex values, change dark mode, link to Github, etc. (Try pop up menu with hovering icons and tooltip text?)

feature: layout shades in rows instead of single column

Describe the solution you'd like
I think users would love less vertical scrolling and have a better experience with a grid row layout where they could view 3-5 shades per row.

URGENT: Base Card Issues on Large Screens

Describe the bug
On larger screens, the base card is still not working right. The title text is on the wrong line and the card itself will not center right.

To Reproduce
Steps to reproduce the behavior:

1. Generate Shades
2. See issue.

Expected behavior
It should look good!!!

Desktop (please complete the following information):

• OS: Raspian
• Browser: Vivaldi

Additional context
Issue #36 was supposed to be fix, but only worked at small screens.

Dark Mode Button Missing!

Describe the bug
The darkmode button is gone.

To Reproduce
Steps to reproduce the behavior:

1. Go to website.
2. Notice lack of darkmode button.

Expected behavior
A button to toggle darkmode.

"Undefined"

Before the Base Color is shown, the word undefined is displayed.

Toggle Button Bug

Describe the bug
The dark mode toggle is dark in dark mode and light in light mode.

Expected behavior
It is expected that the toggle button will be light in dark mode and dark in light mode.

Desktop (please complete the following information):

• OS: MacOS Mojave
• Browser: Google Chrome

change to pointer cursor on bottom left menu icons

The menu and its items should have a pointer cursor on hover.

Responsive Date

Use JavaScript to create a script that automatically updates the copyright year at the bottom of the page so that it does not have to be done manually.

Full Hex Code Support

Is your feature request related to a problem? Please describe.
Not a problem, just a feature.

Describe the solution you'd like
A way to not only get hex values as an output, but be able to input them as well.

Explain any problems that could arise
Entering values must be an easy process, and when adding multiple methods, we must be careful to maintain the ease of input.

Additional context
Check out this Stack Overflow page on RGB to Hex Conversions.

Customize sidebar scroller with gradient

Customize the sidebar scroller to have a background-gradient matching color input. Make it change dynamically in javascript. Keep the scrollbar thing and maybe dulled so that it doesn't pop too much.

Add hex value support.

In order to help the user, providing the Hexadecimal value for each color would be really helpful. Maybe use an open-source plugin?