Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
rahulkrishna-web opened this issue Apr 28, 2020 · 47 comments · Fixed by #6522 or #6523
Closed

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

rahulkrishna-web opened this issue Apr 28, 2020 · 47 comments · Fixed by #6522 or #6523

Comments

@rahulkrishna-web
Copy link

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
bug_img

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Browser Version: 81.0.4044.122 (Official Build) (64-bit)
@rahulkrishna-web rahulkrishna-web mentioned this issue Apr 28, 2020
Closed
@owocki
Copy link
Contributor

owocki commented Apr 28, 2020

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

@gitcoinbot
Copy link
Member

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.

@gitcoinbot
Copy link
Member

gitcoinbot commented Apr 28, 2020 •
edited
Loading

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
Copy link
Author

rahulkrishna-web commented Apr 28, 2020 via email

@molecula451
Copy link
Contributor

PR Tonight

@molecula451
Copy link
Contributor

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
Copy link
Contributor

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

What your thoughts are ? @rahulkrishna-web

quests

@rahulkrishna-web
Copy link
Author

rahulkrishna-web commented Apr 28, 2020 via email

@rahulkrishna-web
Copy link
Author

rahulkrishna-web commented Apr 28, 2020 via email

@owocki
Copy link
Contributor

owocki commented Apr 28, 2020

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
Copy link
Contributor

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
Copy link
Contributor

sebastiantf commented Apr 28, 2020 •
edited
Loading

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
Copy link
Contributor

molecula451 commented Apr 28, 2020 •
edited
Loading

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
Copy link
Contributor

sebastiantf commented Apr 28, 2020 •
edited
Loading

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:

questoptions1

With options selected:

questoptions

@molecula451
Copy link
Contributor

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

On the particular quest, the hover dissapear. Not looking to change menu color at all, was testing out

@rahulkrishna-web
Copy link
Author

Yes. Green for selected button should be there without transparent background. Other color may depend on the overall color scheme. We can also add depth using box-shadow so that it appears to pop out a little.

