Freecodecamp: Estilo suspenso da comunidade no modo noturno

Hmm Que tal tentarmos o oposto? manter o cinza escuro, usando o claro para o próprio texto?
Vou ajudar @systimotic QA se alguém quiser enviar um PR;)

Concordo com Justin, e os códigos de cores específicos podem ser retirados daqui
https://www.freecodecamp.com/design-style-guide/

@systimotic @raisedadead @hallaathrad
Ei pessoal também, que tal isso:

Ia abrir uma edição separada para ele, mas este parece um lugar sensato para intervir ...

Não sei dizer se alguém disse que vai trabalhar nisso - se não, vou assumir se concordarmos que ambos devem ser consertados!

Sim .. Eu concordei que ambos deveriam ser corrigidos. Mas lembre-se de que este modal não está mais disponível em teste.

@ no-stack-dub-sack Você pode prosseguir com a correção do menu suspenso 👍
Pode ser melhor sair do modal, pois ele está sendo removido de qualquer maneira.

😕 Acabei de verificar e o modal está disponível no estadiamento. Eu acho que isso foi revertido. Não tenho certeza de qual é o status disso, se está de volta temporária ou permanentemente.
Ele foi revertido em https://github.com/freeCodeCamp/freeCodeCamp/pull/11253. Pelo que posso dizer, ele está de volta permanentemente, mas não tenho certeza.

@systimotic @raisedadead Ok, então posso prosseguir e consertar ambos - e se acabar sendo removido - não é nada demais!

Também observei que se você clicar no botão da comunidade enquanto a lista suspensa estiver aberta e, em seguida, tirar o mouse dela, ele permanecerá branco em vez de voltar ao verde:

Supondo que isso não seja intencional, tentarei examinar isso também.

@raisedadead @systimotic

Concordo com Justin, e os códigos de cores específicos podem ser retirados daqui
https://www.freecodecamp.com/design-style-guide/

Na verdade, isso levanta dois pontos positivos:

1. Muitas das cores do modo noturno não estão neste guia de estilo
2. E, existem várias instâncias de "Free Code Camp" neste guia de estilo, que deve ser alterado de acordo com a edição # 12472

No entanto, não consigo encontrar isso na base de código, alguém sabe onde mora?

Ok, então preparei algo que acho bonito e usa cores noturnas / de marca, incluindo corrigir o problema de

E aqui está o menu suspenso:

MAS, quando comecei a clicar ao redor, por exemplo, indo para a loja, depois voltando para o mapa, o estilo voltou para as cores claras. A página volta momentaneamente para o "modo diurno" e, quando volta ao modo noturno, os estilos suspensos foram revertidos. Alguma ideia de por que isso pode ser?

Aqui está meu código, insira na linha 1073 de 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;
    }
  }

Os modais - trabalhei um pouco nisso, mas eles vêm com uma série de outros problemas que estou cansado demais para resolver agora. Porque também tem o modal "Bug" ...

Existem várias instâncias de "Free Code Camp" neste guia de estilo

Tenho PR pendente de fusão. Ref https://github.com/freeCodeCamp/design-style-guide/pull/7

Gostei do que você fez com o menu suspenso, talvez o texto precise de mais contraste (mais branco), mas parece legal!

Isso me parece um problema de página reagente / estática. A página da loja não tem
foi convertido para reagir ainda, e sua preferência pelo modo noturno não é
armazenado localmente, eu não acho.

A seleção do modo noturno não persistindo no site é um problema separado e
vai precisar de um levantado, se alguém pudesse aumentá-lo eu ficaria muito grato. Eu
não tenho acesso ao GitHub agora

Na segunda-feira, 16 de janeiro de 2017, mrugesh mohapatra [email protected]
escrevi:

Existem várias instâncias de "Free Code Camp" neste guia de estilo

Tenho PR pendente de fusão. Ref freeCodeCamp / design-style-guide # 7
https://github.com/freeCodeCamp/design-style-guide/pull/7

Eu gosto do que você fez com o menu suspenso, talvez o texto precise de mais
contraste (mais branco), mas parece legal!

-
Você está recebendo isso porque faz parte de uma equipe que foi mencionada.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12538#issuecomment-272837258 ,
ou silenciar o tópico
https://github.com/notifications/unsubscribe-auth/ARtk5hIk55x-gDVJsymtMwSfkxmlxp8Wks5rS1TPgaJpZM4Lj7u0
.

@ no-stack-dub-sack não tenho certeza se estou cavando o texto verde sobre o cinza ao pairar / ativo. Não parece ter contraste suficiente para ser legível. Que tal um fundo cinza claro com texto cinza escuro?

@systimotic @raisedadead @hallaathrad Então eu acho que isso parece um pouco melhor pelo comentário de Justin e Mrugesh sobre mais contraste, eu usei @link-hover-color var que está @brand-primary escurecido em 15%, então ainda mantém uma dica da marca verde, mas oferece um contraste substancialmente melhor. Isso está dentro da lista suspensa e, para foco ativo, dos links de navegação.

E acho que vou abrir uma edição à parte sobre os modais e vou explicar a dificuldade com aqueles de lá.

Isso parece bom para mim.

Maravilha!!! Vamos já ter um pedido de pull! 😉

Nele!