Change button design of Quest selected options in such a way that it is distinguishable against any background.

[rahulkrishna-web]

Describe the bug
When we select the options in Quests, its background color changes to rgb(15, 41, 70, 0.8) which becomes indistinguishable against dark background.

In some quests, It becomes difficult to find out whether the option got selected or not due to dark blue or deep color background.

To Reproduce
Go to any quest with dark color background and try to select the options.

Expected behavior
The selected option is clearly visible and distinguishable.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Browser Version: 81.0.4044.122 (Official Build) (64-bit)

[owocki]

@rahulkrishna-web thanks! im going to bounty this. would like for it to work across all color themes (not just this teal one)

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.33 ETH (64.59 USD @ $195.74/ETH) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $86,070.98 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 1 week, 2 days from now.
Please review their action plans below:

1) molecula451 has started work.

Ready to get it on this task right away!

Learn more on the Gitcoin Issue Details page.

[rahulkrishna-web]

Why don't we make some kind of specification around it so that the change is long term. I think Quest is an amazing functionality. If we can make the UI slightly better, it will be great.

…

On Tue 28 Apr, 2020, 10:42 PM Kevin Owocki, ***@***.***> wrote: @rahulkrishna-web <https://github.com/rahulkrishna-web> thanks! im going to bounty this. would like for it to work across all color themes (not just this teal one) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6517 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJDYH45TAXU2JSCGXMDE2C3RO4E6RANCNFSM4MS3PGQQ> .

[molecula451]

PR Tonight

[molecula451]

Why don't we make some kind of specification around it so that the change is long term. I think Quest is an amazing functionality. If we can make the UI slightly better, it will be great.

up to owocki

[molecula451]

Well. at least I am able to see the selected answer with a more unicorn color

What your thoughts are ? @rahulkrishna-web

[rahulkrishna-web]

Add some box-shadow. Will look cool.

…

On Tue 28 Apr, 2020, 11:07 PM Paul, ***@***.***> wrote: Well. at least I am able to see the selected answer with a more *unicorn* color What your thoughts are ? @rahulkrishna-web <https://github.com/rahulkrishna-web> [image: quests] <https://user-images.githubusercontent.com/41552663/80518960-37d2aa80-8955-11ea-9980-6728ceae7442.gif> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6517 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJDYH4Z4IRIE2ULMZVALAUDRO4H6BANCNFSM4MS3PGQQ> .

[rahulkrishna-web]

Maybe we can set the selected option in green. Will make more sense as a visual cue since there is a timer running. The header and background can be of a theme color. On Tue 28 Apr, 2020, 11:12 PM Rahul Krishna, <rahulkrishna.web@gmail.com> wrote:

…

Add some box-shadow. Will look cool. On Tue 28 Apr, 2020, 11:07 PM Paul, ***@***.***> wrote: > Well. at least I am able to see the selected answer with a more *unicorn* > color > > What your thoughts are ? @rahulkrishna-web > <https://github.com/rahulkrishna-web> > > [image: quests] > <https://user-images.githubusercontent.com/41552663/80518960-37d2aa80-8955-11ea-9980-6728ceae7442.gif> > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#6517 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AJDYH4Z4IRIE2ULMZVALAUDRO4H6BANCNFSM4MS3PGQQ> > . >

[owocki]

Why don't we make some kind of specification around it so that the change is long term. I think Quest is an amazing functionality. If we can make the UI slightly better, it will be great.

Do you want me to list about RGB codes?

IMHO the menu color should be different enough from the main color that you can disinguish it, but it shouldnt clash visually with the background color.

the purple in above screengrab clashes IMHO.

[molecula451]

Well, yes kinda. I was figuring out. But I guess a mixing between colors should be OK.

on this particular quest the hover dissapear and the background-color becomes transparent

[sebastiantf]

Adding a green color like shown below only to the selected options looks like this. Maybe this could be applied to all the themes.

[Image moved to my next comment]

Is this fine?

[molecula451]

Adding a green color like shown below only to the selected options looks like this. Maybe this could be applied to all the themes.

that'd couple with what owocki said. It clashed. so in I guess the best to fit in the mixing colors between them making unicorn but keep visually unaffected

[sebastiantf]

But the menu color isn't changed. Only the selected options are changed. I think this matches with what @rahulkrishna-web suggested.

This is how it looks like without any options selected:

With options selected: