Community dropdown styling in night mode

[systimotic]

Issue Description

In #12288, a dropdown was added to the navigation. While checking out #12532, I noticed that this dropdown is very bright in night mode. I think it can use some styling updates.

I believe the changes should be made somewhere around here.

Does anybody have any ideas on what it should look like, specifically what colours it should use?
/cc @QuincyLarson @freeCodeCamp/moderators

Screenshot

[justincorrigible]

Hmm How about we try the opposite? keep the dark grey, using the light one for the text itself?
I'll help @systimotic QA if anyone is up for submitting a PR ;)

[raisedadead]

Agreed with Justin, and the specific color codes can be taken from here
https://www.freecodecamp.com/design-style-guide/

[no-stack-dub-sack]

@systimotic @raisedadead @hallaathrad
Hey guys also, what about this:

Was going to open a separate issue for it, but this seems like a sensible place to interject...

I can't tell if someone has said they'll work on this - if not, I'll take it on if we agree both should be fixed!

[raisedadead]

Yup.. I agreed both should be fixed. But keep in mind that this modal is not available on staging anymore.

[systimotic]

@no-stack-dub-sack You can go ahead with fixing the dropdown 👍
Might be best to leave the modal, as it's being removed anyway.

[systimotic]

😕 I just checked, and the modal is available on staging. I guess this was reverted. I'm not sure what the status on that is, whether it's back temporarily or permanently.
It was reverted in #11253. From what I can tell it's back permanently, but I'm not certain.

[no-stack-dub-sack]

@systimotic @raisedadead Ok, so I can go ahead and fix both - and if it ends up being removed - no biggie!

Also noticed that if you click the community button while the dropdown in down, and then mouse out of the drop down, it stays white instead of reverting back to green:

Assuming this is unintentional so will try to look at that as well.

[no-stack-dub-sack]

@raisedadead @systimotic

Agreed with Justin, and the specific color codes can be taken from here
https://www.freecodecamp.com/design-style-guide/

This actually raises two good points:

1. Many of the night mode colors are not in this style guide
2. And, there are several instances of "Free Code Camp" in this style guide, which should be changed per issue Change name from "Free Code Camp" to freeCodeCamp everywhere #12472

However, I cannot find this in the codebase, does anyone know where this lives?

[no-stack-dub-sack]

Ok, so I got something cooked up that I think looks nice and uses nightmode/brand colors, including fixing the focus style issue of the buttons in the navbar:

And here's the dropdown:

BUT, when I started clicking around, for instance, going to the shop, then coming back to the map, the styling reverts back to the light colors. The page momentarily goes back to "day mode", then when it settles back to night mode, the dropdown styles have reverted. Any ideas as to why this might be?

Here's my code, insert at line 1073 of main.less:

.hamburger-dropdown {
    .dropdown .dropdown-menu,
    .open a {
      background-color: @gray;
      a {
        color: @night-text-color;
        &:hover {
          background-color: #666;
          color: @brand-primary;
        }
      }
    }
    a:focus,
    a:active {
      background-color: #666 !important;
      color: @brand-primary !important;
    }
  }

The modals - I worked on this a bit, but they come with a whole slew of other problems that I'm too tired to get into now. Because there's also the "Bug" modal...

[raisedadead]

There are several instances of "Free Code Camp" in this style guide

I have PR pending merge. Ref freeCodeCamp/design-style-guide#7

I like what you have done with the drop down, maybe the text needs more contrast (more whiter), but looks coool!

[Bouncey]

That's sound to me like a react/static page issue. The shop page has not been converted to react yet, and your preference for night mode is not stored locally, I don't think. Night mode selection not persisting across the site is a separate issue and will need one raised, if someone could raise it I would be most obliged. I don't have access to GitHub right now

…

On Monday, 16 January 2017, mrugesh mohapatra ***@***.***> wrote: There are several instances of "Free Code Camp" in this style guide I have PR pending merge. Ref freeCodeCamp/design-style-guide#7 <freeCodeCamp/design-style-guide#7> I like what you have done with the drop down, maybe the text needs more contrast (more whiter), but looks coool! — You are receiving this because you are on a team that was mentioned. Reply to this email directly, view it on GitHub <#12538 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0> .

[justincorrigible]

@no-stack-dub-sack not sure I'm digging the green text over the grey when hovering/active. Doesn't seem to have enough contrast to be readable. How about light grey background with dark grey text?

[no-stack-dub-sack]

@systimotic @raisedadead @hallaathrad So I think this looks a little better per Justin & Mrugesh's comment regarding more contrast, I used the @link-hover-color var which is @brand-primary darkened by 15%, so it still keeps a hint of the brand green, but offers substantially better contrast. This is within the dropdown, and for hover, active, focus of the nav links.

And I think I will open a separate issue regarding the modals and will explain the difficulty with those there.

[justincorrigible]

This looks good to me.

[raisedadead]

Awesomeness!!! Lets have a Pull request already! 😉

[no-stack-dub-sack]

On it!