We can have this css code :
.answer.selected: { background: #00ff43; box-shadow: 1px 1px 5px #00000078; color: #000; }

@sebastiantf
Copy link
Contributor

We can have this css code :
.answer.selected: { background: #00ff43; box-shadow: 1px 1px 5px #00000078; color: #000; }

The box shadow doesn't seem to have much effect though. This is how this looks:

Screenshot 2020-04-28 at 11 40 58 PM

@sebastiantf
Copy link
Contributor

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

How it looks on the teal background:

questoptionsteal

@rahulkrishna-web
Copy link
Author

I think this will do. I was just concerned about this button because this is the most important element on the page.

@sebastiantf
Copy link
Contributor

Great! Creating a PR now.

@owocki I can't start work on Gitcoin because I'm already on 3 issues. Will that be a problem?

@sebastiantf sebastiantf mentioned this issue Apr 28, 2020
Merged
@sebastiantf
Copy link
Contributor

I have a PR up for this: #6522

@molecula451
Copy link
Contributor

@sebastiantf This is a fairly simple task. I don't even know why you are in a hurry and you can't apply. We are working towards one goal

record-14284228042020

@molecula451
Copy link
Contributor

Please be honest, and if you can't apply just leave the task. Your suggestions are good, tho. Remember. It's a very one goal (Gitcoin)

@rahulkrishna-web
Copy link
Author

Well, in my opinion, we should go by the rules and let the maintainers decide the rest. There is no need to hurry.

@molecula451
Copy link
Contributor

All points out that this "fairly simple tasks" needs also approval requirements otherwise it will create collusion

@sebastiantf
Copy link
Contributor

Oh sorry. I was in no hurry. I thought @rahulkrishna-web had approved the change and the issue was resolved. That's why I moved into the PR.

@rahulkrishna-web
Copy link
Author

Its okay. We did a great job. I would like to thank everyone on this thread for the contribution. It was the first issue posted from my new account. I'm very happy that this got resolved so quickly.

@molecula451
Copy link
Contributor

molecula451 commented Apr 28, 2020 •
edited
Loading

@sebastiantf The PR's needs time to be review not only for owocki but by the other repo owners. And they are never in a hurry

Btw the Ricardian Vs Smart Contracts it's the initial bugged quest so I'm submmiting the work solving this issue

record-14411328042020

@gitcoinbot
Copy link
Member

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

Work for 0.33 ETH (64.73 USD @ $196.14/ETH) has been submitted by:

  1. @molecula451

@owocki please take a look at the submitted work:

@molecula451 molecula451 mentioned this issue Apr 28, 2020
Merged
@molecula451
Copy link
Contributor

To avoid PRs saturation, can you please share us some thoughts yours faithfully @owocki ?

@dotrungkien
Copy link

i've spent a lot of time on quests and beaten all quests in there, and i think green is a little bit dazzling.
during doing quest, i feel most comfortable with blue color same as "Submit Response" button like this, it's very clear.
Screen Shot 2020-04-29 at 18 18 42
how do you think @owocki ?

@sebastiantf
Copy link
Contributor

i've spent a lot of time on quests and beaten all quests in there, and i think green is a little bit dazzling.
during doing quest, i feel most comfortable with blue color same as "Submit Response" button like this, it's very clear.

This is how it looks on the red background:

questoptionsblueonred

@molecula451
Copy link
Contributor

molecula451 commented Apr 29, 2020 •
edited
Loading

I honestly don't get it. Aren't you working on another part of the site @sebastiantf why keep pushing on the bounty just because is a simple task?

Can just please name one-time worker to avoid these things @owocki honestly?

@owocki
Copy link
Contributor

owocki commented Apr 29, 2020

i had maked it was 'cooperative' thinking that people would work together and i could tip out a few of u based off who contributed to the discussion/PR. if we feel that people are working over each other then i can "bless" one contributor.

personally i find the green on blue/red to be a bit jarring, and prefer something a little more like https://user-images.githubusercontent.com/4328059/80590649-78f6b780-8a46-11ea-93bd-660f0664a526.png . i think that in each scenario the selection color should be relative to the background color. thats what i should have written when i wrote this at the top:

would like for it to work across all color themes (not just this teal one)

@molecula451
Copy link
Contributor

molecula451 commented Apr 29, 2020 •
edited
Loading

i had maked it was 'cooperative' thinking that people would work together and i could tip out a few of u based off who contributed to the discussion/PR. if we feel that people are working over each other then i can "bless" one contributor.

Honestly what owocki it's asking. Needs time. But because to provide a good reviewed work. I've seen workers in a hurry for opening a PR so this is unhealthy this way.

@sebastiantf
Copy link
Contributor

sebastiantf commented Apr 29, 2020 •
edited
Loading

if we feel that people are working over each other...

I hope my actions didn't seem like this. I was trying to capture what the issue opener suggested and was sharing my results. And when it was thought to have been resolved, I created a PR. I didn't mean to work over others. Just did what I could and shared it.

i had maked it was 'cooperative'

And that's why I joined the conversation.

I think you could see my actions falling under the cooperative type if you could look at it like that

i think that in each scenario the selection color should be relative to the background color

This is now clear.

And I believe everyone's actions and comments in this thread has only been helpful and contributes to the end goal.

@owocki owocki reopened this Apr 29, 2020
@owocki
Copy link
Contributor

owocki commented Apr 29, 2020

gonna keep this open so the discussion can continue. @molecula451 @sebastiantf no hurt feelings on my side, i understand.

looks like tomorrows release is gonna include #6523 . would love to get something in that looks like this, and works across all the color schemes:

i think that in each scenario the selection color should be relative to the background color.

@molecula451
Copy link
Contributor

@sebastiantf Feel free to add your changes to your PR, so owocki tip us each other. I'm good, is this Ok @owocki ?

@owocki
Copy link
Contributor

owocki commented Apr 29, 2020 via email

@sebastiantf
Copy link
Contributor

sebastiantf commented Apr 29, 2020 •
edited
Loading

@owocki I have changed the colors of the selected options for all the different backgrounds that were not matching. The latest updates and the screenshots of all (34+3) current backgrounds can be seen in my PR: #6522

Please review and let me know of any suggestions.

@molecula451
Copy link
Contributor

forgetful funder somewhere?

@gitcoinbot
Copy link
Member

⚡️ A tip worth 0.16500 ETH (35.16 USD @ $213.1/ETH) has been granted to @molecula451 for this issue from @owocki. ⚡️

Nice work @molecula451! Your tip has automatically been deposited in the ETH address we have on file.

@gitcoinbot
Copy link
Member

⚡️ A tip worth 0.16500 ETH (35.16 USD @ $213.1/ETH) has been granted to @rahulkrishna-web for this issue from @owocki. ⚡️

Nice work @rahulkrishna-web! Your tip has automatically been deposited in the ETH address we have on file.

@gitcoinbot
Copy link
Member

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

This Bounty has been completed.

Additional Tips for this Bounty:

  • owocki tipped 0.1650 ETH worth 35.16 USD to rahulkrishna-web.
  • owocki tipped 0.1650 ETH worth 35.16 USD to molecula451.

@sebastiantf
Copy link
Contributor

Hey @owocki, just wondering if my work #6522 (which satisfied your requirement for this bounty by changing the button colors for all backgrounds) was worth a tip?

@owocki
Copy link
Contributor

owocki commented May 19, 2020 via email

@sebastiantf
Copy link
Contributor

Thanks! 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
6 participants
@owocki @dotrungkien @gitcoinbot @sebastiantf @rahulkrishna-web @molecula451